2019独角兽企业重金招聘Python工程师标准>>> 
#首页 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 =
);
}
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=gebc0m
import createHistory from 'history/createBrowserHistory'; 引入后 可以让url 中去掉#，形如restfulurl 方式的 url
在页面index.js 中 初始化dva
cesjosfhoslhfshgdl hgdl
1、下载或克隆项目源码
2.npm安装相关包文件
npm i
3.启动项目
npm start
4.打包项目
npm run build