#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 
  
  一、下載或克隆項目源碼
  2.npm安裝相關包文件
     npm i
     
  3.啓動項目 
  
   npm start 
    
   4.打包項目
   
   npm run build