json-server结合mockjs搭建本地数据模拟服务

json-server安装使用可以参考博文:利用json-server搭建本地数据接口
json-server除了使用db.json提供静态数据,还可以结合mockjs提供动态数据,下面介绍使用方法。

1、安装mockjs

1
npm install mockjs --save

2、mockjs使用

新建js文件:users.js,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let Mock = require('mockjs');
let random = Mock.Random;

module.exports = () => {
let data = {
users: []
};

for (let i = 1; i <= 5; i++) {
let content = random.cparagraph(1, 5);
data.users.push({
id: i,
name: random.cname(),
phone: random.integer(11, 11),
desc: content,
tag: random.cword(2, 6),
age: random.integer(18, 60),
image: random.image('200x100', random.color(), random.word(2, 6))
})
}
return data
}

在package.json的scripts下新增如下脚本:

1
"mock": "json-server --watch users.js"

启动json-server:

1
npm run mock

如下说明服务启动成功!

浏览器输入:http://localhost:3000/users,可以动态获取到模拟数据:

可以根据你的需求,修改users.js中生成数据的配置,很方便。

以上代码托管在gitee:json-server-demo


json-server结合mockjs搭建本地数据模拟服务
https://river106.cn/posts/b1988a38.html
作者
river106
发布于
2022年1月16日
许可协议