#react 之ant design Pro 学习研究#----启动项目

#首页 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} />
          <AuthorizedRoutea
            path="/"
            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=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  
  
  

来源：oschina

链接：https://my.oschina.net/u/3277181/blog/2962001