1.安装dva-cli

  • npm install dva-cli -g

2.创建应用

  dva new dvadashboard  

  [dvadashboard为项目名]

     

3.安装mockjs

  •   npm install mockjs --save

4.配置mockjs

  •   打开.roadhogrc.mock.js 设置如下

  

const fs=require('fs');
const path=require('path');
const mockPath=path.join(__dirname+'/mock'); const mock={};
fs.readdirSync(mockPath).forEach(file=>{ Object.assign(mock,require('./mock/'+file));
}); module.exports=mock;

5.模拟用户管理API

  mock文件夹下新建user.js

  

  API设置:

  这里只模拟俩个api  1.获取所有用户数据  2.添加用户

const Mock=require('mockjs');

let db=Mock.mock({
'data|3-6':[{
id:'@id',
name:'@name',
'age|18-32':
}]
}); module.exports={
[`GET /api/users`](req,res){ res.status().json(db);
}, [`POST /api/users`](req,res){ let user=req.body;
console.log(req);
user.id=Mock.mock('@id');
db.data.push(user); res.status().json(user);
}
}

  接下来看一下api能不能使用, 进入项目目录, 执行 npm start 启动  

  进入默认页面  默认端口号 8000  如下是项目启动后默认页面

  访问下api   http://localhost:8000/api/users     好了,可以访问  成功返回模拟用户列表数据

  

6.安装antd 

  

  • npm install antd babel-plugin-import --save

  babel-plugin-import 是用来按需加载 antd 的脚本和样式的

  安装完成后,配置使用antd  修改.roadhogrc文件

  添加 ["import",{ "libraryName":"antd","style":"css" }]   最后文件如下所示:

  

{
"entry": "src/index.js",
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
["import",{ "libraryName":"antd","style":"css" }]
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
["import",{ "libraryName":"antd","style":"css" }]
]
}
}
}

  

7.定义路由

  •   在src/routes/ 文件夹下新建 usersPage.js

  这可能是最简单的一个页面了

import { connect } from 'dva';

const UserPage=()=>{

    return (
<div>
<h1>UserPage</h1>
</div>
);
}; export default connect()(UserPage);
  • 注册路由信息  修改src/router.js文件

  顺手加了个组件动态加载

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage'; function RouterConfig({ history,app }) { const UserPage=dynamic({
app, component:()=>import('./routes/usersPage')
}); return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/users" exact component={UserPage} />
</Switch>
</Router>
);
} export default RouterConfig;

查看一下路由配置效果  访问http://localhost:8000/#/users

显示内容了

8.添加与服务端通讯

  •   修改src/utils/request.js如下  用于提供基础的ajax数据访问

  也有不少使用axio的 具体优缺点还没研究。

  

import fetch from 'dva/fetch';

const checkStatus=(response)=>{

    if(response.status>= && response.status<=){

      return response;
} const error=new Error(response.statusText);
error.response=response;
throw error;
}; export default async function request(url,options={}) { options.headers={
'Content-Type':'application/json'
}
const response=await fetch(url,options);
checkStatus(response);
const data=await response.json(); return data;
}

这里为了理解简单  省略一层 user.service (封装基础ajax通讯 提供业务接口)  在业务层中直接调用request里方法 【只是为了学习方便】

  • 然后在src/models下新建user.js
import request from '../utils/request';
const User={
namespace:"user", state:{
list:[],
visibleModal:false
},
reducers:{
save(state,{ payload:{ data:list } }){ return {
...state,
list
};
}
},
effects:{
* query({},{ call,put }){
const { data }=yield call(request,'/api/users',{ method:'GET' });
yield put({type:'save',payload:{ data }});
},
* create({ payload:{ user } },{ call,put }){
yield call(request,'/api/users',{
body:JSON.stringify(user),
method:'POST'
});
yield put({type:'query',payload:{ }});
}
},
subscriptions:{
setup({ dispatch,history }){ console.log('running subscriptions ...');
return history.listen(({ pathname,search })=>{ console.log(`pathname: ${pathname}`);
dispatch({ type:'query'});
});
}
}
}; export default User;

