初识antd pro （转）
1.项目的入口为src/index.js文件：
-
import './polyfill';
-
import dva from 'dva';
-
-
import createHistory from 'history/createHashHistory';
-
// user BrowserHistory
-
// import createHistory from 'history/createBrowserHistory';
-
import createLoading from 'dva-loading';
-
import 'moment/locale/zh-cn';
-
import './rollbar';
-
-
import './index.less';
-
// 1. Initialize
-
const app = dva({
-
history: createHistory(),
-
});
-
-
// 2. Plugins
-
app.use(createLoading());
-
-
// 3. Register global model
-
app.model(require('./models/global').default);
-
-
// 4. Router
-
app.router(require('./router').default);
-
-
// 5. Start
-
app.start('#root');
-
-
export default app._store; // eslint-disable-line
2.左侧菜单的配置放在了src/common/menu.js:
-
import { isUrl } from '../utils/utils';
-
-
const menuData = [
-
{
-
name: 'dashboard',
-
icon: 'dashboard',
-
path: 'dashboard',
-
children: [
-
{
-
name: '分析页',
-
path: 'analysis',
-
},
-
{
-
name: '监控页',
-
path: 'monitor',
-
},
-
{
-
name: '工作台',
-
path: 'workplace',
-
// hideInBreadcrumb: true,
-
// hideInMenu: true,
-
},
-
],
-
},
-
-
{
-
name: '列表页',
-
icon: 'table',
-
path: 'list',
-
children: [
-
{
-
name: '查询表格',
-
path: 'table-list',
-
},
-
{
-
name: '标准列表',
-
path: 'basic-list',
-
},
-
{
-
name: '卡片列表',
-
path: 'card-list',
-
},
-
{
-
name: '搜索列表',
-
path: 'search',
-
children: [
-
{
-
name: '搜索列表（文章）',
-
path: 'articles',
-
},
-
{
-
name: '搜索列表（项目）',
-
path: 'projects',
-
},
-
{
-
name: '搜索列表（应用）',
-
path: 'applications',
-
},
-
],
-
},
-
],
-
},
-
-
{
-
name: '结果页',
-
icon: 'check-circle-o',
-
path: 'result',
-
children: [
-
{
-
name: '成功',
-
path: 'success',
-
},
-
{
-
name: '失败',
-
path: 'fail',
-
},
-
],
-
},
-
-
{
-
name: '账户',
-
icon: 'user',
-
path: 'user',
-
authority: 'guest',
-
children: [
-
{
-
name: '登录',
-
path: 'login',
-
},
-
{
-
name: '注册',
-
path: 'register',
-
},
-
{
-
name: '注册结果',
-
path: 'register-result',
-
},
-
],
-
},
-
];
-
-
function formatter(data, parentPath = '/', parentAuthority) {
-
return data.map(item => {
-
let { path } = item;
-
if (!isUrl(path)) {
-
path = parentPath + item.path;
-
}
-
const result = {
-
...item,
-
path,
-
authority: item.authority || parentAuthority,
-
};
-
if (item.children) {
-
result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
-
}
-
return result;
-
});
-
}
-
-
export const getMenuData = () => formatter(menuData);
3.在/src/common/router.js中配置路由，其中第一个参数是一个DvaInstance的实例，是index.js文件中定义的（app）；第二个参数是该页面对应的model(model文件名)，即数据存储的地方；第三个参数是一个函数，返回对应的页面（在routes下面）。
-
'/': {
-
component: dynamicWrapper(app, ['user', 'login'], () => import('../layouts/BasicLayout')),
-
},
-
'/dashboard/analysis': {
-
component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),
-
},
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 触发：
- 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进行改变，页面自动进行渲染
