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:测试 ...
随机推荐
- 记录/objc2/object_setClass做了啥
inline Class objc_object::changeIsa(Class newCls) { // This is almost always true but there are // e ...
- android sdk tools里找不到draw9patch.bat 如何制作.9.png 格式图片
1.什么是.9.png格式 .9.png格式的图片可以在安卓平台指定拉伸区域,防止图片失真,一般用作背景图. 2.前提 最近项目中要用到.9.png格式图片,想着这个简单使用draw9patch.ba ...
- java中文件复制的4种方式
今天一个同事问我文件复制的问题,他一个100M的文件复制的指定目录下竟然成了1G多,吓我一跳,后来看了他的代码发现是自己通过字节流复制的,定义的字节数组很大,导致复制后目标文件非常大,其实就是空行等一 ...
- Vi/Vim常用命令(附快捷切换方法)
vi/vim有两种模式,正常(命令行)模式 和编辑模式,在命令行模式下,任何键盘输入都是命令,在编辑模式下,键盘输入的才是字符. 启动/关闭Vi/Vim 启动:vi 打开 Vi/Vim编辑器vi 文件 ...
- Hive参数调优
调优 Hive提供三种可以改变环境变量的方法,分别是: (1)修改${HIVE_HOME}/conf/hive-site.xml配置文件: 所有的默认配置都在${HIVE_HOME}/conf/hiv ...
- angularjs路由监听,uirouter感知路由变化,解决uirouter路由监听不生效的问题
壹 ❀ 引 angularjs除了惊为天人的双向数据绑定外,路由也是出彩的一笔,通过路由配置,我们能在不发起页面跳转的情况下,对当前页内容进行整体更新,angularjs提供了ngRoute模块用于 ...
- Xmind软件——xmind 8 pro下载激活推荐!!
亲测有效,在csdn上找到一个. 下载激活xmind 8 pro链接
- SpringBoot与数据层
1.JDBC <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...
- 【Luogu P3994】高速公路
Problem Background \(C\) 国拥有一张四通八达的高速公路网树,其中有 \(n\) 个城市,城市之间由一共 \(n-1\) 条高速公路连接.除了首都 \(1\) 号城市,每个城市都 ...
- Java - 包装类 常量池
概述: 在Java中存在一些基本数据类型,这些基本数据类型变量,不能像其他对象一样调用方法,属性.... 一些情况下带来一些问题,包装类就是为了解决这个问题而出现 包装类可以使得这些基础数据类型,拥有 ...