Verwendung von React with Antd-Komponenten zur Implementierung eines Managementsystems

Dieses Mal zeige ich Ihnen, wie Sie React mit Antd-Komponenten verwenden, um ein Managementsystem zu implementieren Schauen Sie mal rein. 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 => {
  // ....
})

6 zurück. Kehren Sie je nach Routenkonfiguration und Berechtigungen zum entsprechenden Menü oder Block zurück

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&#39;, // React doesn&#39;t support IE8 anyway
            ],
            flexbox: &#39;no-2009&#39;
          })
        ]
      }
    }, {
      loader: require.resolve(&#39;less-loader&#39;) // 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(&#39;less-loader&#39;) // 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.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:

So verwenden Sie Vue, um die Leistung der SMS-Verifizierung zu optimieren

Verwendung des Vue-i18-Plug-Ins in Vue Mehrsprachigkeitsumschaltung

Das obige ist der detaillierte Inhalt vonVerwendung von React with Antd-Komponenten zur Implementierung eines Managementsystems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!