Umi is an enterprise class pluggable react scaffolding.

Umi is simpler than the scaffolding recommended by React, and more similar to vuE-CLI. This article only introduces the basic usage methods

Development show

Preview: dingdong-admin.nodebook.top/

Dingdong.nodebook.top /

Ding Dong buy vegetables backstage management system source code: github.com/cgq001/ding…

Ding Dong buy vegetables source: github.com/cgq001/ding…

Function Description:

Demo GIF:

Introduce a.

Introduction content from the official website, interested in baidu UMI to view the details of the official website

Create a project:

 yarn create umi
Copy the code

Select the project

? Select the boilerplate type(Use arrow keys) ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, Use together with umi block. ❯ app-create project with a simple boilerplate, support typescript. block - Create a umi block. library - Create a library with umi. plugin - Create a umi plugin.Copy the code

And then, you choose the functionality that you want and antD in this case is the UI library dVA that encapsulates Redux and so on

? What functionality do you want to enable? (Press <space> to Select, <a> to Toggle all, < I > to Invert Selection) ❯ AntD ❯ infection of dVA code splitting infection infection DLLCopy the code

Run the project

 yarn start
Copy the code

directory

├─ dist/ // Default Build ├─ mock/ // Base on Express ├─ config/ ├─ config.js, same as.umirc.js, └─ └─ SRC // / └─ ├─ layouts/index.js // ├─ pages/ // / setup // ├─. .gitignore ├─.umi-production/ // build temporary directory ├─ document.ejs // HTML Template ├─ 404.js // 404 page ├─ page1. Js // umitestWill match all. Test. Js and the e2e. The file at the end of js └ ─ ─ page2. Js / / page 2, arbitrary naming ├ ─ ─ global. The CSS / / global style file of the agreement, automatic introduction, You can also use global.less ├─ global.js // Here you can add Polyfill ├─ app.js // Runtime Config file ├─.umirc.js // umi config, same as config/config.js, ├─ ├─ ├─ ├─ package.jsonCopy the code

use

A routing.

1.1 About the configuration of the.umirc.js file

Umi can use contracted routes like nuxt.js. Of course, this introduction is similar to the configuration routes we often use in VUE, which can be configured here

For details on the configuration, see code comments:

export default {
  treeShaking: true.routes: [    // Configure the route
      { path: '/'.// Redirect to the home page
        redirect: '/index/'
      },
      {
        path: '/index'./ / main page
        component: '.. /layouts/index'.// Public home page
        // Routes: ['./ Routes/login. js'], // Routes: ['./ Routes/login. js'
        routes: [
          // { path: '/index/', component: '.. /pages/index' },
          { path: '/index/'.component: '.. /pages/Home/HomeIndex/HomeIndex' },  / / home page
          { path: '/index/data/index'.component: '.. /pages/Datas/DataIndex/DataIndex' ,srcPath: '12456'},// Data analysis
          { path: '/index/product/shoping/index'.component: '.. /pages/Product/Shoping/ShopIndex/ShopIndex' }, // Commodity management
          { path: '/index/product/shoping/add'.component: '.. /pages/Product/Shoping/AddShop/AddShop' }, // Add goods
          { path: '/index/product/class/index'.component: '.. /pages/Product/Class/ClassIndex/ClassIndex' }, // Category management
          { path: '/index/product/class/add'.component: '.. /pages/Product/Class/AddClass/AddClass' }, // Add categories
          { path: '/index/product/comment/index'.component: '.. /pages/Product/Comment/CommentIndex/CommentIndex' }, // Comment management
          { path: '/index/set/personalcenter/index'.component: '.. /pages/Set/PersonalCenter/PersonalCenter' }, // Personal center
          { path: '/index/set/PersonalSettings/index'.component: '.. /pages/Set/PersonalSettings/PersonalSettings' }, // Personal Settings
          { path: '/index/order/refund/index'.component: '.. /pages/Order/Refund/RefundIndex/RefundIndex'},// List of refunds to be made
          { path: '/index/order/refund/details'.component: '.. /pages/Order/Refund/RefundDetails/RefundDetails'},   // Refund details
          { path: '/index/order/shipped/index'.component: '.. /pages/Order/Shipped/ShippedIndex/ShippedIndex'},// Details awaiting shipment
          { path: '/index/order/shipped/deliver'.component: '.. /pages/Order/Shipped/ShippedDeliver/ShippedDeliver'},// Details awaiting shipment
          { path: '/index/control/carousel/index'.component: '.. /pages/Control/Carousel/CarouselIndex/CarouselIndex'},// Control the layout of the home page round list
          { path: '/index/control/carousel/add'.component: '.. /pages/Control/Carousel/CarouselAdd/CarouselAdd'},// Add a rotation map
          { path: '/index/control/keyword/index'.component: '.. /pages/Control/Keyword/KeywordIndex/KeywordIndex'},// Layout controls search to find keyword keyword list
          { path: '/index/marketing/buy/index'.component: '.. /pages/Marketing/Buy/BuyIndex/BuyIndex'},   // Marketing control home page crazy buying crazy buying list
          { path: '/index/marketing/buy/add'.component: '.. /pages/Marketing/Buy/BuyAdd/BuyAdd'}   // The marketing control home page is crazy to buy all the goods list] {},path: '/login'./ / login page
        component: './Login/Login',}],plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      antd: true.// Open the ANTD UI library
      dva: true./ / open dav
      dynamicImport: false.title: 'Mall Management System'.//title
      dll: false.routes: {
        exclude: [
          /models\//,
          /services\/ /,/model\.(t|j)sx? $/, /service\.(t|j)sx? $/, /components\/ /,],}}]],"proxy": {  // Request the proxy
    "/api": {
      "target": "http://192.168.188.200:5005/"./ / http://192.168.188.200:5005/admin/
      "changeOrigin": true."pathRewrite": { "^/api" : ""}}}}Copy the code

