Dieses Mal bringe ich Ihnen React+antd-Komponenten mit, um ein vollständiges Backend zu erstellen (mit Code). Was ist bei der Verwendung von React+antd-Komponenten zur Erstellung eines Backends zu beachten? .
Vorwort: Für diesen Artikel sind einige Grundkenntnisse in React und Redux erforderlich. Für spezifische Lernmaterialien gehen Sie bitte wissenschaftlich online.
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>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={其他} />// 修改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
}
]
},Schritt 1:
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);
});
}Detaillierte Analyse der VUE-Nutzung
Wie man Vue+Webpack verwendet, um asynchrones Laden durchzuführenDas obige ist der detaillierte Inhalt vonDie Komponente „react+antd' erstellt ein vollständiges Backend (mit Code).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was bedeutet Kol?
Der Unterschied zwischen xdata und data
So verwenden Sie den Befehl „find', um Dateien unter Linux zu finden
Gängige Methoden im Mathematikunterricht
Die Funktion des Span-Tags
Wo kann ich das Douyin Little Fire Man-Kostüm bekommen?
Was ist das World Wide Web?
So öffnen Sie eine MDF-Datei
