前端项目模拟数据两种方式

对前后端分离的项目，前端开发需要联调接口，如果后台服务的接口进度比前端的慢，除了等待，还可以进行本地数据的模拟。通过数据模拟，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

在项目中mock（模拟数据）数据，可以把它当真实接口数据用。

1. Mock.js

Mock.js官方网站：http://mockjs.com/

官网很简单明了的一句话：生成随机数据，拦截 Ajax 请求

Mock.js会拦截ajax请求，并不会将请求真的发出去，只是项目本地随机生成的数据。

模拟的数据一般：对象、数组

// 表示随机生成1-10次我爱你 { 'a|1-10':'我爱你' } 

mock（模拟数据）数据需要使用到mockjs模块，所以需要在项目中进行引入。

不同的项目引入的方式不同，可以参考官网

https://github.com/nuysoft/Mock/wiki/Getting-Started

本文在Vue项目中引入，正好官网也没有描述到。

1.1 安装依赖包mockjs

npm install --save mockjs

1.2 在 src 目录下创建 mock 文件夹

1.3 准备模拟的数据

准备json数据，mock文件夹中创建相应的json文件，json数据需要格式化，如上图

注意：在模拟数据时，如果需要用到图片，要把mock数据需要的图片放置于public文件夹中！！！public 文件夹在打包的时候，会把相应的资源原封不动打包到 dist 文件夹

例如：banner.json数据

[ { "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2", "imgUrl": "/images/banner2.jpg" }, { "id": "3", "imgUrl": "/images/banner3.jpg" }, { "id": "4", "imgUrl": "/images/banner4.jpg" } ] 

对于mock其他的使用示例，可以参考官网：

http://mockjs.com/examples.html

1.4 创建 mockServer.js

创建mockServer.js通过mock插件实现模拟数据。这个mockServer.js文件名随便写，并不一定要这个。

//  先引入mockjs模块 import Mock from 'mockjs' // 把Json数据格式引入进来【Json数据格式根本没有对外暴露，但是可以引入】 // webpack默认对外暴露的：图片、json数据格式 import banner from './banner.json' // mock数据：第一个参数请求地址，第二个参数请求数据 Mock.mock('/mock/home/banner', { code: 200, data: banner }) 

注意：

对于上面存放模拟数据的banner.json文件，并没有对外暴露，但在mockServer.js中却可以使用。这个因为对于webpack当中一些模块：图片、json，不需要对外暴露，因为默认就是对外暴露。

最后通过Mock.mock()方法进行模拟数据

1.5 引入mockServer.js

mock需要的数据和相关mock模块编写完毕后，mockServer.js需要执行一次，如果不执行，那就相当于没写一样。所以需要在main.js的入口文件中引入mockServer.js

import Vue from 'vue' import App from './App.vue' import router from '@/router' import store from '@/store' // 引入mockServer.js import '@/mock/mockServer' Vue.config.productionTip = false new Vue({ render: (h) => h(App), // 注册路由信息，当这里书写router的时候，组件身上都拥有$route,$router属性 router, // 注册仓库，组件实例的身上会多一个属性$store属性 store, }).$mount('#app') 

1.6 配置Axios请求

在API文件夹中创建mockRequest.js，对于正式联调的请求建议分开。如下图：request.js用于正在与后台联调发送的请求，mockRequest.js则专门用于获取模拟数据用的axios实例。两份代码一模一样，但配置的baseURL不同。

import axios from 'axios' // 利用axios对象的create方法，去创建一个案axios实例 // requests就是案axios，只不过稍微配置一下 const requests = axios.create({ // 配置对象 // 基础路径，发请求的时候，路径当中会出现api baseURL: '/mock', timeout: 5000, }) // 请求拦截器，在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情 requests.interceptors.request.use((config) => { // config配置对象，对象里面有一个属性很重要，headers请求头 return config }) // 响应拦截器 requests.interceptors.response.use( (res) => { return res.data }, (error) => { return Promise.reject(new Error('failed')) } ) export default requests

1.7 编写接口

// 用于发送真正的请求与后台联调 import requests from './request' // 专门用于mock数据用的请求 import mockRequests from './mockRequest' export const reqCategoryList = () => { return requests({ url: '/product/getBaseCategoryList', method: 'get', }) } // 调用的是mockRequests发送请求 export const reqBannerList = () => { return mockRequests({ url: '/home/banner', method: 'get', }) } 

