使用umi+dva做一个demo
最初只是使用react 进行开发项目，发现项目过大状态管理起来就相当困难，虽然有redux, mobx,但是使用起来还是相当繁琐，而目前umi有现成的轮子使用简单，当然愿意尝试了，趁现在假期有时间简单学习记录一下
文章目录
-
-
- 一、安装umi
- 二、首页
- 三、路由配置
- 四、鉴权
- 五、mock
- 六、models
- 六、login
- 七、test
-
一、安装umi
还是原来的套路，要使用先是安装一伙
$ npx @umijs/create-umi-app // if use npm
好了命令执行完成后目录是这样的
好接下来该开始着手开发了，但还有一件要注意的事情—
Umi官网目前已经是3.x版本了，注意这个版本与2.x有相当大差距，如：plugins 的配置
export default {
- plugins: [
- ['umi-plugin-react', {
- dva: {
},
- antd: {
},
- ...
- }]
- ],
+ dva: {
},
+ antd: {
},
+ ...
}
其他还有很多，如果刚从2.x升级3.x就要多留意了，否则会浪费不必要的时间,具体参照upgrade-to-umi-3
二、首页
使用antd layout 创建一个首页，这个demo比较简单，所有就直接官网照搬了,部分片段如下
import {
Layout, Menu, Badge, Dropdown } from 'antd';
const {
Header, Footer, Content } = Layout;
const logo = require('../../public/course/logo.jpeg');
export default function Page(props) {
return (
<Layout>
<Header className={
styles.header}>
<img className={
styles.logo} src={
logo} alt="" />
<Menu
theme="dark"
mode="horizontal"
selectedKeys={
selectedKeys}
style={
{
lineHeight: '64px', float: 'left' }}
>
<Menu.Item key="/">
<Link to="/">商品</Link>
</Menu.Item>
<Menu.Item key="/users">
<Link to="/users">用户</Link>
</Menu.Item>
<Menu.Item key="/about">
<Link to="/about">关于</Link>
</Menu.Item>
</Menu>
</Header>
<Content className={
styles.content}>
<div className={
styles.box}>{
props.children}</div>
</Content>
<Footer className={
styles.footer}>learning</Footer>
</Layout>
);
}
三、路由配置
一个项目中路由应该是不可缺少的一部分，umi 3.x配置是直接在 .umirc.ts文件中
import {
defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
antd: {
compact: true,
},
dva: {
immer: true,
hmr: false,
},
routes: [
{
path: '/',
component: '@/layouts/index',
}
],
fastRefresh: {
},
});
这里开启了antd 和dva 的插件使用，因为后期可能会使用到，好了这是可以yarn start 运行看看有一个简单的主页面了，但是点击一定会报错（路由没有配置完整）
四、鉴权
配置一个页面检测是否登录，当然首要任务是完善上面首页 中对应的菜单路由及页面创建了
创建目录和对应的文件，再完善路由
import {
defineConfig } from 'umi';
export default defineConfig({
nodeModulesTransform: {
type: 'none',
},
antd: {
compact: true,
},
dva: {
immer: true,
hmr: false,
},
routes: [
{
path: '/login', component: '@/pages/login' },
{
path: '/',
component: '@/layouts/index',
routes: [
{
path: '/', component: '@/pages/goods' },
{
path: '/about',
component: '@/pages/about'
},
{
path: '/users',
component: '@/pages/users/index',
routes: [
{
path: '/users/:oid/:id',
component: '@/pages/users/$oid/$id',
},
{
component: '@/pages/NotFound' },
],
},
{
component: '@/pages/NotFound' },
],
},
{
component: '@/pages/NotFound' },
],
fastRefresh: {
},
});
好了路由大概是这个样子了，基本完成，
现在我们假如对about 页面做一个鉴权，其实也简单，创建一个wrappers目录，再在下面创建一个auth.tsx， 内容如：
import {
Redirect } from 'umi'
export default (props:any) => {
// 模拟鉴权
if (Math.random() > 0.5){
return <div>{
props.children }</div>;
} else {
return <Redirect to="/login" />;
}
}
再在about 路由增加wrappers, 修改如：
{
path: '/about',
component: '@/pages/about',
wrappers: ['@/wrappers/auth'],
},
好了点击的时候就有50%机率到登录页面了
五、mock
目前是一个demo没有后台，所有使用mock模仿异步请求，在mock目录下创建一个login.js，简单的写一个login的接口
export default {
'post /api/login': (req, res) => {
const {
username,
password
} = req.body;
if (username == 'admin' && password == '123') {
var resObj = res.json({
code: 0,
data: {
token: 'admin123',
role: 'admin',
balance: 1000,
username: 'admin',
},
});
return resObj;
}
if (username == 'dex' && password == '123') {
return res.json({
code: 0,
data: {
token: 'dex123',
role: 'user',
balance: 100,
username: 'dex',
},
});
}
return res.status(401).json({
code: -1,
msg: '密码错误',
});
},
};
六、models
目前还需要一个与mock接口进行交付的server，于是在models下创建一个user.js来管理用户登录相关的操作
import reqService from 'axios';
import {
history } from 'umi';
const userinfo =
JSON.parse(localStorage.getItem('userinfo')) |
{
token: '',
role: '',
username: '',
blance: '',
};
// 登录请求
function loginReq(payload) {
return reqService.post('/api/login', payload).then((res) => {
return {
code: res.data.code,
userinfo: res.data.data,
};
});
}
export default {
namespace: 'user',
state: userinfo,
effects: {
*login({
payload }, {
call, put }) {
try {
const {
code, userinfo } = yield call(loginReq, payload);
localStorage.setItem('userinfo', JSON.stringify(userinfo));
// 触发reducers更新状态
// 犹如import { call, put, takeEvery } from 'redux-saga/effects'中的takeEvery
yield put({
type: 'init',
payload: userinfo,
});
history.push('/');
} catch (error) {
console.log(error);
}
},
},
reducers: {
init(state, action) {
// 将状态更新到state
return action.payload;
},
},
};
这里使用umi 就比较方便，不需要直接去进行redux-saga的操作，直接使用effects和reduces函数进行数据读取状态更新即可，而这里使用到了es6的generate 生成器函数，直接将异步当成同步来进行操作更加方便了
六、login
有了mock 和models 现在可以完善一下登录了，pages下创建login目录再在其下创建index.js，内容大概是这样子
import React, {
Component } from 'react';
import styles from './index.css';
import ProForm, {
ProFormText } from '@ant-design/pro-form';
import {
UnlockOutlined, UserOutlined } from '@ant-design/icons';
import {
connect } from 'dva';
const logo2 = require('../../../public/course/logo2.jpeg');
@connect()
class index extends Component {
onSubmit = (values) => {
if (values) {
this.props.dispatch({
type: 'user/login', payload: values });
}
};
render() {
return (
<div className={
styles.loginForm}>
<ProForm
onFinish={
(values) => this.onSubmit(values)}
submitter={
{
searchConfig: {
submitText: '登录',
},
submitButtonProps: {
size: 'large',
style: {
width: '100%',
},
},
// 完全自定义整个区域
render: (_, dom) => dom.pop(),
}}
>
<h1
style={
{
textAlign: 'center',
}}
>
<img className={
styles.logo} alt="logo" src={
logo2} />
</h1>
<div
style={
{
marginTop: 12,
textAlign: 'center',
marginBottom: 40,
}}
>
WE USE ANTD DESIGN TO CREATE A LOGIN PAGE.
</div>
<ProFormText
fieldProps={
{
size: 'large',
prefix: <UserOutlined />,
}}
name="username"
placeholder="admin"
rules={
[
{
required: true,
message: '请输入用户名!',
},
]}
/>
<ProFormText.Password
fieldProps={
{
size: 'large',
prefix: <UnlockOutlined />,
}}
name="password"
placeholder="123"
rules={
[
{
required: true,
message: '请输入密码!',
},
]}
/>
</ProForm>
</div>
);
}
}
export default index;
其中使用到了dva进行state 引入，使用dispatch 触发user/login 进行登录模拟操作，缓存用户信息，注意connect中有两个参数，第一个是
state，而state可根据models下面的文件中的namespace 调用不同的操作。第二个参数是一个对象 可以根据namespace映射对应的actions
如
@connect(
(state) => ({
loading: state.loading,
tags: state.goods.tags,
courses: state.goods.courses, // 获取goods 下的courses属性的值
userinfo: state.user, // 获取user 下对应的userinfo的值
}),
{
getList: () => ({
type: 'goods/getList',
}),
addCart: (payload) => ({
type: 'cart/addCart', // 映射cart文件中的addCart
payload, // 同时将payload 作为方法参数传入
}),
},
)
七、test
最后还有个商品列表页面，基本上套路和上面差不多，就不记了，最后测试哈
 |
 |
 |
 |
好了这个demo学习完毕，源码也提交到github保存下umi-dva-antd-react-demo