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é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 :
Analyse détaillée de l'utilisation de VUEComment utiliser vue+webpack pour effectuer un chargement asynchroneCe 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!
Vérifier l'occupation du port sous Linux
Comment mettre à niveau Douyin
Outil d'expression régulière
Comment gérer le décalage et la réponse lente d'un ordinateur portable
Tutoriel de configuration des variables d'environnement Java
Comment conserver le nombre de décimales en C++
Logiciel de création de site internet
Comment changer la couleur du pinceau PS
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
