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请求数据的更多相关文章

  1. Vue+Mock.js模拟登录和表格的增删改查

    有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼 ...

  2. node后台fetch请求数据-Hostname/IP doesn't match certificate's altnames解决方法

    一.问题背景 基于express框架,node后台fetch请求数据,报错Hostname/IP doesn't match certificate's altnames..... require(' ...

  3. React native 中使用Fetch请求数据

    一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...

  4. Node.js模拟发起http请求从异步转同步的5种方法

    使用Node.js模拟发起http请求很常用的,但是由于Node模块(原生和第三方库)提供里面的方法都是异步,对于很多场景下应用很麻烦,不如同步来的方便.下面总结了几个常见的库API从异步转同步的几种 ...

  5. Vue笔记:使用 mock.js 模拟数据

    在我们的项目实际开发过程中,后端的接口往往是较晚才会提供出来,并且还要写接口文档,如果前端的开发都要等到接口开发完成才开始就非常影响项目整体开发进度了,mock.js 的出现使前后端分离并行开发成为可 ...

  6. mock.js 模拟数据

    1. 劫持请求,返回模拟数据: 用于前后台对接前数据模拟 相比于静态json文件而言:代码完成后不必修改源文件对应的接口调用.可模拟增删改查 2.实例代码 <!doctype html> ...

  7. mock.js模拟ajax数据请求

    在我们开发过程中存在着前端页面ui完成了,但是没有接口进行联调数据的情况,现在介绍一下用mock.js来完成数据的请求.这样在后期我们的后台接口完成后只需要更改请求的接口名字即可!前提是你的模拟字段名 ...

  8. mock.js模拟生成假数据

    mock使用方法很简单, 下面是简单的用法, 详细的用法可以看官方文档, 写的很清楚, 下面的代码直接拷贝到本地html文件, 双击打开即可生成你想要的数据 <!DOCTYPE html> ...

  9. axios + mock.js模拟数据实现前后端分离开发的实例代码

    首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中 ...

随机推荐

  1. 浅谈并发和tomcat线程数

    假设Tomcat每到固定一个时间会有一个高峰,峰值的并发达到了3000以上,最后的结果是Tomcat线程池满了,日志看很多请求超过了1s. 服务器性能很好,Tomcat版本是7.0.54,配置如下 & ...

  2. NDK 开发实例二(添加 Eigen库)

    上一篇,我已经阐述了如何创建一个简单的NDK实例: NDK 开发实例一(Android.mk环境配置下) 在上一篇的基础上,我们来添加Eigen库,然后做一个简单实例. Eigen是一个高层次的C + ...

  3. jump堡垒机配置使用

    一.用户管理 1)添加用户 点击用户管理 —> 查看用户 —> 添加用户 输入要添加的用户名,姓名,权限,Mail,并且发送邮件 —> 保存 查看添加的用户 查看用户邮件 邮件中包含 ...

  4. mybatis基础学习4---懒加载和缓存

    1:懒加载 1)在主配置文件设置(要放在配置文件最前面) <!-- 延迟加载配置,两个都必须同时有 --> <settings> <!-- lazyLoadingEnab ...

  5. 谈谈数据库中MyISAM与InnoDB区别 针对业务类型选择合适的表

    MyISAM:这个是默认类型,它是基于传统的ISAM类型, ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法. ...

  6. 【MySQL】分页查询实例讲解

    MySQL分页查询实例讲解 1. 前言 本文描述了团队在工作中遇到的一个MySQL分页查询问题,顺带讲解相关知识点,为后来者鉴.本文的重点不是"怎样"优化表结构和SQL语句,而是探 ...

  7. Python总的字符串

    Python总最常用的类型,使用单引号双引号表示.三引号之间的字符串可以跨多行并且可以是原样输出的. Python中不支持字符类型,字符也是字符串. ---字符串的CRUD [1:3] [:6] -- ...

  8. (17)IO中的异常处理

    public static void copyImage() throws IOException { //找到目标文件 File inFile = new File("D:\\1.jpg& ...

  9. 关于cursor的各种属性应用

    <html> <body> <p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p> <span style="cursor:au ...

  10. MySql Table错误:is marked as crashed and last (automatic?) 和 Error: Table "mysql"."innodb_table_stats" not found

    一.mysql 执行select 的时候报Table错误:is marked as crashed and last (automatic?) 解决方法如下: 找到mysql的安装目录的bin/myi ...