首頁 > web前端 > js教程 > 主體

react配合antd組件做出後台系統

php中世界最好的语言
發布: 2018-04-27 09:55:43
原創
2299 人瀏覽過

這次帶給大家react配合antd組件做出後台系統,react配合antd組件做出後台系統的注意事項有哪些,下面就是實戰案例,一起來看一下。

使用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 /> : <p>加载中...</p>
  }}
 </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 (
    <p> 
      {this.props.children}
    </p>
  )
}
// 本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&#39;, // React doesn&#39;t support IE8 anyway
            ],
            flexbox: &#39;no-2009&#39;
          })
        ]
      }
    }, {
      loader: require.resolve(&#39;less-loader&#39;) // 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(&#39;less-loader&#39;) // compiles Less to CSS
    }
  ]
},
登入後複製

使用: 在App.js中直接匯入

import &#39;./assets/theme/App.less&#39;
登入後複製

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(&#39;babel-loader&#39;),
  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: [
      &#39;react-hot-loader/babel&#39;
    ]
  }
},
登入後複製

步驟五:

重寫index.js,App掛載

import { AppContainer } from &#39;react-hot-loader&#39;
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中加入

homepage:'.'
登入後複製

後記:使用react與vue的感悟

react是函數式編程,代碼難度、學習曲度、裝逼指數,社區生態多樣性相比vue更高一點。

vue提供了大量的指令降低了開發難度,詳細完善的文檔,上手更快。

react提供較少的api,相比vue的指令,業務場景的功能需要自己實現,難度更高一點

vue適合中小型項目,單兵、少量人員配合快速開發

react適合大型項目,多人協作

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

js把圖片轉為base64有哪些方法

Vue beforeEnter使用鉤子函數

以上是react配合antd組件做出後台系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!