dva框架使用mock.js模拟数据 + fetch请求数据
what DVA?
Dva是基于Redux做了一层封装,对于React的state管理,有很多方案,我选择了轻量、简单的Dva。
dva 可以很方便就使用mock.js进行数据的模拟。
只需要三步,即可使用mock进行模拟数据,使用fetch进行数据的请求。
首先,我们使用dva初始化一个项目。目录的结构为:
上面画着两个mock的相关配置文件。
第一步,我们现在在mock的文件夹下面配置你需要配置的文件,
例如说,你需要模拟用户列表的数据,那么你就配置是一个user.js , 里面写相关的mock模拟数据的语法就行了。
抛个例子(我这个模板可以直接用了,自行改增删改查吧):
'use strict'; const qs = require('qs');
const mockjs = require('mockjs'); //导入mock.js的模块 const Random = mockjs.Random; //导入mock.js的随机数 // 数据持久化 保存在global的全局变量中
let tableListData = {}; if (!global.tableListData) {
const data = mockjs.mock({
'data|100': [{
'id|+1': 1,
'name': () => {
return Random.cname();
},
'mobile': /1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\d{8}/,
'avatar': () => {
return Random.image('125x125');
},
'status|1-2': 1,
'email': () => {
return Random.email('visiondk.com');
},
'isadmin|0-1': 1,
'created_at': () => {
return Random.datetime('yyyy-MM-dd HH:mm:ss');
},
'updated_at': () => {
return Random.datetime('yyyy-MM-dd HH:mm:ss');
},
}],
page: {
total: 100,
current: 1,
},
});
tableListData = data;
global.tableListData = tableListData;
} else {
tableListData = global.tableListData;
} module.exports = {
//post请求 /api/users/ 是拦截的地址 方法内部接受 request response对象
'GET /users' (req, res) {
const page = qs.parse(req.query);
const pageSize = page.pageSize || 10;
const currentPage = page.page || 1; let data;
let newPage; let newData = tableListData.data.concat(); //数据开始模拟
if (page.field) {
const d = newData.filter((item) => {
return item[page.filed].indexOf(page.keyword) > -1;
}); data = d.slice((currentPage - 1) * pageSize, currentPage * pageSize); newPage = {
current: currentPage * 1,
total: d.length,
};
} else {
data = tableListData.data.slice((currentPage - 1) * pageSize, currentPage * pageSize);
tableListData.page.current = currentPage * 1; newPage = {
current: tableListData.page.current,
total: tableListData.page.total,
}
} setTimeout(() => {
res.json({ //将请求json格式返回
success: true,
data,
page: '123',
});
}, 200);
},
第二步,在 .roadhogrc.mock.js 中进行导入,以便于在dva进行加载的时候能够读到 mock 数据模拟的相关配置文件
//加载mock的数据 通过循环把在 mock 文件夹下的所有配置文件都拿到,并最后export出去 const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
Object.assign(mock, require('./mock/' + file))
})
module.exports = mock
第三步,就是调试了。如果是在component中发送请求,那么需要以下的步骤:
import fetch from 'dva/fetch'; //导入fetch的模块 fetch('/users',{ // 发送请求
method:'GET', //请求方式 (可以自己添加header的参数)
mode:'cors',// 避免cors攻击
credentials: 'include'
}).then(function(response) {
//打印返回的json数据
response.json().then(function(data){ //将response进行json格式化
console.log(data); //打印
});
}).catch(function(e) {
console.log("Oops, error");
});
我的例子只是把核心的代码贴出来而已。实际的项目运用中,我们可以在components的初始化,或者动作事件中进行fetch的异步请求的动作。如果对fetch的一些知识不了解的话,那请自行去深入学习,完善知识框架。
dva框架使用mock.js模拟数据 + fetch请求数据的更多相关文章
- Vue+Mock.js模拟登录和表格的增删改查
有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...
- node后台fetch请求数据-Hostname/IP doesn't match certificate's altnames解决方法
一.问题背景 基于express框架,node后台fetch请求数据,报错Hostname/IP doesn't match certificate's altnames..... require(' ...
- React native 中使用Fetch请求数据
一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...
- Node.js模拟发起http请求从异步转同步的5种方法
使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...
- Vue笔记:使用 mock.js 模拟数据
在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock.js 的出现使前后端分离并行开发成为可 ...
- mock.js 模拟数据
1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...
- mock.js模拟ajax数据请求
在我们开发过程中存在着前端页面ui完成了,但是没有接口进行联调数据的情况,现在介绍一下用mock.js来完成数据的请求.这样在后期我们的后台接口完成后只需要更改请求的接口名字即可!前提是你的模拟字段名 ...
- mock.js模拟生成假数据
mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...
- axios + mock.js模拟数据实现前后端分离开发的实例代码
首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...
随机推荐
- Mysql5.7服务下载安装
身处MySQL这个圈子,能够切身地感受到大家对MySQL 5.7的期待和热情,似乎每个人都迫不及待的想要了解.学习和使用MySQL 5.7.那么,我们不禁要问,MySQL 5.7到底做了哪些改进,引入 ...
- 字符集&各种编码&编码解码
要理解乱码问题,首先需要理解几个概念:字符集.编码.编码规则.乱码 1. 字符集: 字符(Character)是各种文字和符号的总称,包括各国家文字.标点符号.图形符号.数字等.字符集(Charact ...
- 一个web应用的诞生(8)--博文发布
这个系统一直号称轻博客,但貌似博客的功能还没有实现,这一章将简单的实现一个博客功能,首先,当然是为数据库创建一个博文表(models\post.py): from .. import db from ...
- UT源码 005
NextDate函数问题 NextDate函数说明一种复杂的关系,即输入变量之间逻辑关系的复杂性 NextDate函数包含三个变量month.day和year,函数的输出为输入日期后一天的日期. 要求 ...
- 如何在RecyclerView上面实现"拖放"和"滑动删除"-2
拖动手柄 在设计一个支持"拖放"的列表时, 通常提供一个在触摸时初始化拖拽的"拖动手柄". 因其可发现性和可用性而被Material Guidelines所推荐 ...
- TIME_WAIT 另一种解决方式 SO_LINGER
被TIME_WAIT问题烦得不行,又发现了另一种解决方式,SO_LINGER. 对SO_LINGER解释最通用的自然是<UNP>,现摘录如下 SO_LINGE ...
- MYSQL数据库-约束
约束是一种限制,它通过对表的行或列的数据做出限制,来确保表的数据的完整性.唯一性. MYSQL中,常用的几种约束: 约束类型: 主键 默认值 唯一 外键 非空 关键字: PRIMARY KEY DEF ...
- webp转png或jpg
在项目开发的过程中,遇到了一个问题,就是webp的图片,先解释一下webp是啥,webp是谷歌开发的一种旨在加快图片加载速度的图片格式.图片压缩体积大约只有JPEG的2/3,说白了就是省空间,特别对于 ...
- 手机自动化测试:Appium源码之api(1)
手机自动化测试:Appium源码之api(1) AppiumDriver getAppStrings() 默认系统语言对应的Strings.xml文件内的数据. driver.getAppStri ...
- Visual Studio 2017无法加载Visual Studio 2015创建的SharePoint解决方案
前几天安装了最新的Visual Studio 2017企业版,发现无法打开之前使用Visual Studio 2015创建的SharePoint 2016解决方案,提示"需要更新" ...