1.2 About Route Redirection on the Page

/ / introduction
import Link from 'umi/link';
import withRouter from 'umi/withRouter';
/ / use
<Link to='/index/data/index'>
    <Icon type="heat-map" />
    <span>The data analysis</span>
</Link>

// The resulting component that contains Link requires a child withRouter of the highest order
Copy the code

1.3 Navigation Guard

Configure Routes: [‘./ Routes/login.js ‘] in the route declared in the.umirc.js file.

Route guard is then performed in routes/ login. js

/ / such as
        path: '/index'./ / main page
        component: '.. /layouts/index'.Routes: ['./routes/Login.js'].// This is relative to the root directory (non-pages)
Copy the code

Login.js

export default props => {
    if(Math.random > 0.5) {// Greater than 0.5 to login otherwise go to the path page to complete the navigation guard
        return <Redirect to= '/login'></Redirect>
    }
    return (
        <div style={{width: '100% ',height: '100'}} % >
            {props.children}
        </div>)}Copy the code

2. Dva

2.1 Store global state in the models/ userredux.js file

// Obtain the local storage token
let token = localStorage.getItem('token') || sessionStorage.getItem('token')

let global ={
    namespace: 'UserRedux'.// The namespace of the model to distinguish multiple models
    state : {
        https: 'http://192.168.188.200:5005/'.// Common interface
        httpsUpload: 'http://192.168.188.200:5005/index/upload'.// Image upload interface
        token: token || null.//token 
        isLogin: false  ,  // Whether you are logging in
        userList:{
            name: 'Joe'}},effects: {// Asynchronous operation
        
    },
    reducers: {  // Update status (sync)
        isLogin(state,action){
            let stateSrc = state
                stateSrc.isLogin = true
            return stateSrc
        },
        removeLogin(state,action){
            let stateSrc = state
                stateSrc.isLogin = false
            return stateSrc
        },
        setToken(state,action){   / / set the token
            let stateSrc = state
            stateSrc.token = action.token
            return stateSrc
        },
        setUserList(state,action){   // Set user information
            let stateSrc = state
            stateSrc.userList = action.userList
            return stateSrc
        }
    }
}

export default  global;
Copy the code

2.2 Using global status

import { connect } from 'dva'  / / into the dva

export default connect(
      state= > ({
          loading: state.loading , // DVA can obtain loading state
          UserRedux: state.UserRedux  // Gets the model state of the specified namespace{}),setUserList: userList= > ({
            type: 'UserRedux/setUserList'.// The action type must be prefixed with the namespace and reducer name
            userList / / get the userList
        })
      }

)(withRouter(Headers))  
this.props.UserRedux.token  // Get the contents of UserRedux
//Headers is a basic component and withRouter is a route warning component. WithRouter (Headers) requires a Link redirect page
Copy the code