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請求接口