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>
);
}
} ...
好啦,就是这么简单!
最新文章
- async/await Task Timeout
- 让你的网站秒开 为IIS启用“内容过期”
- myeclipse2014集成SVN
- PE制作实录 —— 定义我的 PE 工具箱
- JAVA二维数组小记
- MD5加密,解密
- Linux下Tomcat8.0.44安装使用Apr
- 【BZOJ4403】序列统计(组合数学,卢卡斯定理)
- UVA850【简单模拟】
- XML解析之SAX解析过程代码详解
- Node.js server-side javascript cpu占用高
- ElasticSearch原理
- laravel Blade 模板引擎
- 字节码 反编译 APKTool 重新打jar包 MD
- SQLite数据库管理工具(SQLiteStudio)v3.1.1
- idea总是编译启动报错
- svn回退版本/取消修改
- nest(inner) class
- Html之网页分屏浏览
- Kafka管理工具介绍
热门文章
- OpenCV 学习笔记(5) 使用opencv打开笔记本摄像头
- JVM笔记搬迁
- 华三NAT总结
- git crate patch and check&;apply patch(八)
- cf1187解题报告
- 关于windows使用git警告LF will be replaced by CRLF
- GoCN每日新闻(2019-10-29)
- 运行java程序的时候出现Exception in thread ";main"; java.lang.UnsupportedClassVersionError:
- python字符串转整形异常
- java集合代码示例