在开发项目时切记，某一个功能完毕后，一定要进行单元测试，看看数据是否OK

2. json-sever

下面介绍下另一种模拟数据的方式：json-server，json-server是一个在前端本地运行，可以存储json数据的server

json-server官网：https://github.com/typicode/json-server#getting-started

2.1 全局安装

使用npm全局安装json-server：

npm install -g json-server

可以通过查看版本号，来测试是否安装成功：

json-server -v

2.2 创建json数据

在任意一个文件夹下，在命令行执行代码，会自动在文件夹下创建出一个db.json文件

json-server --watch db.json

根据结果提示，可以在浏览器中访问http://localhost:3000，看到如下页面：

可以分别点击/posts/comment/profile链接，看下请求地址和内容

再来查看下自动生成的db.json文件里数据

{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" } } 

可以发现/posts、/comment、/profile分别是db.json里面的子对象

json-server把db.json根节点的每一个key，当作了一个router，可以根据这个规则来编写测试数据

2.3 修改端口号

从上面启动日志可以看到，json-server默认是3000端口，但也可以自己指定端口，指令如下：

json-server --watch db.json --port 3001 

上面的启动命令有点长，可以考虑使用package.json文件来管理启动命令，在db.json同级文件夹下新建一个package.json，编写如下配置信息：

{ "scripts": { "mock": "json-server db.json --port 3001" } } 

再启动服务时只需要执行如下指令：

npm run mock

2.4 配置静态资源

对于静态资源的配置，可以通过命令行来配置，但这样配置会让命令变的很长且容易出错，json-server提供了把所有配置放到一个配置文件中，在启动命令时指定此配置文件，配置文件一般命名为json_sever_config.json

# json_sever_config.json { "port": 3004, "watch": true, "static": "./public", "read-only": false, "no-cors": false, "no-gzip": false } 

# package.json { "scripts": { "mock": "json-server --c json_sever_config.json db.json" } } 

通过上面配置，可以把一些静态资源放在public目录中。

2.5 简单使用

db.json文件里测试数据：

{ "players": [ { "id": 1, "name": "Kobe", "age": 36 }, { "id": 2, "name": "Jordan", "age": 42 }, { "id": 3, "name": "James", "age": 33 }, { "id": 4, "name": "Harden", "age": 26 }, { "id": 5, "name": "Curry", "age": 26 } ], "users": [ { "name": { "userName":"admin", "nickName":"admin" }, "pwd": "123456" }, { "name": { "userName":"zhangsan", "nickName":"zhangsan" }, "pwd": "123456" }, { "name": { "userName":"lisi", "nickName":"lisi" }, "pwd": "123456" } ] } 

2.5.1 获取数据

先来看GET操作，http://localhost:3000/players

可以得到所有players数据，数据格式为数组

2.5.2 根据id获取数据

根据id获取数据：http://localhost:3000/players/1。返回的是一个对象

根据id获取数据：http://localhost:3000/players?id=1。返回的是一个数组

以此类推，也可以根据name和age来获取数据，同时可以指定多个条件，用&符号连接

还可以使用对象取属性值 obj.key 的方式：http://localhost:3000/users?name.nickName=zhangsan

2.5.3 分页

分页采用_page来设置页码，_limit来控制每页显示条数。如果没有指定_limit，默认每页显示10条。

http://localhost:3000/players?_page=2&_limit=2

2.5.4 排序 Sort

排序采用_sort来指定要排序的字段，_order来指定排序是升排序还是降序（asc|desc，默认是asc）

http://localhost:3000/players?_sort=age&_order=des

2.5.5 局部数据 Slice

slice方式采用_start来指定开始位置，_end来指定结束位置、或者是用_limit来指定从开始位置起往后取几个数据。

取第二个到第四个数据

http://localhost:3000/players?_start=2&_end=4

取第二个后面的四个数据

http://localhost:3000/players?_start=2&_limit=4

2.5.6 符合某个范围

采用_gte、_lte来设置一个取值范围

id大于等于2，小于等于5

http://localhost:3000/players?id_gte=2&id_lte=5

采用_ne来设置不包含某个值

id不包括3和6的数据

http://localhost:3000/players?id_ne=3&id_ne=6

采用_like来设置匹配某个字符串

http://localhost:3000/players?name_like=be

2.5.7 全文搜索

采用q来设置搜索内容

http://localhost:3000/players?q=j

至于新增、删除、修改分别对应：POST、DELETE、PUT请求