Heim > Artikel > Web-Frontend > React+antd erstellt ein Hintergrundverwaltungssystem
Dieses Mal bringe ich Ihnen React+antd zum Aufbau eines Backend-Managementsystems. Was sind die Vorsichtsmaßnahmen für React+antd zum Aufbau eines Backend-Managementsystems?
Create-React-App-Gerüst verwenden
Informationen zur spezifischen Grundkonfiguration finden Sie unter
Demo des Managementsystems implementiert mit Antd-Komponenten, Online-Adresse
Reflexion vor der Entwicklung
1. Laden bei Bedarf
Webpack-Importfunktion für dynamisch geladene Module, Import (Parameter), der Parameter ist die Moduladresse .
Hinweis: Nach dem Import wird ein Promise-Objekt zurückgegeben.
import('/components/chart').then(mud => { dosomething(mod) });
Diese Demo erstellt ein asynchrones Ladekomponenten-Bundle. Informationen zur spezifischen Verwendung finden Sie unter
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; } }
2. Globales Laden
Mit Redux Dispatch => Reducer-Update => Mapstate-Update, Rendering in der Root-Komponente laden
Einzelheiten finden Sie in dieser Demo-Adresse src/routers/router.js – Renderfunktion
3. Routing-Objekte konfigurieren
Das Projektlayout ist wie folgt
Diese Demo verwendet router4 und das offizielle Dokument Es wird gezeigt, dass eine einzeilige Route (z. B. ein Vue-Router) kein einheitliches Konfigurationsobjekt hat. Das Verwaltungssystem dreht sich im Wesentlichen um Inhalte für die Geschäftsentwicklung, die für die Entwicklung und den Aufbau von router.config.js
<Bundle load={() => import('路径')}> {Comp => { return Comp ? <Comp /> : <p>加载中...</p> }} </Bundle>Implementierungsideen hilfreich sind. Das äußerste Layout ist Admin, und der Inhalt wird von Admin umhüllt Sie können dies props.children verwenden, um den Inhalt in den Inhalt einzugeben. (Verwenden Sie die Bundle-Komponente, um sie asynchron zu laden und dann zum Rendern in die Komponente einzufügen.)
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' // 主页 } ]
4. Konfigurieren Sie einen allgemeinen Reduzierer
Für die Mehrpersonenentwicklung Komponenten In einigen Geschäftsszenarien müssen Verbesserungen vorgenommen werden (Studenten, die die Statusverbesserung nicht verstehen, surfen bitte wissenschaftlich im Internet)
<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> )} />
5. Verwenden Sie den withRouter Funktion, die ausgelöst wird, wenn die Seite umgeleitet wird
import otherReducers from './otherReducers' const App = combineReducers({ rootReducers, ...otherReducers // 其他需要增加的reducers })
Wenn Sie nicht angemeldet sind, geben Sie const newWithRouter = withRouter(props => {
// ....
})
return <Redirect to="/login" />
7 Andere Konfigurationen
7-1 Benutzerdefinierter Stil
return <Redirect to={其他} />Verwendung: Importieren Sie
// 修改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 } ] },direkt in App.js 7-2.
Schritt 1:
import './assets/theme/App.less'Schritt 2: React-Hot-Loader hinzufügen /patch< zum Eintragswert von webpack.config.jsSchritt 3: Hot auf true in webpackDevServer.config.js setzenSchritt 4: Reagieren auf hinzufügen Plugins in babel-loader in webpack.config.dev.js -hot-loader/babel
// 安装react-hot-loader npm install --save-dev react-hot-loaderSchritt 5: index.js neu schreiben, App-Mount
{ 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' ] } },7 -3. Lokales Browsen
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); }); }direkt zu package.json hinzufügen Postscript: Einblicke in die Verwendung von React und Vue React ist funktionale Programmierung, Codeschwierigkeit, Lernkurve, Anmaßung Index, gemeinschaftliche ökologische Vielfalt ist etwas höher als Vue. Vue bietet eine große Anzahl von Anweisungen, um die Schwierigkeit der Entwicklung zu verringern, und eine detaillierte und vollständige Dokumentation erleichtert den Einstieg. React bietet weniger APIs, sodass die Funktionen von Geschäftsszenarien selbst implementiert werden müssen. Vue ist für kleine und mittlere Projekte geeignet. Einzelne Soldaten und eine kleine Anzahl von Personen können schnell zusammenarbeiten. React eignet sich für Großprojekte und die Zusammenarbeit mit mehreren Personen.Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall hier gelesen haben Weitere spannende Inhalte finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:
So lösen Sie das Problem der Konfiguration des Verpackungsdateipfads
So nehmen Sie den Wechsel der Schriftart vor Wirkung des Klickens auf den TiteltextDas obige ist der detaillierte Inhalt vonReact+antd erstellt ein Hintergrundverwaltungssystem. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!