Cette fois, je vais vous proposer de réagir+antd pour créer un système de gestion backend. Quelles sont les précautions à prendre pour réagir+antd pour construire un système de gestion backend ?
Utiliser l'échafaudage create-react-app
Pour une configuration de base spécifique, veuillez vous référer à
Démo du système de gestion implémenté avec des composants antd, adresse en ligne
Réflexion avant développement
1. Chargement à la demande
Fonction d'importation du webpack des modules chargés dynamiquement, import (paramètre), le paramètre est l'adresse du module .
Remarque : Un objet de promesse sera renvoyé après l'importation.
import('/components/chart').then(mud => { dosomething(mod) });
Cette démo crée un bundle de composants de chargement asynchrone. Pour un code spécifique, veuillez consulter
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; } }
pour une utilisation spécifique
<Bundle load={() => import('路径')}> {Comp => { return Comp ? <Comp /> : <p>加载中...</p> }} </Bundle>
2. Chargement global
Avec redux, dispatch => réducteur update => mapstate update et charger le rendu dans le composant racine
Pour plus de détails, veuillez consulter cette adresse de démonstration src/routers/router .js— —fonction de rendu
3. Configurer l'objet de routage
La disposition du projet est la suivante
Cette démo utilise router4. Le document officiel démontre une route sur une seule ligne (comme le routeur Vue) et il n'y a pas d'objet de configuration unifié. Le système de gestion tourne essentiellement autour du contenu pour le développement commercial. La création d'une configuration commune est utile pour développer et créer des idées d'implémentation de 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' // 主页 } ]
La mise en page la plus externe est Admin, et le contenu est enveloppé par Admin. , vous pouvez alors utiliser this.props.children, saisir le contenu dans content. (Utilisez le composant bundle pour être chargé de manière asynchrone puis inséré dans le composant pour le rendu)
<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. Configurez un réducteur général
Pour que plusieurs personnes coopèrent. en développement, certains composants des scénarios commerciaux nécessitent une amélioration du statut (Les étudiants qui ne comprennent pas la promotion du statut, veuillez surfer sur Internet de manière scientifique)
import otherReducers from './otherReducers' const App = combineReducers({ rootReducers, ...otherReducers // 其他需要增加的reducers })
Vérification de la connexion
Utilisez la fonction withRouter, qui se déclenche lorsque la page est acheminéeconst newWithRouter = withRouter(props => { // .... })
return <Redirect to="/login" />
6. Interception de route
Idem que ci-dessus, selon la configuration du routage et les autorisations, Retour au menu ou bloc correspondantreturn <Redirect to={其他} />
7 Autres configurations
7-1. Style personnalisé// 修改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 } ] },
import './assets/theme/App.less'
// 安装react-hot-loader npm install --save-dev react-hot-loader
{ 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' ] } },
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); }); }
homepage:'.'
React est une programmation fonctionnelle, avec une difficulté de code, une courbe d'apprentissage, un indice de prétention et une diversité écologique communautaire supérieure à Vue.
Vue fournit un grand nombre d'instructions pour réduire la difficulté de développement, et une documentation détaillée et complète permet de démarrer plus rapidement.
React fournit moins d'API. Par rapport aux instructions de Vue, les fonctions des scénarios métier doivent être implémentées par vous-même, ce qui est plus difficile.
Vue convient aux projets de petite et moyenne taille. et des soldats seuls et un petit nombre de personnes peuvent coopérer rapidement Développer
react convient aux projets à grande échelle et à la collaboration à plusieurs personnes
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !
Lecture recommandée :
Comment résoudre le problème de configuration du chemin du fichier d'emballageComment effectuer le changement de police effet de cliquer sur le texte du titreCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!