先创建一个新项目，具体步骤请参考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.jsconfig.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.jsroot.js最外层的路由。manage.js是登陆有有导航菜单的路由
图一是默认的目录，图二是自定义后的目录：图一 图二
使用的话就更简单了：有如下目录pages/login.js，models/login.jsmodel/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> ); } } ...好啦，就是这么简单！
转载于:https://www.cnblogs.com/darkbluelove/p/11338318.html
相关资源：垃圾分类数据集及代码