使用json-server与Mockjs搭建模拟服务
为什么使用
在项目开发中,常常需要边写前端页面边写后端接口,但是后端接口服务往往是滞后于前端开发的,或者是不能及时提供的。出于前端开发的迅速和便捷去考虑,我们可以根据后端接口数据结构去模拟(mock)数据从而实现前端的独立开发。 JsonServer 主要的作用就是搭建本地的数据接口,创建json文件,便于调试调用 Mockjs 主要的作用就是生成随机数据,支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
如何使用
以下操作需要node.js环境
1.创建文件夹
选择自己喜欢的位置创建一个文件夹,比如E:/mock
2.安装json-server
进入E:/mock
npm install json-server -g
安装完执行 json-server -h,若安装成功则会显示选项
Options: --config, -c Path to config file [default: "json-server.json"] --port, -p Set port [default: 3000] --host, -H Set host [default: "localhost"] --watch, -w Watch file(s) [boolean] --routes, -r Path to routes file --middlewares, -m Paths to middleware files [array] --static, -s Set static files directory --read-only, --ro Allow only GET requests [boolean] --no-cors, --nc Disable Cross-Origin Resource Sharing [boolean] --no-gzip, --ng Disable GZIP Content-Encoding [boolean] --snapshots, -S Set snapshots directory [default: "."] --delay, -d Add delay to responses (ms) --id, -i Set database id property (e.g. _id) [default: "id"] --foreignKeySuffix, --fks Set foreign key suffix (e.g. _id as in post_id) [default: "Id"] --quiet, -q Suppress log messages from output [boolean] --help, -h Show help [boolean] --version, -v Show version number [boolean]
3.使用json-server
创建json文件,如db.json,文件内容如下
{
“posts”: [
{
“id”: 1,
“title”: “json-server”,
“author”: “typicode”
}
],
“comments”: [
{
“id”: 1,
“body”: “some comment”,
“postId”: 1
}
],
“profile”: {
“name”: “typicode”
}
}
启动json-server,cmd执行
json-server --watch db.json
看到如下内容
1574216715(1).jpg
则运行成功,直接访问图中显示的三个地址可得结果,如
1574216903(1).jpg
至此,简单的json-server服务已经搭建成功了,后续如果有更多需求,如跨域、参数查询、路由这些,请参考json-server的github
4.安装Mockjs
进入E:/mock
npm install mockjs --save
5.使用Mockjs
创建js文件,如news.js,文件内容如下
let Mock=require(‘mockjs’);
let Random=Mock.Random;
module.exports=()=>{
let data={
news:[]
};
http://www.sina.com.cn/mid/search.shtml?q=%E5%8D%8E%E7%BA%B3%E5%85%AC%E5%8F%B8%E5%AE%A2%E6%9C%8D_18183615678__ba
let images=[1,2,3].map(x=>Random.image(‘120x60’,Random.color(),Random.word(2,6)));
for(let i=1;i<=100;i++){ let content=Random.cparagraph(0,10); data.news.push({ id:i, title:Random.cword(8,20), desc:content.substr(0,40), tag:Random.cword(2,6), views:Random.integer(100,5000), images:images.slice(0,Random.integer(1,3)) }) } return data
}
启动json-server,cmd执行
json-server --watch news.js
访问结果(部分)
完成了以上的搭建与验证过程后,你就可以开始使用json-server与Mockjs来继续构建模拟服务器了,来满足自己的各种需要
Tips:
http://www.sina.com.cn/mid/search.shtml?q=%E5%8D%8E%E7%BA%B3%E5%85%AC%E5%8F%B8%E5%AE%A2%E6%9C%8D_18183615678__fe
1、也可以使用json-server db.json ,使用“json-server --watch db.json”命令可以实时监测db.json的变化;如果没有 – watch 命令,即使db.json已经发生了改变,重新发请求,仍然会返回原先的mock data,返回状态码304,认为没有变化。
2、同时,我们可以发送 POST、PUT、PATCH和DELETE请求,相应的结果会通过lowdb自动保存到db.json。关于POST、PUT等相关请求的发送。
3、我们的request body应该是一个json对象,比如{“name”:“Lynn”};
4、POST、PUT、PATCH请求头中要包含Content-Type: application/json;
5、id的值是自动生成且不易变的。PUT请求和PATCH请求中自带的id会被忽略。
- 使用json-server与Mockjs搭建模拟服务
- mockjs,json-server一起搭建前端通用的数据模拟框架
- 使用json-server搭建模拟api接口
- 使用json-server搭建模拟api接口
- mockjs,json-server一起搭建前端通用的数据模拟框架教程
- 用JSON-server模拟REST API(三) 进阶使用
- 使用IIS Server Farms搭建应用服务负载均衡
- 三步使用 JSON Server 模拟 API
- 智能家居系统——智能家居app(二)——使用Vue+vux+node+json-server搭建app环境
- 使用LVS(Linux Virtual Server)在Linux上搭建负载均衡的集群服务
- Vue-cli 使用json server在本地模拟请求数据的示例代码
- 前端MOCK--使用 json-server 和 faker.js 模拟后台API
- Windows下SVN服务的搭建和使用(一)-VisualSVN server
- 使用json-server模拟REST API
- 记录一下:使用 python -m SimpleHTTPServer 快速搭建http服务
- MockJs结合json-server模拟后台数据
- json-server本地模拟数据工具的使用
- vue 模拟数据请求 使用json-server
- 使用LVS(Linux Virtual Server)在Linux上搭建负载均衡的集群服务(DR模式