Home >Web Front-end >JS Tutorial >react+antd makes a background management system
This time I will introduce to you how to use react antd as a backend management system. What are the precautions for using react antd as a backend management system? The following is a practical case, let’s take a look.
Using create-react-app scaffolding
For specific basic configuration, please refer to
Management system demo implemented with antd components, online address
Reflection before development
1. Load on demand
webpack's import function of dynamically loaded modules, import (parameter), the parameter is the module address.
Note: A promise object will be returned after import.
import('/components/chart').then(mud => { dosomething(mod) });
This demo builds an asynchronous loading component Bundle. For specific codes, please see
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; } }
Specific usage
<Bundle load={() => import('路径')}> {Comp => { return Comp ? <Comp /> : <p>加载中...</p> }} </Bundle>
2. Global loading
With redux, dispatch => reducer update => mapstate update, load rendering in the root component
For details, please see this demo address src/routers/router.js——render function
3. Configure routing objects
The project layout is as follows
##This demo uses router4, and the official document demonstrates a single line Route (such as Vue router) does not have a unified configuration object. The management system basically revolves around content for business development. Building a common configuration is helpful for developing and building router.config.jsconst 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' // 主页 } ]to implement the idea. The outermost layout is Admin, and the content is wrapped by Admin, then you can use this. props.children, enter the content into content. (Use the bundle component to be loaded asynchronously and then inserted into the component for rendering)
<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. Configure a general reducer
For multiple people to cooperate in development, the components of some business scenarios need to be improved. (Students who do not understand status improvement, please surf the Internet scientifically)import otherReducers from './otherReducers' const App = combineReducers({ rootReducers, ...otherReducers // 其他需要增加的reducers })
5. Login verification
Use the withRouter function, which is triggered when the page performs routing jumpconst newWithRouter = withRouter(props => { // .... })If you are not logged in, return to
return <Redirect to="/login" />
6. Routing interception
Same as above, return to the corresponding menu or block based on routing configuration and permissionsreturn <Redirect to={其他} />
7 Other configurations
7-1. Custom style// 修改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 } ] },Usage: Directly import
import './assets/theme/App.less'in App.js 7-2. Hot updateStep 1:
// 安装react-hot-loader npm install --save-dev react-hot-loaderStep 2:Add react-hot-loader/patch# to the entry value of webpack.config.js
##Step 3:
Set hot to true in webpackDevServer.config.js
Step 4: Add react to plugins in babel-loader in webpack.config.dev.js -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' ] } },
Step 5:
Rewrite index.js, App mount
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. Local browsing
Add
homepage:'.'
directly to package.json Postscript: Insights on using react and vue
react is functional programming, code difficulty, learning curve, pretentiousness index, community ecological diversity are related A bit higher than vue.
vue provides a large number of instructions to reduce the difficulty of development, and detailed and complete documentation makes it faster to get started.
react provides fewer APIs. Compared with vue's instructions, the functions of business scenarios need to be implemented by yourself, which is more difficult.
vue is suitable for small and medium-sized projects, and can be quickly coordinated by a single soldier or a small number of people. Development
react is suitable for large-scale projects, multi-person collaboration
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!
Recommended reading:
How to solve the error in configuring the packaging file pathHow to make the font switching effect of clicking the title textThe above is the detailed content of react+antd makes a background management system. For more information, please follow other related articles on the PHP Chinese website!