当前位置：首页 > 编程日记 > 正文

dva + antd + mockjs 实现用户管理

编程日记 2024-09-13 07:10:00

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':1}]
});module.exports={[`GET /api/users`](req,res){res.status(200).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(200).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>=200 && response.status<=200){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><Tablecolumns={ 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><Modaltitle="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

原文发布时间为：2017年12月21日
原文作者： gaojinbo010

本文来源：开源中国如需转载请联系原作者

https://www.dkcj.cn/info/18512.html

用S60操作系统SDK开发NOKIA手机应用程序(4)- 界面层框架及一些特性

Uikon和Avkon Series 60 将一个用户界面层(Avkon)添加在Symbian OS v7.0s 底层的Uikon 之上。Uikon是Symbian 核心用户界面，Avkon是S60平台的用户界面。Avkon 提供了一套UI 组件和一个专为Series 60 设备设计的软件框架。UIKON 是所有Symbian OS设备都支持的一种用…

编程日记2024/09/13 07:00:00

VS2010 发布web项目问题

载：http://www.cnblogs.com/shaocm/archive/2012/08/10/2632116.html 转载于:https://www.cnblogs.com/zcttxs/p/3507007.html

编程日记2024/09/13 06:50:00

软件生命周期中出现的文档名称(cont.)

需求相关：需求规格说明书测试相关：测试计划书，测试报告

编程日记2024/09/13 06:40:00

转：45 Useful JavaScript Tips, Tricks and Best Practices

原文来自于：http://flippinawesome.org/2013/12/23/45-useful-javascript-tips-tricks-and-best-practices/ 1 – Don’t forget var keyword when assigning a variable’s value for the first time. Assignment to an undeclared variable automatically results…

编程日记2024/09/13 06:30:00

聊聊spring cloud gateway的PreserveHostHeaderGatewayFilter

序本文主要研究下spring cloud gateway的PreserveHostHeaderGatewayFilter GatewayAutoConfiguration spring-cloud-gateway-core-2.0.0.RC2-sources.jar!/org/springframework/cloud/gateway/config/GatewayAutoConfiguration.java Configuration ConditionalOnProperty(name…

编程日记2024/09/13 06:20:00

静态测试与测试计划

文章目录1 静态测试2 评审2.1 what2.2 why2.3 形式2.4 分类2.4.1 属于软件测试的部分2.4.2 属于软件质量保证的部分：3 需求测试3.1 why3.2 需求中可能存在的问题3.3 需求文档检查要点3.3.1 完整性3.3.2 正确性3.3.3 一致性3.3.4 可行性3.3.5 无二义型3.3.6 健壮性3.…

编程日记2024/09/13 06:10:00

中国HBase技术社区第一届Meetup资料大合集

2018年6月6号，由中国HBase技术社区组织，阿里云主办的中国第一次HBase Meetup在北京望京阿里中心举行，来自阿里、小米、滴滴、360等公司的各位HBase的PMC、committer共聚一堂，共同探讨HBase2.0的技术革新以及HBase在国内各个大型企…

编程日记2024/09/13 06:00:00

寻找历史！！！

“你一点都不了解中国”。在大约四年的时间里，我几乎每天都听到类似的批评。每周一的中午，我坐着红色的出租车沿着三环路前往上班地点。尽管北京拥有世界上最宽阔的道路，但在早晨与傍晚时，那些亨利福特Ｔ型车的后代们…

编程日记2024/09/13 05:50:00

wikioi 1083 Cantor表

找规律题现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的。他是用下面这一张表来证明这一命题的： 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … 3/1 3/2 3/3 … 4/1 4/2 … 5/1 … … 我们以Z字形给上表的每一项编号。第一项是1/1，然后是1/…

编程日记2024/09/13 05:40:00

hung-yi lee_p3_线性回归

文章目录本节目的解决过程损失函数解损失函数（by梯度下降）改进模型矫枉过正解决方案本课结论本节目的找到这样一个函数，输入宝可梦当前的CP(Combat Point)值，得到它进化后的CP值。解决过程损失函数函数的函数：衡…

编程日记2024/09/13 05:30:00

PHP简单封装MysqlHelper类

MysqlHelper.class.php 1: <?php 2: 3: /** 4: * Mysql数据帮助类 5: */ 6: class MysqlHelper 7: { 8: function __construct() 9: { 10: if(isset($conn)){return;} 11: //创建连接对象 12: $this->connmysql_connect($this->…

编程日记2024/09/13 05:20:00

python之XML文件解析

python对XML的解析常见的XML编程接口有DOM和SAX，这两种接口处理XML文件的方式不同，当然使用场合也不同。 python有三种方法解析XML，分别是SAX，DOM，以及ElementTree三种方法。以下案例依次介绍三种方法： 先…

编程日记2024/09/13 05:10:00

这句话真他妈经典

研究解决一个问题的时候，通常花百分之二十的时间和精力，就能抓住问题的百分之八十，而为了完善那余下的百分之二十，却往往要花百分之八十的时间和精力这句话真他妈经典，呵呵转载于:https://www.cnblogs.com/webcool…

编程日记2024/09/13 05:00:00

hung-yi lee_p4_Bias And Variance

文章目录本节目的biasvariance结论（鱼和熊掌不可得兼）如何解决减小bias的方案减小variance的方案对训练集进行处理得到更好的模型本节目的 where does the error come from?（为什么最复杂的模型反而Loss函数的值越大） error有…

编程日记2024/09/13 04:50:00

感觉 Data Access Application Block(DAAB) 里也有可能写得不太好的地方

昨天下载了博客园的代码，里面有一个Data\SqlServer.cs我不清楚是不是 MS DAAB 里的原样文件。不过前面有声明如下：////Microsoft Data Access Application Block for .NET 3.0////SqlServer.cs////This file contains the implementations of the AdoHel…

编程日记2024/09/13 04:40:00

微软压力测试工具 web application stress

WEB服务器的压力测试工具~ 115808 2009年8月1日lbimba 铜牌会员这里给广大的煤油推荐一个web网站压力测试工具。它可以用来模拟多个用户操作网站，在程序投入运行时，可以用它来进行程序的测试并得到Web站点的稳定参数，甚至于可以对一台小型的…

编程日记2024/09/13 04:30:00

Didn't find class net.oschina.app.AppContext on

原因你引入的Lib 未打钩然后在菜单Project -> Properties -> Java Build Path -> Order & Export, 然后选中你未打钩的, 然后菜单 Project->Clean，然后运行程序即可。转载于:https://blog.51cto.com/12237592/2129523

编程日记2024/09/13 04:20:00

hung-yi lee_p5-7_Gradient Descent(梯度下降)

原视频地址 https://www.bilibili.com/video/BV1JE411g7XF?p5 文章目录梯度下降是如何优化函数的tips1. 使用Adagrad2. Stochastic Gradient Descent3. Feature Scaling梯度下降理论基础梯度下降的局限性梯度下降是如何优化函数的前情回顾：损失函数是用来衡量找到…

编程日记2024/09/13 04:10:00

第九章 9.2 数组的方法(Array Methods)

注：这里只讲解一些 Array() 的最重要的方法。其他更多的参考手册。9.2.1 join() 将所有元素转换为字符串并默认用 "," 连接。可以指定一个附加的参数来自定义分隔符： vara [1, 2, 3];vars a.join(); //s "1,2,3"s a.join(", &…

编程日记2024/09/13 04:00:00

HashMap vs. TreeMap vs. Hashtable vs. LinkedHashMap

http://www.importnew.com/8658.html转载于:https://www.cnblogs.com/passer1991/p/3520563.html

编程日记2024/09/13 03:50:00

php7+的php-fpm参数配置，注意事项

安装php7的，如果php-fpm的这几个参数设置不当了，会导致php-fpm启动不了，nginx站点不能解析php文件，报404错误。相关命令：centos7，启动php-fpm： systemctl start php-fpm查看php-fpm是否启动&am…

编程日记2024/09/13 03:40:00

hung-yi lee_p10_分类/概率生成模型

文章目录研究背景本节目的本节要使用的例子研究过程把分类当成回归来算理想做法找到最佳函数的方法研究成果运用运用过程结果方法改进模型总结讨论为什么选择正态分布模型？关于后验概率的求法之化简与改进猜想一张图总结研究背景本节目的 Classification:Probabi…

编程日记2024/09/13 03:30:00

【跃迁之路】【495天】程序员高效学习方法论探索系列（实验阶段252-2018.06.15）...

(跃迁之路)专栏实验说明从2017.10.6起，开启这个系列，目标只有一个：探索新的学习方法，实现跃迁式成长实验期2年（2017.10.06 - 2019.10.06）我将以自己为实验对象。我将开源我的学习方法，方法不断…

编程日记2024/09/13 03:20:00

wpf+xml实现的一个随机生成早晚餐的小demo

话说每到吃完的时间就发愁，真的不知道该吃什么，然后就想到做一个生成吃什么的小软件，既然这个软件如此的简单，就打算用wpf开发吧，也不用数据库了，直接保存在xml中就可以了程序整体结构如下图首先我写了一…

编程日记2024/09/13 03:10:00

CentOS报错：TNS-12541: TNS:no listener TNS-12560: TNS:protocol adapter error TNS-00511: No listener

问题描述原因 listener.ora中的ORACLE_HOME错了解决这个错误当时是和另一条指令lsnrctl start的错误一起报的，那个已解决，详细做法请各位移步我的另一篇博客 https://blog.csdn.net/weixin_44997802/article/details/109266708

编程日记2024/09/13 03:00:00

c#数据结构———二叉查找树

using System;<?xml:namespace prefix o ns "urn:schemas-microsoft-com:office:office" />namespace BinaryTreeLibrary{///创建的是二叉查找树，没有重复的结点值///特点：左支树中任何值都小于父结点值，右结点任何值大于…

编程日记2024/09/13 02:50:00