这里主要体现dva对redux react-saga的封装处理  一目了然了

  • 然后注册model  修改路由处代码为:
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import dynamic from 'dva/dynamic';
import IndexPage from './routes/IndexPage'; function RouterConfig({ history,app }) { const UserPage=dynamic({
app,
models:()=>[
import('./models/user')
],
component:()=>import('./routes/usersPage')
}); return (
<Router history={history}>
<Switch>
<Route path="/" exact component={IndexPage} />
<Route path="/users" exact component={UserPage} />
</Switch>
</Router>
);
} export default RouterConfig;

9.新建用户数据列表组件 使用antd的Tabel承载

  顺手也把添加用户的表单建了吧

user.js

import { Table,Button } from 'antd';
import { connect } from 'dva';
import UserModal from './create'; const UserTable = ({ list,dispatch }) => { const createUser=(user)=>{
dispatch({
type:'user/create',
payload:{
user
}
});
}; const columns=[
{
Title:'ID',
dataIndex:'id'
},
{
Title:'NAME',
dataIndex:'name'
},
{
Title:'AGE',
dataIndex:'age'
}
];
return (
<div>
<UserModal record={ {} } ok={ createUser }>
<Button type="primary">NEW</Button>
</UserModal>
<Table
columns={ columns }
dataSource={ list }
rowKey={ t=>t.id }
pagination={ false }>
{/* users datatable */}
</Table>
</div>
);
}; export default connect(({ user }) => { console.log(user);
return {
list: user.list
};
})(UserTable);

create.js

import React,{ Component } from 'react';
import { Modal,Form,Input } from 'antd'; class UserModal extends Component{
constructor(props){
super(props);
this.state={
visible:false
};
} render(){
const { children,form:{ getFieldDecorator },record,ok }=this.props; const showModal=()=>{ this.setState({
visible:true
});
};
const hideModal=()=>{ this.setState({
visible:false
});
};
const save=()=>{ this.props.form.validateFields((err,val)=>{
//val ==> record // console.log(val);
ok(val);
hideModal();
});
}; return (
<div>
<span onClick={ showModal }>
{ children }
</span>
<Modal
title="Create User"
visible={ this.state.visible }
onCancel={ hideModal }
onOk={ save }>
<Form>
<Form.Item label="Name">
{
getFieldDecorator('name', {
initialValue: record.name
})(<Input />)
}
</Form.Item>
<Form.Item>
{
getFieldDecorator('age',{
initialValue:record.age
})(<Input />)
}
</Form.Item>
</Form>
</Modal>
</div>
);
};
} export default Form.create()(UserModal);

usersPage.js

import { connect } from 'dva';
import Main from '../components/layout/main';
import UserTable from '../components/user/user'; const UserPage=()=>{ return (
<Main>
<h1>UserPage</h1>
<UserTable />
</Main>
);
}; export default connect()(UserPage);

10.效果演示

 11.源码下载

      或者   https://pan.baidu.com/s/1bo1R7o7

