react配合antd組件實現的管理系統示例代碼

2019-11-19 13:57:55

字體：大中小

來源：轉載

供稿：網友

前言：此文需要有一定react，redux基礎，具體學習資料請科學上網。

使用create-react-app腳手架

具體基礎配置請參考

配合antd組件實現的管理系統demo,線上地址

開發前反思

1. 按需加載

webpack的 import 動態加載的模塊的函數，import(參數)，參數為模塊地址。

注意： import 后會返回一個promise對象。

import('/components/chart').then(mud => {  dosomething(mod)});

本demo構建了異步加載組件Bundle,具體代碼請見

class Bundle extends Component { constructor(props) {   super(props);   this.state = {     mod: null   }; } unmount = false componentDidMount = () => {  // 加載組件時，打開全局loading  this.props.dispatch(loading(true))  this.load(this.props) } componentWillUnmount = () => {  this.unmount = true }  componentWillReceiveProps(nextProps) {   if (nextProps.load !== this.props.load) {     this.load(nextProps)   } } load(props) {   if (this.state.mod) {     return true   }   //注意這里，使用Promise對象; mod.default導出默認   props.load().then((mod) => {     if (this.unmount) {       // 離開組件時，不異步執行setState       this.props.dispatch(loading(false))       return false     }     this.setState({       mod: mod.default ? mod.default : mod     }, _ => {      // 組件加載完畢，關閉loading      this.props.dispatch(loading(false))     });   }); } render() {   return this.state.mod ? this.props.children(this.state.mod) : null; }}

具體使用

<Bundle load={() => import('路徑')}>  {Comp => {   return Comp ? <Comp /> : <div>加載中...</div>  }} </Bundle>

2. 全局loading

配合redux，dispatch => reducer更新 => mapstate更新,在根組件進行loading的渲染

詳細請見本demo地址 src/routers/router.js――render函數

3. 配置路由對象

項目布局如下

本demo使用的是router4,官方文檔演示為單行Route（如vue種的router），未有統一配置對象。管理系統基本圍繞著content進行業務開發，構建通用配置有助于開發構建router.config.js

const routers = [ {  menuName: '主頁',  menuIco: 'home',  component: 'home/home.js', // 主頁  path: '/admin/home' // 主頁 }, {  menuName: '用戶',  menuIco: 'user',  children: [   {    menuName: '用戶列表',    component: 'user/list.js', // 主頁    path: '/admin/user/list' // 主頁   }  ] }, {  menuName: '多級菜單',  menuIco: 'setting',  children: [   {    menuName: '多級菜單2',    children: [     {      menuName: '菜單',      component: 'user/list.js', // 主頁      path: '/admin/user/list3' // 主頁     }    ]   }  ] }, {  menuName: '關于我',  menuIco: 'smile-o',  component: 'about/about.js', // 主頁  path: '/admin/about' // 主頁 }]

實現思路，最外層布局為Admin,content被Admin包裹，那么可以利用 this.props.children ，把內容打入content中。（利用bundle組件異步加載后塞入組件進行渲染）

<Admin>  <Content { ...this.props } breadcrumb={this.state.breadcrumb}>    {this.props.children}  </Content></Admin>// Content組件內部render() {  return (    <div>       {this.props.children}    </div>  )}// 本demo實現,詳見src/routers/router.js<Route path="/admin" render={item => (  <Admin {...item} { ...this.props }>   {initRouters.map(el => this.deepItem(el, { ...this.props, ...item}))}  </Admin> )}/>

4. 配置通用reducer

多人配合開發，一些業務場景的組件需要狀提升(不理解狀態提升的同學，請科學上網)

import otherReducers from './otherReducers'const App = combineReducers({  rootReducers,  ...otherReducers // 其他需要增加的reducers})

5. 登陸驗證

利用 withRouter 函數，頁面進行路由跳轉時觸發該函數

const newWithRouter = withRouter(props => {  // ....})

若未登錄，則返回

return <Redirect to="/login" />

6. 路由攔截

同上，根據路由配置與權限，返回相應的菜單或屏蔽

return <Redirect to={其他} />

7 其他配置

7-1. 自定義樣式

// 修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件{  test: //.(css|less)$/,  // 匹配src的都自動加載css-module  include: [/src/],  exclude: [/theme/],  use: [    require.resolve('style-loader'), {      loader: require.resolve('css-loader'),      options: {        importLoaders: 1,        modules: true, // 新增對css modules的支持        localIdentName: '[path]___[name]__[local]___[hash:base64:5]'      }    }, {      loader: require.resolve('postcss-loader'),      options: {        // Necessary for external CSS imports to work        // https://github.com/facebookincubator/create-react-app/issues/2677        ident: 'postcss',        plugins: () => [          require('postcss-flexbugs-fixes'),          autoprefixer({            browsers: [              '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway            ],            flexbox: 'no-2009'          })        ]      }    }, {      loader: require.resolve('less-loader') // compiles Less to CSS    }  ]}, {  // 不匹配node_modules,theme的都不能自動加載css-module  test: //.(css|less)$/,  include: [/node_modules/,/theme/],  use: [    {      loader: "style-loader"    }, {      loader: "css-loader",      options: {        importLoaders: 1      }    }, {      loader: require.resolve('less-loader') // compiles Less to CSS    }  ]},

使用：在App.js中直接導入

import './assets/theme/App.less'

7-2. 熱更新

步驟一：

// 安裝react-hot-loader npm install --save-dev react-hot-loader

步驟二：

在webpack.config.js 的 entry 值里加上 react-hot-loader/patch

步驟三：

webpackDevServer.config.js中hot設置為true

步驟四：在webpack.config.dev.js中在babel-loader中plugins加入react-hot-loader/babel

{  test: //.(js|jsx|mjs)$/,  include: paths.appSrc,  loader: require.resolve('babel-loader'),  options: {    // This is a feature of `babel-loader` for webpack (not Babel itself). It    // enables caching results in ./node_modules/.cache/babel-loader/ directory for    // faster rebuilds.    cacheDirectory: true,    plugins: [      'react-hot-loader/babel'    ]  }},

步驟五：

重寫index.js，App掛載

import { AppContainer } from 'react-hot-loader'const render = Component => {  ReactDOM.render(    <AppContainer>      <Component></Component>    </AppContainer>,    document.getElementById('root')  )}render(App)if(module.hot) {  module.hot.accept('./App',() => {    render(App);  });}

7-3. 本地瀏覽

直接在package.json中加入