Mock数据
mockjs
安装
第一种：
# 安装
npm install mockjs
第二种使用CDN：
https://cdnjs.cloudflare.com/ajax/libs/Mock.js/1.0.0/mock.js
直接在Header部分引用即可。
示例：
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
语法
数据模板定义规范 DTD
# 格式
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
注意：
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则
有 7 种格式：
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
*生成规则* 的 含义 需要依赖 *属性值的类型* 才能确定。
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型。
示例：
const Mock = require("mockjs");
const params = 2;
const key = "lists|" + params;
const result = Mock.mock({
code: 200,
[key]: [
{
"number1|1-100.1-10": 1,
"number2|10.1-10": 1,
"number3|11.3": 1000,
"number4|123.10": 1.123,
"id|+1": 1
}
],
msg: "mock msg"
});
数据占位符定义规范
# 格式
@占位符
@占位符(参数 [, 参数])
常规应用
Demo1:
在HTML中直接使用script标签引用mockjs
在页面中拦截ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.staticfile.org/Mock.js/1.0.0/mock-min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Mock.mock(/^/lists/, "get", {
code: 200,
data: {
"lists|1-10": [
{
"id|+1": 0
}
]
}
});
$.ajax({
url: "/api/lists",
type: "get",
dataType: "json",
success: function(data) {
if (data.code === 200) {
var obj = data.data;
var elem = "";
$.each(obj.lists, function(item) {
elem += "<div>" + item + "</div>";
});
$("#app").append(elem);
}
}
});
</script>
</body>
</html>
Demo2:
在Vue工程化项目中进行引用：
Mock.js
// 拦截请求
import Mock from "mockjs";
Mock.mock(//get/, {
code: 200,
"data|10": [
{
"id|+1": 1,
name: "@cname",
email: "@email",
picture: "@image('120x120', '#dcdcdc')",
remark: "@title",
address: "@city(true)",
"gender|0-1": 0,
hobby: "@hobby"
}
]
});
export default Mock;
在Main.js中进行引用
if (process.env.NODE_ENV !== "production") require("@/mock/index");
Json-server
安装与使用
npm install -g json-server
创建一个db.json的文件：
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" }
],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
],
"profile": { "name": "typicode" }
}
然后，使用:
json-server --watch db.json
就可以在http://localhost:3000/posts/1获取对应的数据了：
{ "id": 1, "title": "json-server", "author": "typicode" }
所有数据的POST, PUT, PATCH,DELETE请求都会得到响应。
<!-- [Mockjs]结合json-server的综合应用模拟整个请求过程： -->
1,npm install -S mockjs
2,api-json.js里:
const Mock = require('mockjs')
const data = () => {
const result = { test: {},new:{} } //多个接口 http://localhost:80/test http://localhost:80/new
result.test = Mock.mock({
'lists|5-10': [{
'id|+1': 1,
'name': '@cname'
}],
"comments": [
{ "id": 1, "body": "some comment", "postId": 1 }
]
})
result.new = Mock.mock({
'lists1|5-10': [{
'id|+1': 1,
'name': '@cname'
}]
})
return result
}
module.exports = data
3,运行：json-server api-json.js --port=10000
动态数据
例如启动json-server的命令：json-server --watch app.js 是把一个js文件返回的数据托管成web服务。
app.js配合mockjs库可以很方便的进行生成模拟数据。
const Mock = require("mockjs");
const Random = Mock.Random;
const key = "lists|6-10";
// const result = Random.capitalize("hello");
// 自定义占位符
Random.extend({
hobby: function() {
var arr = ["swim", "run", "play computer game", "ride"];
return this.pick(arr);
}
});
const result = Mock.mock({
[key]: [
{
"id|+1": 1,
name: "@cname",
email: "@email",
picture: "@image('120x120', '#dcdcdc')",
remark: "@title",
address: "@city(true)",
"gender|0-1": 0,
hobby: "@hobby"
}
]
});
module.exports = () => result;
当json-server启动之后，mock数据就不会变化了，可以使用nodemon配合着使用，以达到接口随机数据变化的目的。
自定义路由
当然你可以自定义路由：
$ json-server --routes route.json --watch db.json
route.json文件
{
"/api/*": "/$1",
"/:resource/:id/show": "/:resource/:id",
"/posts/:category": "/posts?category=:category",
"/articles\?id=:id": "/posts/:id"
}
对应的请求会进行转发：
/api/posts # → /posts
/api/posts/1 # → /posts/1
/posts/1/show # → /posts/1
/posts/javascript # → /posts?category=javascript
/articles?id=1 # → /posts/1
过滤查询
查询数据，可以额外提供
GET /posts?title=json-server&author=typicode
GET /posts?id=1&id=2
# 可以用 . 访问更深层的属性。
GET /comments?author.name=typicode
还可以使用一些判断条件作为过滤查询的辅助。
GET /posts?views_gte=10&views_lte=20
可以用的拼接条件为：
_gte : 大于等于
_lte : 小于等于
_ne : 不等于
_like : 包含
GET /posts?id_ne=1
GET /posts?id_lte=100
GET /posts?title_like=server
分页查询
默认后台处理分页参数为： _page 第几页， _limit一页多少条。
GET /posts?_page=7
GET /posts?_page=7&_limit=20
默认一页10条。
后台会返回总条数，总条数的数据在响应头:X-Total-Count中。
排序
参数： _sort设定排序的字段
参数： _order设定排序的方式（默认升序）
GET /posts?_sort=views&_order=asc
GET /posts/1/comments?_sort=votes&_order=asc
支持多个字段排序：
GET /posts?_sort=user,views&_order=desc,asc