今回は、antd コンポーネントを使用して管理システムを実装する方法と、antd コンポーネントを使用して管理システムを実装する際の注意事項について説明します。実際のケースを見てみましょう。
create-react-appスキャフォールディングを使用する
具体的な基本構成については、
antdコンポーネントで実装した管理システムのデモ、オンラインアドレス
開発前の振り返り
1を参照してください。 import は動的にロードされるモジュール import (パラメータ) の関数であり、パラメータはモジュールのアドレスです。 注: インポート後に Promise オブジェクトが返されます。
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;
}
}ログイン後にコピー
具体的な使用法
2を参照してください。ルートコンポーネント レンダリングの読み込み用
詳細については、このデモアドレスを参照してください src/routers/router.js - render function
3. ルーティングオブジェクトを設定します
プロジェクトのレイアウトは次のとおりです
デモでは、公式の router4 を使用します。 ドキュメントのデモは単一行のルート (Vue ルーターなど) であり、統一された構成オブジェクトはありません。 管理システムは基本的にビジネス開発のためのコンテンツを中心に展開します。共通の構成の構築は、router.config.js
<Bundle load={() => import('路径')}>
{Comp => {
return Comp ? <Comp /> : <p>加载中...</p>
}}
</Bundle>ログイン後にコピー
実装アイデアの開発と構築に役立ちます。次に、コンテンツは Admin によってラップされます。 .children にコンテンツを入力します。 (バンドルコンポーネントを使用して非同期にロードし、レンダリングのためにコンポーネントに挿入します)
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. 一般的なリデューサーを設定します
ビジネスシナリオの一部のコンポーネントは、状態の改善を必要とします。状態の改善を理解してください。科学的にオンラインにしてください)
<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. ログイン検証
ページがリダイレクトされるときにトリガーされる withRouter 関数を使用します
import otherReducers from './otherReducers'
const App = combineReducers({
rootReducers,
...otherReducers // 其他需要增加的reducers
})ログイン後にコピー
ログインしていない場合は返されます
const newWithRouter = withRouter(props => {
// ....
})ログイン後にコピー
6. ルートインターセプト
上記と同様、ルーティング設定と権限に従って、対応するメニューまたはブロックに戻ります
return <Redirect to="/login" />
ログイン後にコピー
7 その他の設定
7-1. カスタムスタイル
return <Redirect to={其他} />ログイン後にコピー
使用方法: 直接インポート
App.jsの
// 修改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
}
]
},ログイン後にコピー
7-2。ホットアップデートステップ1:
import './assets/theme/App.less'
ログイン後にコピー
ステップ2:
webpack.config.jsのエントリ値にreact-hot-loader/patchを追加します
ステップ3:
webpackDevServer.config.js で hot を true に設定します
ステップ 4: webpack.config.dev.js で、react-hot-loader/babel を babel-loader プラグインに追加します
// 安装react-hot-loader
npm install --save-dev react-hot-loader
ログイン後にコピー
ステップ 5:
index.js を書き換えます, アプリのマウント
{
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. ローカルブラウジング
package.jsonに
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);
});
}ログイン後にコピー
追記：reactとvueの使用に関する洞察
reactは関数型プログラミングであり、コードの難易度、学習曲線、見栄っ張りの指標、コミュニティを伴います。生態学的多様性は v よりも高い。
vue には、開発の難易度を下げるための多数の手順が用意されており、詳細かつ完全なドキュメントにより、より迅速に開始できます。
react は Vue に比べて提供する API が少なく、ビジネスシナリオの機能を自分で実装する必要があるため、少し難易度が高くなります。
Vue は小規模から中規模のプロジェクトに適しています。
react は大規模なプロジェクトに適しています
この記事の事例を読んだ後は、この方法を習得したと思います。 php 中国語 Web サイトの他の関連記事へ!
推奨書籍:
vue を使用して SMS 検証パフォーマンスを最適化する方法
Vue で vue-i18 プラグインを使用して、多言語切り替えを実現します
以上がantd コンポーネントと反応して管理システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
