Antd编程规范

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

1、index.ejs

一、在这个文件夹中咱们一般作一些默认的字体设置，以及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">

2、index.js

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

3、router.js

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

4、layouts/BasicLayout.js

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

1. 构建整个页面，把全部的页面拼凑起来。
2. 用户权限断定，与其对应菜单的生成。
3. 对非法请求路径进行拦截，和重定向
4. 调用models/global.js，获取全局共用数据

5、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')),
    },

若是咱们要添加一个页面，就须要在这个地方进行注册

6、routes/

业务页面入口和经常使用模板
注意：一个业务对应一个文件
在写每个业务时，须要对这个这个业务的流程与整个构成有一个深刻的了解，由于咱们须要把一些功能相近的模块提取出来写一个共有的组件。
而且在写的时候，尽可能把业务拆分红多个板块，而后建立不一样文件，最后再在一个文件去，拼凑这些细化的功能组件。
举例：（简单的CRWD组件）
1.模块：顶部的搜索框、中部的操做按钮、底部表格、新增或者编辑所须要的Form表单
2.搜索框组件：SearchForm.js；操做组件：HandleList.js；表格组件：Table.js；表单组件：Form.js；

7、component/

业务通用组件
注意：
1. 公用组件中绝对不能涉及到数据，全部的数据来源均来自调用这个通用组件的组件
2. 断定每个传入的数据的格式，设置默认值，防止传入空的或者格式不匹配的数据
3. 备注好每个函数的做用
在写通用组件时，我须要的是足够细化它的功能，而且尽量的去考虑到多的状况。

8、models/

dva model模块
在这个模块去编写须要跨多个组件的数据传递，而且请求后台数据。当我向后台发送请求时，在返回请求的的数据中，须要断定data中的code，若是code为0则为请求成功，若是不为0，咱们须要抛出这个这个错误，告知用户。
注意：
一个业务组件一个对应一个model对应一个后台服务

9、services/

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

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

注意
1.私有接口必须为全小写
2.一般状况下一个业务对应一个services

10、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请求接口