初识antd pro （转）

Posted 2020-12-21 snowhite

1.项目的入口为src/index.js文件：

1.  
   import ‘./polyfill‘;
2.  
   import dva from ‘dva‘;
3.  
    
4.  
   import createHistory from ‘history/createHashHistory‘;
5.  
   // user BrowserHistory
6.  
   // import createHistory from ‘history/createBrowserHistory‘;
7.  
   import createLoading from ‘dva-loading‘;
8.  
   import ‘moment/locale/zh-cn‘;
9.  
   import ‘./rollbar‘;
10.  
     
11.  
    import ‘./index.less‘;
12.  
    // 1. Initialize
13.  
    const app = dva({
14.  
    history: createHistory(),
15.  
    });
16.  
     
17.  
    // 2. Plugins
18.  
    app.use(createLoading());
19.  
     
20.  
    // 3. Register global model
21.  
    app.model(require(‘./models/global‘).default);
22.  
     
23.  
    // 4. Router
24.  
    app.router(require(‘./router‘).default);
25.  
     
26.  
    // 5. Start
27.  
    app.start(‘#root‘);
28.  
     
29.  
    export default app._store; // eslint-disable-line

2.左侧菜单的配置放在了src/common/menu.js:

1.  
   import { isUrl } from ‘../utils/utils‘;
2.  
    
3.  
   const menuData = [
4.  
   {
5.  
   name: ‘dashboard‘,
6.  
   icon: ‘dashboard‘,
7.  
   path: ‘dashboard‘,
8.  
   children: [
9.  
   {
10.  
    name: ‘分析页‘,
11.  
    path: ‘analysis‘,
12.  
    },
13.  
    {
14.  
    name: ‘监控页‘,
15.  
    path: ‘monitor‘,
16.  
    },
17.  
    {
18.  
    name: ‘工作台‘,
19.  
    path: ‘workplace‘,
20.  
    // hideInBreadcrumb: true,
21.  
    // hideInMenu: true,
22.  
    },
23.  
    ],
24.  
    },
25.  
     
26.  
    {
27.  
    name: ‘列表页‘,
28.  
    icon: ‘table‘,
29.  
    path: ‘list‘,
30.  
    children: [
31.  
    {
32.  
    name: ‘查询表格‘,
33.  
    path: ‘table-list‘,
34.  
    },
35.  
    {
36.  
    name: ‘标准列表‘,
37.  
    path: ‘basic-list‘,
38.  
    },
39.  
    {
40.  
    name: ‘卡片列表‘,
41.  
    path: ‘card-list‘,
42.  
    },
43.  
    {
44.  
    name: ‘搜索列表‘,
45.  
    path: ‘search‘,
46.  
    children: [
47.  
    {
48.  
    name: ‘搜索列表（文章）‘,
49.  
    path: ‘articles‘,
50.  
    },
51.  
    {
52.  
    name: ‘搜索列表（项目）‘,
53.  
    path: ‘projects‘,
54.  
    },
55.  
    {
56.  
    name: ‘搜索列表（应用）‘,
57.  
    path: ‘applications‘,
58.  
    },
59.  
    ],
60.  
    },
61.  
    ],
62.  
    },
63.  
     
64.  
    {
65.  
    name: ‘结果页‘,
66.  
    icon: ‘check-circle-o‘,
67.  
    path: ‘result‘,
68.  
    children: [
69.  
    {
70.  
    name: ‘成功‘,
71.  
    path: ‘success‘,
72.  
    },
73.  
    {
74.  
    name: ‘失败‘,
75.  
    path: ‘fail‘,
76.  
    },
77.  
    ],
78.  
    },
79.  
     
80.  
    {
81.  
    name: ‘账户‘,
82.  
    icon: ‘user‘,
83.  
    path: ‘user‘,
84.  
    authority: ‘guest‘,
85.  
    children: [
86.  
    {
87.  
    name: ‘登录‘,
88.  
    path: ‘login‘,
89.  
    },
90.  
    {
91.  
    name: ‘注册‘,
92.  
    path: ‘register‘,
93.  
    },
94.  
    {
95.  
    name: ‘注册结果‘,
96.  
    path: ‘register-result‘,
97.  
    },
98.  
    ],
99.  
    },
100.  
     ];
101.  
      
102.  
     function formatter(data, parentPath = ‘/‘, parentAuthority) {
103.  
     return data.map(item => {
104.  
     let { path } = item;
105.  
     if (!isUrl(path)) {
106.  
     path = parentPath + item.path;
107.  
     }
108.  
     const result = {
109.  
     ...item,
110.  
     path,
111.  
     authority: item.authority || parentAuthority,
112.  
     };
113.  
     if (item.children) {
114.  
     result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
115.  
     }
116.  
     return result;
117.  
     });
118.  
     }
119.  
      
120.  
     export const getMenuData = () => formatter(menuData);

3.在/src/common/router.js中配置路由，其中第一个参数是一个DvaInstance的实例，是index.js文件中定义的（app）；第二个参数是该页面对应的model(model文件名)，即数据存储的地方；第三个参数是一个函数，返回对应的页面（在routes下面）。

1.  
   ‘/‘: {
2.  
   component: dynamicWrapper(app, [‘user‘, ‘login‘], () => import(‘../layouts/BasicLayout‘)),
3.  
   },
4.  
   ‘/dashboard/analysis‘: {
5.  
   component: dynamicWrapper(app, [‘chart‘], () => import(‘../routes/Dashboard/Analysis‘)),
6.  
   },

4.数据操作在src/models/文件夹下新建一个js文件（对应routerConfig中的model），作为这个页面的model，用来定义该页面需要用到的数据，以及一些函数。在model中存在 namespace(命名空间，用来区分不同的页面之间的数据，一般命名空间与文件名相同)，state（该命名空间下的数据），effects（一些异步请求的api方法定义在这里），reducers（用来修改state的一些函数定义在reducers下）。

model类似于mvc结构中控制器的角色，其中主要有五个配置项。

• namespace是model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间。
• state：state的初始值，优先级低于传给 dva() 的 opts.initialState。
• subscription:以 key/value 格式定义 subscription。subscription 是订阅，用于订阅一个数据源，然后根据需要 dispatch 相应的 action。在 app.start() 时被执行，数据源可以是当前的时间、服 务器的 websocket 连接、keyboard 输入、geolocation 变化、 history 路由变化等等。
• reducers key/value 格式定义 reducer，用于处理同步操作，唯一可以修改 state 的地方。由 action 触发：
• 1.  
     reducers: {
  2.  
     save(state, { payload }) {
  3.  
     return {
  4.  
     ...state,
  5.  
     ...payload,
  6.  
     };
  7.  
     },
  8.  
     }

   

• effects：以 key/value 格式定义 effect。用于处理异步操作和业务逻辑，不直接修改 state哦。由 action 触发，可以触发 action，可以和服务 器交互，可以获取全局 state 的数据等等。model中调用来自src/services/....下的暴露出来的接口数据函数，从而实现与后端的数据交互。

小结：页面中整体的数据流程如下：

• 进入页面后匹配相应的路径，在页面的componentDidMount钩子函数中调用model的effect中的方法（dispatch）

• 该方法调用service文件夹下的统一管理的请求函数

• 获取到服务器返回值，在model的effect中拿到数据data，并且通过type--调用model下的reducer

• 调用model的reducers对请求的数据进行处理，将model的state进行改变，页面自动进行渲染