dva + antd + mockjs 实现基础用户管理的更多相关文章

  1. Linux基础用户管理

    一.用户管理 (一).用户和组的基本概念 Users and groups:. Every process (running program) on the system runs as a part ...

  2. LinuX操作系统基础------> 用户管理,grep搜索

    用户管理 用户组管理 字符管理和grep搜索 1.用户管理: LinuX是一个多用户,多任务的操作系统,可以让多个用户使用,这个账号可以帮助对用户进行追踪,必须在初始化的时候设置好自己的密码 1-1配 ...

  3. Oracle基础(四) 用户管理

    一.用户 当创建一个数据实例时,Oracle会创建一些默认的数据库用户,如SYS,SYSTEM和SCOTT等用户.SYS和SYSTEM用户都是ORACLE的系统用户.而Scott用户是Oracle数据 ...

  4. MongoDB基础之七 用户管理

    MongoDB的用户管理 注意:A)在mongodb中,有一个admin数据库, 牵涉到服务器配置层面的操作,需要先切换到admin数据.即 use admin , -->相当于进入超级用户管理 ...

  5. 用户管理-linux基础

    用户管理 useradd -u -g -G(附加组) ,-c -d -s -r(创建系统用户)   -M (不创建家目录)    思考:删除user1用户家目录,如何还原.        可以#cp ...

  6. linux基础 用户(组)管理

    修改/etc/shadow文件 1.chage -m MINDAYS USERNAME#设置密码修改最小天数2.chage -M MAXDAYS USERNAME#设置密码修改最大天数3.chage ...

  7. Linux基础第五课——用户管理

    用户管理 一个用户必须有一个主组 一个用户可以拥有多个组 但是必须一个主组 其它组是临时组 一个组可以拥有多个用户 用户的信息放到 /etc/passwd 用户的密码 存入 /etc/shadow 组 ...

  8. Mongodb 基础 数据导入导出和用户管理

    数据导出 导出命令使用方式 mongoexport---->csv/json使用 参数: -d 库名 -c 表名 -f field1,field2....列名 -q 查询条件 -o 导出文件名 ...

  9. 2019-9-12:渗透测试,基础学习,Linux下用户管理笔记

    linus用户管理/etc/passwd 保存用户信息/etc/shadow 保存密码信息,第二部分 !表示密码没有设置 cat /etc/passwd | grep xxx:查看特定账户信息 use ...

随机推荐

  1. T9

    T9 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...

  2. CREATE DATABASE RoomReservation

    要从我的模型开始构建我的RoomReservation数据库对象,我将创建表对象. 要在SQL Server中创建表,我需要使用CREATE TABLE语句. 使用CREATE TABLE语句,我将能 ...

  3. scanf和cin性能的比较

    我的实验机器配置是: 处理器:Intel(R) Core(TM) i3-7100U CPU @ 2.40GHz 2.40GHz 随机访问存储器:4.00GB 操作系统:Windows10 集成开发环境 ...

  4. Android 开发笔记___实战项目:购物车

    购物车的应用很广泛,电商app基本上都有它的身影.由于它用到了多种存储方式,通过项目对数据的存储有更高层次的了解. 1.设计思路 首先看看购物车的外观.第一次进入时里面是空的,去购物页面加入购物车以后 ...

  5. 网页头部 lang的声明

    1. 简体中文页面:html lang=zh-cmn-Hans2. 繁体中文页面:html lang=zh-cmn-Hant3. 英语页面:html lang=en 4. <回来>的音频, ...

  6. C语言 第三章 关系、逻辑运算与分支流程控制

    目录 一.关系运算 二.逻辑运算 三.运算优先级 四.if语句 4.0.代码块 4.1.单if语句 4.2.if else 4.3.多重if 4.4.?号:号表达式 五.switch语句 一.关系运算 ...

  7. [转载] zookeeper 分布式锁服务

    转载自http://www.cnblogs.com/shanyou/archive/2012/09/22/2697818.html 分布式锁服务在大家的项目中或许用的不多,因为大家都把排他放在数据库那 ...

  8. Django总结

    Django 中提供了开发网站经常用到的模块,常见的代码都为你写好了,通过减少重复的代码,Django 使你能够专注于 web 应用上有 趣的关键性的东西.为了达到这个目标,Django 提供了通用W ...

  9. Python和Excel交互

    Python和Excel交互 使用的python包为XlsxWriter 下载的链接 https://pypi.python.org/pypi/XlsxWriter 初级的例子: def write_ ...

  10. tensorflow 从入门到上天教程一

    tensorflow 是一个google开源的深度学习的框架,执行性能良好,值得使用. caffe,caffe2 通过配置就可以拼凑一个深度学习框架,大大简化流程但也依赖大量的开源库,性能也不错.20 ...