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的一些知识不了解的话，那请自行去深入学习，完善知识框架。

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.实例代码 ...

mock.js模拟ajax数据请求

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

mock.js模拟生成假数据

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

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

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

随机推荐

ArcGIS影像配准与空间配准

ArcGIS影像配准与空间配准 ArcGIS影像配准与空间配准 地图配准可分为影像配准和空间配准.影像配准的对象是raster图,譬如TIFF图.配准后的图可以保存为ESRI GRID, TIFF,或 ...

sql 、linq、lambda 查询语句的区别

LINQ的书写格式如下: from 临时变量 in 集合对象或数据库对象 where 条件表达式 [order by条件] select 临时变量中被查询的值 [group by 条件] Lambda ...

Huawei校招机试中的猴子吃桃问题

//============================================================================ // Name : Monkey& ...

Android之记住密码与自动登陆实现

本文主要讲述了利用sharedpreference实现记住密码与自动登陆功能 根据checkbox的状态存储用户名与密码 将结果保存在自定义的application中,成为全局变量 布局文件 < ...

代码-Weka的NaiveBayes类

package kit.weka;   import java.io.File; import weka.classifiers.CheckClassifier; import weka.classi ...

CentOS 6&period;4 64位 安装 mysql 5&period;6&period;24

下载安装包 由于官网访问及版本选择下载不太方便,使用 suho 的源进行下载 http://mirrors.sohu.com/mysql/MySQL-5.6/ 下载如下三个安装包: MySQL-ser ...

Android系统--Binder系统具体框架分析(二)Binder驱动情景分析

Android系统--Binder系统具体框架分析(二)Binder驱动情景分析 1. Binder驱动情景分析 1.1 进程间通信三要素 源 目的:handle表示"服务",即向 ...

第一个Spring 程序

一 搭建好开发环境 JDK Eclipse 等 二 下载jar包 https://commons.apache.org/logging/ https://repo.spring.io/release/ ...

类变量、实例变量--python

1.类变量.实例变量概念 类变量: 类变量就是定义在类中,但是在函数体之外的变量.通常不使用self.变量名赋值的变量.类变量通常不作为类的实例变量的,类变量对于所有实例化的对象中是公用的. 实例变量 ...