【AntDesignPro】基本配置和⼯作流程
⼀、常⽤的⼏个⽬录：
config ：配置⽂件
config.js ：路由定义⽂件&&代理路径⽂件
defaultSettings.js ：主题颜⾊以及标题配置⽂件
public：静态图⽚资源
src ：开发项⽬⽂件（主要在此⽬录下进⾏发）
assets ：存放平台logo
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(⼀开始使⽤假数据模式)
1 let list = [],//所有数据
2 id = 123;
3
4//初始化
5for(let i =1,i<21;i++){
6 const item = {
7 appId:"T"+(100+i),
8 appName:`应⽤${i}`,
9 status:(i % 3).toString()
10 };
11 list.unshift(item);
12 }
13 const OK = {
14 domain:null,
15 type:"s",
16 code:"AAAAA"
17 };
18 const createApplication = (req,res) =>{
19 const newData = {...req.body.tAtpApplication,appId:"T" +id++};
20 list.unshift(newData);
21 res.json:{
22 reply:{
23 returnCode:ok,
24 tAtpApplication:newData
25 }
26 });
27 }
28 const deleteApplication = (req,res) =>{
29 list.forEach((item,index)=>{
30if(item.appId == req.body.appId){
31 list.splice(index,1)
32 }
33 });
34 res.json:{
35 reply:{
36 returnCode:ok,
37 tAtpApplication:req.body
38 }
39 });
40 }
41 .
42 .
43 .
44 export default {
45 "POST /api/queryApplicationList" :queryApplicationList,
46 "POST /api/createApplicationList" :createApplicationList,
47 "POST /api/deleteApplicationList" :deleteApplicationList,
48 }
module
1 import{
2 queryApplicationList,
3 createApplication,
4 deleteApplication
5 } form "@/services/autotest/application";
6
7 export default {
8 namespace:"autotestApplication",
9 state:{
10 data:{}
11 }
12 }
13
14 effects:{
15 *queryApplicationList({payload,callback},{call,put}){
16 const response = yieId call (queryApplicationList,payload);
17if (pe ==="s"){
18 yieId put({
19 type:"save",
北京星兆老年病医院20 data:response.tAtpApplication,
21//data:response
22 });
23if (callback) callback();
24 }
25 .
26 .
27 .
28 reducers:{
29 save(state,action){
30return {...state,data:action.data || {} };
31 },
32 }
service
1 import request from "@/utils/request";
2
3 export async function queryApplicationList(payload){
4return request("/api/queryApplicationList",{
5 method:"POST",
6 data:payload
7 })：
8 }
9 export async function createApplicationList(payload){ 10return request("/api/createApplicationList",{
11 method:"POST",
12 data:payload
13 })：03年高考作文
14 }
15 export async function deleteApplicationList(payload){ 16return request("/api/deleteApplicationList",{
17 method:"POST",
18 data:payload
19 })：
20 }
pages
1 ...略
2 @connect (({autotestApplication}) =>({通讯世界
3 data:autotestApplication.data
4 }))
5 class Application extends Component {
6 constructor (props){
7 super(props);
8this.state = {
9 data:[]
10 }pasco
11 }
12 }
13
14 componentDidMount(){
15this.queryAppList(this.state.param);
16 }
17
18//删除应⽤
19 handleDelete = key =>{
20 const {dispatch} = this.props;
21 dispatch({
22 type:"autotestApplication/deleteApplication",
23 payload:{appId:key},
24 callback:()=>{
25 }闫世可
26this.queryAppList
27 }
