Dieses Mal werde ich Ihnen React- und Antd-Komponenten zum Erstellen eines Backend-Systems vorstellen. Was sind die Vorsichtsmaßnahmen für React- und Antd-Komponenten zum Erstellen eines Backend-Systems? sehen.
Create-React-App-Gerüst verwendenInformationen zur spezifischen Grundkonfiguration finden Sie unter Demo des Managementsystems implementiert mit Antd-Komponenten, Online-AdresseReflexion 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)
});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;
}
}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 konfigurierenDas 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' // 主页
}
]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>
)}
/>
import otherReducers from './otherReducers'
const App = combineReducers({
rootReducers,
...otherReducers // 其他需要增加的reducers
})const newWithRouter = withRouter(props => {
// ....
})return <Redirect to="/login" />
7-1 Benutzerdefinierter Stil return <Redirect to={其他} />
// 修改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'
React-Hot-Loader hinzufügen /patch< zum Eintragswert von webpack.config.js
Schritt 3:
Hot auf true in webpackDevServer.config.js setzen
Schritt 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-loader
Schritt 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:
Wie können Bilder in js in Base64 konvertiert werden?Vue+beforeEnter verwendet die Hook-Funktion
Das obige ist der detaillierte Inhalt vonReact arbeitet mit antd-Komponenten zusammen, um ein Backend-System zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So beheben Sie einen Fehler im Skript der aktuellen Seite
Python-Tutorial
So lösen Sie das Problem des vs2008-Installationsfehlers
Was ist der Unterschied zwischen GUID- und MBR-Formaten?
Was ist der Grund für einen Fehler bei der DNS-Auflösung?
So verwenden Sie die Längenfunktion in Matlab
So stellen Sie Chinesisch in vscode ein
Welche Programmiersprache ist C-Sprache?
