先创建一个新项目,具体步骤请参考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什么)的更多相关文章

  1. dva+umi+antd项目从搭建到使用

    先创建一个新项目,具体步骤请参考https://www.cnblogs.com/darkbluelove/p/11338309.html 一.添加document.ejs文件(参考文档:https:/ ...

  2. dva+react+antd+webpack 项目开发配置

    如何搭建一个dva项目如何搭建一个dva项目 后期项目会在github上进行书写,同时也会在segmentfault上进行同步-3Q拜读-

  3. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  4. React全家桶打造共享单车后台管理系统项目_第1篇_项目环境搭建_首页编写

    1.项目介绍 项目github地址:https://github.com/replaceroot/React-manageSystem  项目整体架构: 课程大纲:     第一章:React基础知识 ...

  5. dva + umi 学习笔记

    首先,这里的 dva + umi 不是说学习dva和umi,而是基于 dva + umi 的react前端开发脚手架,这是我的目标. 一开始,我在dva文档的例子里看到了 dva + umi 的例子. ...

  6. Dva & Umi

    Dva & Umi Dva.js & Umi.js React & Redux https://dvajs.com/ React and redux based, lightw ...

  7. Angular企业级开发(5)-项目框架搭建

    1.AngularJS Seed项目目录结构 AngularJS官方网站提供了一个angular-phonecat项目,另外一个就是Angular-Seed项目.所以大多数团队会基于Angular-S ...

  8. 架构系列:ASP.NET 项目结构搭建

    我们头开始,从简单的单项目解决方案,逐步添加业务逻辑的约束,从应用逻辑和领域逻辑两方面考虑,从简单的单个项目逐步搭建一个多项目的解决方案.主要内容:(1)搭建应用逻辑和领域逻辑都简单的单项目 (2)为 ...

  9. 国家电力项目SSH搭建

    SSH项目框架搭建总结: 1.建立Web工程 * 导入需要的jar的包 db:连接数据库的驱动包 hibernate:使用hibernate的jar包 jstl:java的标准标签库 junit:测试 ...

随机推荐

  1. 检测值是否存在(??)(Freemarker的null值处理)

    使用形式: unsafe_expr?? 或 (unsafe_expr)?? 这个操作符告诉我们一个值是否存在.基于这种情况, 结果是 true 或 false. 访问非顶层变量的使用规则和默认值操作符 ...

  2. diango url的命名和反向解析

    url的命名和反向解析 静态路由 url(r'^login/', views.login,name='login'), 反向解析ht 模板 {% url 'login' %} --> '/app ...

  3. [Linux] 多进程网络编程监听一个端口

    SO_REUSEPORT支持多个进程或者线程绑定到同一端口 每个进程可以自己创建socket.bind.listen.accept相同的地址和端口,各自是独立平等的.让多进程监听同一个端口,各个进程中 ...

  4. Lua 5.1 学习笔记

    1 简介 2 语法 2.1 语法约定 2.1.1 保留关键字 2.1.2 操作符 2.1.3 字符串定义 2.2 值与类型 2.2.1 强制转换 2.3 变量 2.3.1 索引 2.3.2 环境表 2 ...

  5. InfluxDB(一)初探时序数据库

    初探时序数据库-InfluxDB 最近公司有个需求需要借助InfluxDB实现(或者更准确的说,使用该数据库可以更容易的实现),因此稍微看了下这个数据库,把比较重要的一些东西先简单记录一下,日后如果踩 ...

  6. 数组累计-reduce

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. reduce() 可以作为一个高阶函数,用于函数的 compose. array.reduce(f ...

  7. Linux系统:centos7下搭建ElasticSearch中间件,常用接口演示

    本文源码:GitHub·点这里 || GitEE·点这里 一.中间件简介 1.基础概念 ElasticSearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于R ...

  8. .net core使用HttpClient发送代理请求_程序内抓包_Fiddler抓包

    前言:  通过Fiddler抓取浏览器请求数据,相信大家已经都会用了,我们知道Fiddler是通过在本机计算器添加一个默认的代理服务器来实现的抓包数据的,端口号为:8888. 其实当我们打开Fiddl ...

  9. Python爬虫实战教程:爬取网易新闻

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: Amauri PS:如有需要Python学习资料的小伙伴可以加点击 ...

  10. js闭包理解案例-解决for循环为元素注册事件的问题

      转发自http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html       一.变量的作用域 要理解闭包,首 ...