antd pro中如何使用mock数据以及调用接口
antd pro的底层基础框架使用的是dva,dva采用effect的方式来管理同步化异步
在dva中主要分为3层 services models components
models层用于存放数据以及对数据进行操作,services层调用请求后台接口的方法,components层用于书写页面逻辑代码
services层
import request from '@/utils/request';
export async function doit(payload) {
const {id} = payload;
let url = `/api/v2/.../${id}`;
return request(url,{
mode: 'cors',
method: 'GET',
})
.then(res => {
return res;
})
.catch(err => console.log(err));
}
models层中的effects是与后台交互、处理数据逻辑的地方
import {doit} from '../../'
export default {
namespace: 'test',
effects: {
*fetchNum ({payload,callback},{call,put}) {
const res = yield call (doit,payload)
//doit是引入services层那个js文件的doit方法,payload是后台要求传递的参数,res就是后台返过来的数据
yield put ({
type: 'addNum', //这就是reducer的addNum方法,put用来出发reducer中的方法,payload是传过去的参数。同时也能触发同等级effects中的方法
payload: {
num: res.data //把后台返回的数据赋值给num,假如哪个reducer中的方法是由这里effects去触发的,哪个num名必须是这里的名字num,如果reducer中的方法不是这触发,那名字可以随意取
}
})
}
}
reducers: {
addNum (state,{payload:{num}}) {
return {...state,num}
}
}
}
components层
页面如果需要使用models层的数据,要用connect进行连接,即在页面在引入import {connect} from 'dva';@connect(state => ({test:state.test})) 通过this.props获取数据
this.props.dispatch({
type: 'test/fetchNum', test对应models层的命名空间namespace
payload: {
numCount: ++1
}
})
使用mock数据主要包括以下几步:
1、添加mock接口
2、添加service文件
3、添加model(需引入service函数)
4、页面链接model
5、页面调用model中的effect函数
6、model中的effects通过reducer中的函数将数据返回到页面
7、页面通过this.props获取数据
具体操作就是在项目根目录下,mock文件夹中新建record.js文件,用于存放mock数据
export default {
'GET /love/record':{
message: 'Succeed',
code:0,
data: [
{
key: '1',
Name: '违规操作',
age: '口腔科',
address: '人民医院',
tags: '2019-03-21 12:56:12',
questions: '温度'
},
{
key: '2',
Name: '违规操作',
age: '皮肤科',
address: '人民医院',
tags: '2019-03-21 12:56:12',
questions: '压力'
},
]
}
}
然后在src目录下的services文件夹中新建一个record.js文件,用来创建请求数据的函数,框架已经为我们封装好了request函数(可能需要我们对request.js文件进行补充),我们可以直接进行使用
import request from '../utils/request' ;
export async function getRecord (payload) {
return request('/love/record',{
//如果路径中有参数,需要用字符串模板进行拼接``
method: 'GET'
})
.then(res => {
return res;
}
.catch(err => console.log(err))
}
src目录下的models文件夹是store文件夹,用来定义state
新建record.js文件
引入我们在services文件夹中创建的请求数据的函数
import { getRecord } from '../services/record' ;
export default {
namespace: 'demo',
state:{
record: [],
},
effects: {
*getRecord(payload,{call,put}) {
const res = yield call(getRecord,payload)
yield put({
type: 'updateToView',
payload:{record:res.data}
});
}
},
reducers: {
updateToView(state, { payload }) {
return {
...state,
...payload,
}
}
}
}
最后在page页面中,通过this.props就可以得到我们想要的数据
import { connect } from 'dva' ;
@connect(state=> ({
demo:state.demo
})
componentDidMount(){
const { dispatch } = this.props;
dispatch({
//需要调用对于namespace下effects中的该函数
type: 'record/getRecord',
})
}
console.log(this.props)就可以得到结果
const { demo } = this.props
我的request.js文件
import fetch from 'dva/fetch';
import { message } from 'antd';
import { error } from '@/utils/error';
const checkStatus = response => {
if (response.status >= 200 && response.status < 300) {
return response;
}
const errortext = error[response.status] || response.statusText;
let isLogin = response.url.search('/unsecure/login') != -1;
if (response.status === 401) {
if (isLogin) {
message.error(`请求错误 ${response.status}: ${errortext}`);
} else {
console.log('gogogo')
router.push('/user/login');
}
} else {
if (!isLogin) {
message.error(`请求错误 ${response.status}: ${errortext}`);
}
}
return response;
};
export default function request(url, option) {
//获取token
let token = localStorage.getItem('token');
const options = {
...option,
headers: {
'X-Authorization': token,
'x-language': 'chinese',
},
};
const newOptions = { ...options, credentials: 'include' };
if (
newOptions.method === 'POST' ||
newOptions.method === 'PUT' ||
newOptions.method === 'DELETE'
) {
if (!(newOptions.body instanceof FormData)) {
newOptions.headers = {
Accept: 'application/json',
'Content-Type': 'application/json; charset=utf-8',
...newOptions.headers,
};
if (newOptions.dataType != 'string') {
newOptions.body = JSON.stringify(newOptions.body);
}
} else {
newOptions.headers = {
Accept: 'application/json',
...newOptions.headers,
};
}
}
return (
fetch(url, newOptions)
.then(checkStatus)
.then(response => {
if (newOptions.responseType === 'blob') {
return response.blob();
}
let type = typeof response;
switch (type) {
case 'object':
return response.json();
case 'string':
return response.text();
}
return response.json();
})
.then(res => {
return res;
})
.catch(e => { })
);
} error.js文件
export default {
40101: '再输错两次将锁住',
40200: '用户不存在',
200: '服务器成功返回请求的数据。',
201: '新建或修改数据成功。',
202: '一个请求已经进入后台排队(异步任务)。',
204: '删除数据成功。',
400: '发出的请求有错误,服务器没有进行新建或修改数据的操作。',
401: '用户权限错误。',
403: '权限信息错误。',
404: '发出的请求针对的是不存在的记录,服务器没有进行操作。',
406: '请求的格式不可得。',
410: '请求的资源被永久删除,且不会再得到的。',
422: '当创建一个对象时,发生一个验证错误。',
500: '服务器发生错误,请检查服务器。',
502: '网关错误。',
503: '服务不可用,服务器暂时过载或维保。',
504: '网关超时。',
}
antd pro中如何使用mock数据以及调用接口的更多相关文章
- yii中的restful方式输出并调用接口和判断用户是否登录状态
//创建一个控制器接口 返回的是restful方式 <?php namespace frontend\controllers; use frontend\models\Fenlei; use f ...
- vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)
vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete) 手把手式笔记 Axios配置 安装 axios ...
- 强大的table组件-antd pro table
概述 antd pro table antd pro table 的主要部分 表格显示的配置(绿色框内) 检索的配置(红色框内) 是否显示检索部分 检索的内容是如何生效的 工具栏的配置(黄色框内) 表 ...
- antd pro 路由
概要 antd pro 路由简介 路由, 菜单和面包屑 页面之间的路由 带参数的路由 总结 概要 路由配置是单页应用的核心之一, antd pro 将所有的路由配置集中在一个文件中, 可以更好的对应用 ...
- antd pro table中的文件上传
概述 示例代码 列表页面 form 页面 model.js service.js 总结 概述 项目中经常会遇到在表格中展示图片的需求(比如展示用户信息时, 有一列是用户的头像). antd pro t ...
- vue-cli项目中怎么mock数据
在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data ...
- GPS模块输出的NMEA数据ddmm.mmmm转换成dd.ddddd并在google Earth Pro中描点
GPS模块输出的数据是NMEA格式,其中GPGGA字段包含我们需要的经纬度信息. 例:$GPGGA,092204.999,4250.5589,S,14718.5084,E,1,04,24.4,12 ...
- Electron-vue实战(三)— 如何在Vuex中管理Mock数据
Electron-vue实战(三)— 如何在Vuex中管理Mock数据 作者:狐狸家的鱼 本文链接:Vuex管理Mock数据 GitHub:sueRimn 在vuex中管理mock数据 关于vuex的 ...
- mock 数据 解决方案
前端工程化之--Mock解决方案 https://www.jianshu.com/p/720b12b5d120 一.为什么要使用mock数据: 1.后端接口数据没有的时候,前端根据接口文档,使用 ...
随机推荐
- VS2010下编译配置Boost_1.53
一.准备工作 1.下载最新版本的boost库.所在地址:boost_1_53_0.zip.官方推荐7z压缩格式的,因为其压缩效率更好,相应包的大小也比较小. 2.解压缩到指定目录,如C:\boost_ ...
- 递归导致的StackOverflow的分析
递归在多层次遍历时尤为重要,这里我们不讲递归的实现,来谈谈递归的内存占用情况. 如下代码,当我们运行时很简单,StackOverflowException瞬间抛出:这里确实是“瞬间”出错了,线程堆栈溢 ...
- 多进程界面开发-Qt试玩儿
目录 一.概述 二.效果展示 三.使用方法 1.启动外部进程 2.创建Qt窗口 3.加入到主进程布局 四.嵌入NotePad 五.调用Ping命令 六.嵌入其他QWidget窗体 七.相关文章 一.概 ...
- ChannelPipeline----贯穿io事件处理的大动脉
ChannelPipeline贯穿io事件处理的大动脉 上一篇,我们分析了NioEventLoop及其相关类的主干逻辑代码,我们知道netty采用线程封闭的方式来避免多线程之间的资源竞争,最大限度地减 ...
- asp.net core系列 66 Dapper介绍--Micro-ORM
一.概述 目前对于.net的数据访问ORM工具很多,EF和EF Core是一个重量级的框架.最近在搭建新的项目架构,来学习一下轻量级的数据访问ORM工具Dapper.Dapper支持SQL Serve ...
- Laravel --- 【转】安装调试利器 Laravel Debugbar
[转]http://www.tuicool.com/articles/qYfmmur 1.简介 Laravel Debugbar 在 Laravel 5 中集成了 PHP Debug Bar ,用于显 ...
- .NET开发框架(二)-框架功能简述
若视频播放不了,请点击 这里查看 本框架为响应式SPA框架,支持PC与手机端的屏幕自适应.手机展示效果视频在文章末尾查看. 框架入口地址:http://letyouknow.net/ 1.框架登录界面 ...
- 在java项目启动时就执行某操作
在java启动时大概有四种,此处只介绍3种 1.在启动的方法上使用通过@PostConstruct方法实现初始化bean进行操作 2.通过bean实现InitializingBean接口 @Overr ...
- 从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板
标题:从零开始实现ASP.NET Core MVC的插件式开发(二) - 如何创建项目模板 作者:Lamond Lu 地址:https://www.cnblogs.com/lwqlun/p/11155 ...
- 【原创】面试官:讲讲mysql表设计要注意啥
引言 近期由于复习了一下mysql的内容,有些心得.随手讲其中一部分知识,都是一些烟哥自己平时工作的总结以及经验.大家看完,其实能避开很多坑.而且很多问题,都是面试中实打实会问到的! 比如 OK,具体 ...