Antd编程规范

本篇文章是通过页面访问顺序来进行介绍的
项目git地址：https://gitee.com/xikeda/Fram...

一、index.ejs

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

字体处理：

```
<style>
@font-face
{
font-family: myFirstFont;
src: url('../static/fonts/fontawesome-webfont.ttf'),
     url('../static/fonts/fontawesome-webfont.eot'),
     url('../static/fonts/fontawesome-webfont.svg'),

}
body{
  font-family:myFirstFont;
  margin: 0;
}
</style>
```

IE浏览器兼容性设置：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

二、index.js

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

三、router.js

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

四、layouts/BasicLayout.js

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

1. 构建整个页面，把所有的页面拼凑起来。
2. 用户权限判定，与其对应菜单的生成。
3. 对非法请求路径进行拦截，和重定向
4. 调用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

十、request/

向后台发送请求
在这个里面一共有4个文件

1.request.js

选择调用的后台请求模式，axios或者fetch，固定参数API.REQUEST_METHOD可以在./../../config/api中进行配置

2.request.axios.js和request.fetch.js,这两种不同写法，但是具备相同功能的请求。

3.checkStatus.js检查请求完成后，返回的data中的code是否存在错误，如果有则直接抛出。

我们在处理后台请求时还会需要几个文件：

1. utils/ip.js设置请求的ip地址
2. utils/utils.js中的createTheURL拼接ip地址与API接口，使其成为一个完整的请求地址
3. config/api.js写共有的请求方式（REQUEST_METHOD），和API请求接口