Le composant React+antd crée un backend complet (avec code)

Cette fois, je vais vous présenter les composants React+antd pour créer un backend complet (avec code). Quelles sont les choses à prendre en compte lors de l'utilisation des composants React+antd pour créer un backend. Voici un cas pratique, prenons-le. un regard.

Avant-propos : Cet article nécessite une certaine connaissance de base de React et Redux. Pour du matériel d'apprentissage spécifique, veuillez vous rendre en ligne scientifiquement.

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ée

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

Si vous n'êtes pas connecté, elle renverra

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 correspondant

return <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&#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
    }
  ]
},

Utilisation : Dans l'application Importer

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

directement dans .js 7-2 Mise à jour à chaud

Étape. 1 :

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

Étape 2 :

dans le webpack Ajoutez réagir-hot-loader/patch à la valeur d'entrée de config.js

Étape 3 :

Définissez hot sur true dans webpackDevServer.config.js

Étape 4 : Dans webpack.config.dev.js, ajoutez réagir-hot-loader/babel aux plugins dans babel-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'
    ]
  }
},

Étape 5 :

Réécrire index.js, montage de l'application

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);
  });
}

Navigation locale

Ajouter directement à package.json<.>

Postscript : aperçus sur l'utilisation de React et vue

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 :

Analyse détaillée de l'utilisation de VUE

Comment utiliser vue+webpack pour effectuer un chargement asynchrone

Ce 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!