一、index.ejs

1、在这个文件夹中我们通常做一些默认的字体设置，以及IE浏览器兼容性的处理。

字体处理：``````

IE浏览器兼容性设置：

二、index.js

初始化一些默认配置，和调用model中的global.js获取全局共有的数据。

三、router.js

进入路由组件，在这个组件中我们需要加载页面的框架也就是layout组件，同时进行页面初次打开时所访问页面。

还有进行权限的配置与拦截。

四、layouts/BasicLayout.js

整个页面的框架部分，主要是做一下工作：

构建整个页面，把所有的页面拼凑起来。

用户权限判定，与其对应菜单的生成。

对非法请求路径进行拦截，和重定向

调用models/global.js，获取全局共用数据

五、common/

在这个文件夹中存放着两个文件，一个是menu.js一个是router.js

1.menu.js

在这个文件中，我们发现我们的菜单是写死的，但是在正式的项目，我们的菜单都是请    求后台来获取的，所以这里需要修改。

2.router.js

这个地方是Antd-pro中最为核心的一部分，如果把Antd-pro比作一辆汽车的话，那个router.js就是它的引擎，它连接着：Router、Model、Component,通过方法getRouterData把他们绑定到一起

// '/路由Router'：{//     component: dynamicWrapper(app, [Model], () => import(组件Component)),//}'/': {      component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),    },

如果我们要添加一个页面，就需要在这个地方进行注册

六、routes/

业务页面入口和常用模板

注意：一个业务对应一个文件

在写每一个业务时，需要对这个这个业务的流程与整个构成有一个深入的了解，因为我们需要把一些功能相近的模块提取出来写一个共有的组件。

并且在写的时候，尽量把业务拆分成多个板块，然后创建不同文件，最后再在一个文件去，拼凑这些细化的功能组件。

举例：（简单的CRWD组件）

1.模块：顶部的搜索框、中部的操作按钮、底部表格、新增或者编辑所需要的Form表单

2.搜索框组件：SearchForm.js；操作组件：HandleList.js；表格组件：Table.js；表单组件：Form.js；

七、component/

业务通用组件

注意：

1. 公用组件中绝对不能涉及到数据，所有的数据来源均来自调用这个通用组件的组件

2. 判定每一个传入的数据的格式，设置默认值，防止传入空的或者格式不匹配的数据

3. 备注好每一个函数的作用

在写通用组件时，我需要的是足够细化它的功能，并且尽可能的去考虑到多的情况。

八、models/

dva model模块

在这个模块去编写需要跨多个组件的数据传递，并且请求后台数据。当我向后台发送请求时，在返回请求的的数据中，需要判定data中的code，如果code为0则为请求成功，如果不为0，我们需要抛出这个这个错误，告知用户。

注意：

一个业务组件一个对应一个model对应一个后台服务

九、services/

后台接口服务

这个模块对应这后台接口服务。

// 接口名称export async function fakeGetcaptcha(params){                                // 共有API前缀     私有API接口    return request(createTheURL(Config.API.LOGIN, 'getcaptcha'), {        method: 'GET', // 请求方法        body: params,  //向后台发送的数据    });}

注意

1.私有接口必须为全小写

2.通常情况下一个业务对应一个services