dva+umi+antd項目從搭建到使用

先創建一個新項目，具體步驟請參考https://www.cnblogs.com/darkbluelove/p/11338309.html

一.添加document.ejs文件（參考文檔：https://umijs.org/zh/guide/app-structure.html#src-pages-document-ejs）
在pages文件夾下創建document.ejs文件，有這個文件時，會覆蓋默認的 HTML 模板。
模板里需至少包含根節點的 HTML 信息  <div id="root"></div>

二.刪除umirc.js文件（參考文檔：https://umijs.org/zh/config/）
config/config.js 和 .umirc.js只能存在一個.所以我們刪除.umirc.js文件，使用自己配置的config.js
在根目錄創建config/config.js
config.js文件的具體配置可以查閱官方文檔
config.js里面設置路由：
默認情況下，pages文件目錄就是路由。配置的話需要在config.js里面，如下：(注意:component 是相對於 src/pages 目錄的)

export default {
  outputPath:'./content',
  treeShaking: true,

  ... 

  history: 'hash', // 默認是 browser
  routes: [ // 自定義路由
    {
      title:'',
      path: '/',
      component:'./layouts/root',
      routes: [
        {
          title:'login',
          path: '/',
          component:'./login/login', //component 是相對於 src/pages 目錄的
        },
        {
          path: '/manage', component: './layouts/manage',
          routes: [
            { path: '/manage', component: './manage/query',title:'首頁' }
          ],
        }
      ]
    }
  ]
}

 

三.添加模板文件夾layouts
刪除根目錄下的layouts文件夾，在pages文件夾下新增layouts文件夾，並且增加root.js和manage.js
root.js最外層的路由。manage.js是登陸有有導航菜單的路由

 

圖一是默認的目錄，圖二是自定義后的目錄：
圖一​        圖二 ​

 

使用的話就更簡單了：
有如下目錄pages/login.js，models/login.js
model/login.js代碼如下：

import { login } from '../services/query';
import router from 'umi/router';

export default {
  namespace: 'login', /// namespace 表示在全局 state 上的 key
  state: {
    userinfo:null
  },
  reducers: { //reducers 等同於 redux 里的 reducer，接收 action，同步更新 state
    suerinfoRenducers(state,{ payload }){
      return {
        ...state,
        userinfo:payload
      }
    }
  },
  effects:{
    * login({ payload }, { call, put, select }) {
      const response = yield call(login, payload?payload:'');    
      yield put({ 
        type: 'suerinfoRenducers',
        payload:response
      })
    }
  }
};

 

pages/login.js代碼如下：

import React from 'react';
import style from './login.css';
import { connect } from 'dva/index';

class Login extends React.Component {
  login() {
    // 調用login命名空間下的login方法
    this.props.dispatch({
      type: 'login/login',
      payload: {},
    });
  }
  render() {
    return (
      <div className={style.login}>
        ...
        <button onClick={() => this.login()}>登陸</button>
      </div>
    );
  }
}


const mapStateUsers = (state) => {
  return {
    login: state.login, //這里的login表示后面用this.props.login獲取state（根節點）中login命名空間（model的login.js中的state所有數據）的數據
  };
};
export default connect(mapStateUsers)(Login);

 

此時訪問login頁面，點擊登陸按鈕，就會出發login方法啦！

 

umi中使用loading:
@connect(({loading}) => ({ loading })) 
添加了@connect(({loading}) => ({ loading })) 修飾器后，就打印出this.props就可以看到有loading了
​

effects下面就是對應的請求，（可以打印this.props.loading.effects['login/login']的值看下結果）
login/login發起請求的前this.props.loading.effects['login/login']的值為true,
login/login請求完成后this.props.loading.effects['login/login']的值就變為false

具體使用如下：

...
import { Pagination,Spin,Alert } from 'antd';

@connect(({loading}) => ({
  loading
}))
class Login extends React.Component {
  login() {
    // 調用login命名空間下的login方法
    this.props.dispatch({
      type: 'login/login',
      payload: {},
    });
  }
  render() {
    return (
      <div className={style.login}>
        <Spin spinning={this.props.loading.effects['login/login']}>
          <Alert
            message="Alert message title"
            description="Further details about the context of this alert."
            type="info"
          />
        </Spin>
        ...        
        <button onClick={() => this.login()}>登陸</button>
      </div>
    );
  }
}

...

好啦，就是這么簡單！