#首页 src/index.js

import '@babel/polyfill';
import 'url-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  dva初始化
const app = dva({history: createHistory(),
});// 2. Plugins   加载插件
app.use(createLoading());// 3. Register global model   注册全集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

就是以上5步成就了首页 引用createHistory 可以实现类似java restfull 风格api 一样的路径访问

引用路由 src/router.js

import React from 'react';
import { routerRedux, Route, Switch } from 'dva/router';
import { LocaleProvider, Spin } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import dynamic from 'dva/dynamic';
import { getRouterData } from './common/router';
import Authorized from './utils/Authorized';
import styles from './index.less';//const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;const { ConnectedRouter } = routerRedux;
const { AuthorizedRoute } = Authorized;
dynamic.setDefaultLoadingComponent(() => {return <Spin size="large" className={styles.globalSpin} />;
});function RouterConfig({ history, app }) {const routerData = getRouterData(app);const UserLayout = routerData['/user'].component;const BasicLayout = routerData['/'].component;return (<LocaleProvider locale={zhCN}><ConnectedRouter history={history}><Switch><Route path="/user" component={UserLayout} /><AuthorizedRouteapath="/"authority={['admin', 'user']}render={props => <BasicLayout {...props} />}redirectPath="/user/login"/></Switch></ConnectedRouter></LocaleProvider>);
}export default RouterConfig;

里面用到了AuthorizedRoutea 和 authority，目前笔者比较笨，还没研究透，大意是权限控制，感觉和spring 的secrity 差不多，在这个项目当中主要用了

这里还用到了 加载动画，但是也没找到怎么替换，后续补充更新

// use localStorage to store the authority info, which might be sent from server in actual project.
export function getAuthority() {const exp =30000;/* const curTime = new Date().getTime();const key = localStorage.getItem('antd-pro-authority');if(key){if(isJSON(key)){const dataObj = JSON.parse(key);if (curTime - dataObj.time > exp){return "guest"}return dataObj.data;}else{return "18888888888";}}*/// return localStorage.getItem('antd-pro-authority') || ['admin', 'user'];return localStorage.getItem('antd-pro-authority') || 'guest';  //修改这里为guest.
}function isJSON(str) {try {if (typeof JSON.parse(str) == "object") {return true;}} catch(e) {}return false;
}export function setAuthority(authority) {/*let curTime = new Date().getTime();let authorityvalue = JSON.stringify({data:authority,time:curTime});return localStorage.setItem('antd-pro-authority', authorityvalue);*/return localStorage.setItem('antd-pro-authority', authority);}export function setuser(user) {if(user){return  localStorage.setItem('user', JSON.stringify(user));}else {return localStorage.setItem('user', "");}}

貌似是说 如果权限是guest 那么就进入到登陆页面，如果是admin 或者user 权限 就进入到相应的路由页面 后续研究好了再来补充

##使用日常记录

  src/components/SiderMenu/SiderMenu.js    第212代码。width改右边导航栏长度导航栏的内容在 src/common/menu.js 中全局的路由关系是这样一个走向：src/index.js 中通过 app.router(require('./router').default);，将 src/router.js 绑定到 dva 实例的 router 方法上。而在 src/router.js 中又引入了 src/common/router.js 中的 getRouterData 作为数据源。如果有点绕，不太能一下子看明白，那就直接记下面的结论：因而，src/common/menu.js 中 path 所指向的路径对应于 src/common/router.js 中的路由记录。getRouterData 同src目录下，.webpackrc.js里面配置了，关联了页面入口设置。routes：每个路由对应的页面组件文件。主要定义具体页面的基本结构和内容。services：用于与后台交互、发送请求等。models：用于组件的数据存储，接收请求返回的数据等。components：组件文件夹。每个页面可能是由一些组件组成的，对于一些相对通用的组件，建议将该组件写入components文件夹中，并在routes文件夹中的文件引入来使用。.roadhogrc.mock.js   拦截api接口地址utils/authority.js   控制 权限 登录用户名redux  和 dva import createHistory from 'history/createHashHistory';  引入后  可以让url中多出#  比如：http://localhost:8000/#/?_k=gebc0mimport createHistory from 'history/createBrowserHistory';  引入后  可以让url 中去掉#，形如restfulurl 方式的 url 在页面index.js 中  初始化dva  cesjosfhoslhfshgdl hgdl 1、下载或克隆项目源码2.npm安装相关包文件npm i3.启动项目 npm start 4.打包项目npm run build