dva+umi+antd项目从搭建到使用(没有剖验证,不知道在说i什么)
先创建一个新项目,具体步骤请参考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>
);
}
} ...
好啦,就是这么简单!
dva+umi+antd项目从搭建到使用(没有剖验证,不知道在说i什么)的更多相关文章
- dva+umi+antd项目从搭建到使用
先创建一个新项目,具体步骤请参考https://www.cnblogs.com/darkbluelove/p/11338309.html 一.添加document.ejs文件(参考文档:https:/ ...
- dva+react+antd+webpack 项目开发配置
如何搭建一个dva项目如何搭建一个dva项目 后期项目会在github上进行书写,同时也会在segmentfault上进行同步-3Q拜读-
- typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...
- React全家桶打造共享单车后台管理系统项目_第1篇_项目环境搭建_首页编写
1.项目介绍 项目github地址:https://github.com/replaceroot/React-manageSystem 项目整体架构: 课程大纲: 第一章:React基础知识 ...
- dva + umi 学习笔记
首先,这里的 dva + umi 不是说学习dva和umi,而是基于 dva + umi 的react前端开发脚手架,这是我的目标. 一开始,我在dva文档的例子里看到了 dva + umi 的例子. ...
- Dva & Umi
Dva & Umi Dva.js & Umi.js React & Redux https://dvajs.com/ React and redux based, lightw ...
- Angular企业级开发(5)-项目框架搭建
1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...
- 架构系列:ASP.NET 项目结构搭建
我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都简单的单项目 (2)为 ...
- 国家电力项目SSH搭建
SSH项目框架搭建总结: 1.建立Web工程 * 导入需要的jar的包 db:连接数据库的驱动包 hibernate:使用hibernate的jar包 jstl:java的标准标签库 junit:测试 ...
随机推荐
- SQL Server重建索引与重组索引会更新统计信息吗?
在SQL Server中重建索引(Rebuild Index)与重组索引(Reorganize Index)会触发统计信息更新吗? 那么我们先来测试.验证一下: 我们以AdventureWorks20 ...
- jenkins实现git自动拉取代码时替换配置文件
jenkins实现从git上自动拉取源代码——>自动编译——>发布到测试服务器——>验证测试,这个大家应该都知道,但是关于源代码里的配置文件,可能就会有点头疼了, 一般测试都会自己的 ...
- Git入门基础教程
目录 一.Git的安装 1.1 图形化界面 1.2 命令行界面 二.本地仓库的创建与提交 2.1 图形化界面 2.1.1 首先在电脑上有一个空白目录 2.1.2 打开SourceTree 2.1.3 ...
- shell 得到当前目录路径
shell 得到当前目录路径 cd "$(dirname $0)" project=$(pwd | cut -d / -f ) echo 'project: '$project c ...
- centos7编译安装Zabbix-4.2.4及设置邮件告警教程(超详细每步都有截图)
Zabbix-4.2.4安装及配置 此安装基于centos7的LNMP环境下,如未安装LNMP还可参考本人其他随笔 第一步:上传下载 1.前往https://www.zabbix.com/downlo ...
- 关于scrapy中如何区分是接着发起请求还是开始保存文件
一.区分 根据yield迭代器生成的对象是request对象还是item对象 二.item 1.配置tem对象 在items.py文件中设置类 class MyscrapyItem(scrapy.It ...
- js截取两个字符串之间的子字符串
// 截取两个字符串之间的子字符串,返回第一个 function subStringOne(text, begin, end) { var regex; if (end == '\\n') regex ...
- iOS 自定义导航栏
参考链接:https://blog.csdn.net/huanglinxiao/article/details/100537988 demo下载地址:https://github.com/huangx ...
- android studio节省C盘空间的配置方法
近期发现C盘空闲空间剩余不多了,经过检查发现在C:\Users\<电脑用户名>\的目录下,有这两个文件夹空间比较大,这两文件夹分别是 .AndroidStudioPreview3.2(不同 ...
- Hadoop、storm和Spark Streaming简单介绍(非原创)
文章大纲 一.Hadoop是什么二.storm是什么三.Spark Streaming是什么四.Spark与storm比较五.参考文章 一.Hadoop是什么 1. 简介 Hadoop是一个由Ap ...