文章目录

1. Mock.js
- 1.1 安装依赖包mockjs
- 1.2 在 src 目录下创建 mock 文件夹
- 1.3 准备模拟的数据
- 1.4 创建 mockServer.js
- 1.5 引入mockServer.js
- 1.6 配置Axios请求
- 1.7 编写接口
2. json-sever
- 2.1 全局安装
- 2.2 创建json数据
- 2.3 修改端口号
- 2.4 配置静态资源
- 2.5 简单使用
- - 2.5.1 获取数据
  - 2.5.2 根据id获取数据
  - 2.5.3 分页
  - 2.5.4 排序 Sort
  - 2.5.5 局部数据 Slice
  - 2.5.6 符合某个范围
  - 2.5.7 全文搜索

对前后端分离的项目，前端开发需要联调接口，如果后台服务的接口进度比前端的慢，除了等待，还可以进行本地数据的模拟。通过数据模拟，前端人员可以不依赖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 = falsenew 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({// 配置对象// 基础路径，发请求的时候，路径当中会出现apibaseURL: '/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请求

前端项目模拟数据两种方式相关推荐

MAX31855电路和程序，实现SPI和软件模拟时序两种方式读取数据
1. 概述 MAX31855为热电偶至数字输出转换器,内置14位模/数转换器(ADC).器件带有冷端补偿检测和修正.数字控制器.SPI兼容接口,以及相关的控制逻辑,在温度控制器.过程控制或监测系统中设 ...
ireport参数传递json_Json传递数据两种方式（json大全）
1.Json传递数据两种方式(json大全) ----------------------------字符串 var list1 = ["number","name&qu ...
SparkStreaming从Kafka读取数据两种方式
参考文章:http://www.jianshu.com/p/60344796f8a5 在结合 Spark Streaming 及 Kafka 的实时应用中,我们通常使用以下两个 API 来获取最初的 ...
JAVA与PLC通讯读取数据(两种方式)
第一种方式(s7connector) S7官网:S7Connector - Documentation,有简单的读写操作参考. 1.创建maven工程引入依赖 <dependency>&l ...
实时水面波动模拟的两种方式
图片来自大名鼎鼎的Crest Ocean项目截图,其波动算法为Gerstner Waves 因为HDRP项目需要一套水,现有的水都比较简陋,所以又双叒叕在做玩具主要是 Gerstner Waves ...
Eclipse设置项目编码格式的两种方式
Eclipse中可以为整个工作空间设置统一编码格式,也可以为单个项目设置对应的编码格式,如下: 一.为整个Eclipse WorkSpace设置编码格式 1.找到Eclipse菜单[Window]–& ...
python 爬虫The One的数据两种方式
系统:windows 语言:python 工具:pycharm 需要的包:beautifulsoup.requests 安装以上的包,方法类似, 手动方式任务:爬300条.采用多线程.非多线程单线 ...
HashMap 遍历hashMap的7种方法和删除数据两种方式
遍历数据 1.使用Iterator 遍历HashMap EntrySet 2.使用Iterator 遍历HashMap KeySet 3.使用For-each EntrySet 循环迭代 HashMa ...
导出Word的两种方式
导出Word有两种方式,分别是前端和后端这两种方式在实际开发中根据实际需要会选择不同的方式方式对比: 前端导出: 优点:简单,快捷,对于样式的设定也比较方便缺陷:只可以导出本页展示的数据,导出的 ...

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