點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識(shí)百科 - 正文

如何使用react配合antd組件實(shí)現(xiàn)管理系統(tǒng)

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 19:41:55

如何使用react配合antd組件實(shí)現(xiàn)管理系統(tǒng)

如何使用react配合antd組件實(shí)現(xiàn)管理系統(tǒng):這次給大家?guī)砣绾问褂胷eact配合antd組件實(shí)現(xiàn)管理系統(tǒng)，使用react配合antd組件實(shí)現(xiàn)管理系統(tǒng)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。使用create-react-app腳手架具體基礎(chǔ)配置請(qǐng)參考配合antd組件實(shí)現(xiàn)的管理系統(tǒng)demo,線上地址開發(fā)前反思1.

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀如何使用react配合antd組件實(shí)現(xiàn)管理系統(tǒng):這次給大家?guī)砣绾问褂胷eact配合antd組件實(shí)現(xiàn)管理系統(tǒng)，使用react配合antd組件實(shí)現(xiàn)管理系統(tǒng)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。使用create-react-app腳手架具體基礎(chǔ)配置請(qǐng)參考配合antd組件實(shí)現(xiàn)的管理系統(tǒng)demo,線上地址開發(fā)前反思1.

這次給大家?guī)砣绾问褂胷eact配合antd組件實(shí)現(xiàn)管理系統(tǒng)，使用react配合antd組件實(shí)現(xiàn)管理系統(tǒng)的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。

使用create-react-app腳手架

具體基礎(chǔ)配置請(qǐng)參考

配合antd組件實(shí)現(xiàn)的管理系統(tǒng)demo,線上地址

開發(fā)前反思

1. 按需加載

webpack的 import 動(dòng)態(tài)加載的模塊的函數(shù)，import(參數(shù))，參數(shù)為模塊地址。

注意： import 后會(huì)返回一個(gè)promise對(duì)象。

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

本demo構(gòu)建了異步加載組件Bundle,具體代碼請(qǐng)見

class Bundle extends Component {
 constructor(props) {
 super(props);
 this.state = {
 mod: null
 };
 }
 unmount = false
 componentDidMount = () => {
 // 加載組件時(shí)，打開全局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對(duì)象; mod.default導(dǎo)出默認(rèn)
 props.load().then((mod) => {
 if (this.unmount) {
 // 離開組件時(shí)，不異步執(zhí)行setState
 this.props.dispatch(loading(false))
 return false
 }
 this.setState({
 mod: mod.default ? mod.default : mod
 }, _ => {
 // 組件加載完畢，關(guān)閉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更新,在根組件進(jìn)行l(wèi)oading的渲染

詳細(xì)請(qǐng)見本demo地址 src/routers/router.js——render函數(shù)

3. 配置路由對(duì)象

項(xiàng)目布局如下

本demo使用的是router4,官方文檔演示為單行Route（如vue種的router），未有統(tǒng)一配置對(duì)象。管理系統(tǒng)基本圍繞著content進(jìn)行業(yè)務(wù)開發(fā)，構(gòu)建通用配置有助于開發(fā) 構(gòu)建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: '多級(jí)菜單',
 menuIco: 'setting',
 children: [
 {
 menuName: '多級(jí)菜單2',
 children: [
 {
 menuName: '菜單',
 component: 'user/list.js', // 主頁
 path: '/admin/user/list3' // 主頁
 }
 ]
 }
 ]
 },
 {
 menuName: '關(guān)于我',
 menuIco: 'smile-o',
 component: 'about/about.js', // 主頁
 path: '/admin/about' // 主頁
 }
]

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

<Admin>
 <Content { ...this.props } breadcrumb={this.state.breadcrumb}>
 {this.props.children}
 </Content>
</Admin>
// Content組件內(nèi)部
render() {
 return (
 <p> 
 {this.props.children}
 </p>
 )
}
// 本demo實(shí)現(xiàn),詳見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

多人配合開發(fā)，一些業(yè)務(wù)場(chǎng)景的組件需要狀提升(不理解狀態(tài)提升的同學(xué)，請(qǐng)科學(xué)上網(wǎng))

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

5. 登陸驗(yàn)證

利用 withRouter 函數(shù)，頁面進(jìn)行路由跳轉(zhuǎn)時(shí)觸發(fā)該函數(shù)

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

若未登錄，則返回

return <Redirect to="/login" />

6. 路由攔截

同上，根據(jù)路由配置與權(quán)限，返回相應(yīng)的菜單或屏蔽

return <Redirect to={其他} />

7 其他配置

7-1. 自定義樣式

// 修改webpack.config.dev.js 和 webpack.config-prod.js 配置文件
{
 test: /\.(css|less)$/,
 // 匹配src的都自動(dòng)加載css-module
 include: [/src/],
 exclude: [/theme/],
 use: [
 require.resolve('style-loader'), {
 loader: require.resolve('css-loader'),
 options: {
 importLoaders: 1,
 modules: true, // 新增對(duì)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的都不能自動(dòng)加載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中直接導(dǎo)入

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設(shè)置為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中加入