【Ant Design Pro】基本配置和工作流程

一、常用的幾個目錄：

config ：配置文件
     config.js ：路由定義文件&&代理路徑文件
     defaultSettings.js ：主題顏色以及標題配置文件
     plugin.config.js ：沒怎么用過的配置文件 

mock：mock數據文件，用於本地開發使用

public：靜態圖片資源

src ：開發項目文件（主要在此目錄下進行發）

   assets ：存放平台logo
   components ：全局組件文件夾
   layouts ：全局布局文件
   locales：國際化文件
   models ：數據倉庫，每個文件都需要一個命名空間 ，定義全局請求函數
   pages：頁面文件
   service ： 全局service 發起請求文件
   utils ：工具文件 其中會有自定義request.js

平時主要用4個文件：mock、page、models、services

 

二、module內容具體分析

在model中存在 namespace(命名空間，用來區分不同的頁面之間的數據)，state（該命名空間下的數據），effects（一些異步請求的api方法定義在這里），reducers（用來修改state的一些函數定義在reducers下）

文件包含以下幾個模塊（實際上都是javascript對象）：

state => 數據構成

effects => 處理異步action，采用generator的相關概念，將異步轉化成同步寫法。

reducers => 處理同步action，相當於redux中的reducer函數，純函數（即相同的輸入得到相同的輸出）

 

routes 業務組件，通常是需要連接數據倉庫的組件。我們通過connect連接數據倉庫之后可以通過this.props獲取到數據和dispatch方法，並使用dispatch派發action來達到更新state（即更新數據倉庫）的操作。

components 通用組件（純組件），通常是一些復用性很強的組件，不需要連接數據倉庫。通過props傳遞數據，父組件傳遞相同的props，會渲染相同的頁面。不做任何業務上的處理。

services 所有的請求都寫在這里，官方已經為我們封裝了request方法，我們只需要傳入參數即可。

 

三、整體的一個運行流程如下：

進入頁面，在頁面的componentDidMount鈎子函數中調用model的effect中的方法，該方法調用service文件夾下的統一管理的請求函數。

獲取到服務器返回值，在model的effect中拿到，並且調用model下的reducer，調用model的reducers對請求的數據進行處理，將model的state進行改變，頁面自動進行渲染。

 

四、在工作中的例子

mock(一開始使用假數據模式)

let list = [],//所有數據
     id = 123;

//初始化
for(let i =1,i<21;i++){
   const item = {
       appId:"T"+(100+i),
       appName:`應用${i}`,
       status:(i % 3).toString()
   };
   list.unshift(item);
}
const OK = {
   domain:null,
   type:"s",
   code:"AAAAA"
};
const createApplication = (req,res) =>{
    const newData = {...req.body.tAtpApplication,appId:"T" +id++};
    list.unshift(newData);
    res.json:{
       reply:{
          returnCode:ok,
          tAtpApplication:newData
       }
    });
}
const deleteApplication = (req,res) =>{
    list.forEach((item,index)=>{
      if(item.appId == req.body.appId){
         list.splice(index,1)
      }
    });
    res.json:{
       reply:{
          returnCode:ok,
          tAtpApplication:req.body
       }
    });
}
.
.
.
export default {
   "POST /api/queryApplicationList" :queryApplicationList,
   "POST /api/createApplicationList" :createApplicationList,
   "POST /api/deleteApplicationList" :deleteApplicationList,
}

module

import{
  queryApplicationList,
  createApplication,
  deleteApplication
} form "@/services/autotest/application";

export default {
  namespace:"autotestApplication",
  state:{
    data:{}
  }
}

effects:{
  *queryApplicationList({payload,callback},{call,put}){
    const response = yieId call (queryApplicationList,payload);
    if (response.returnCode.type ==="s"){
       yieId put({
           type:"save",
           data:response.tAtpApplication,
          //data:response
    });
   if (callback) callback();
}
.
.
.
reducers:{
  save(state,action){
     return {...state,data:action.data || {} };
},
}

service

import request from "@/utils/request";

export async function queryApplicationList(payload){
   return request("/api/queryApplicationList",{
       method:"POST",
       data:payload
  })：
}
export async function createApplicationList(payload){
   return request("/api/createApplicationList",{
       method:"POST",
       data:payload
  })：
}
export async function deleteApplicationList(payload){
   return request("/api/deleteApplicationList",{
       method:"POST",
       data:payload
  })：
}

 pages

...略
@connect (({autotestApplication}) =>({
   data:autotestApplication.data
}))
class Application extends Component {
   constructor (props){
      super(props);
      this.state = {
        data:[]
      }
   }
}

componentDidMount(){
  this.queryAppList(this.state.param);
}

//刪除應用
handleDelete = key =>{
   const {dispatch} = this.props;
   dispatch({
       type:"autotestApplication/deleteApplication",
       payload:{appId:key},
       callback:()=>{
   }
   this.queryAppList
}