前提
已经安装Node.js,并且安装好vue-cli。想要自己MOCK数据,模拟请求后端数据。
json-server 安装
为了后续其他项目也可以使用,选择全局安装
npm install json-server -g
项目中使用
1. 在项目根目录创建一个db.json文件,用于放置需要模拟的数据如图:
注意:json格式要严格遵守,如果有多个请求接口,可以模拟为如下,代码中访问的时候,分别访问http://localhost:3003/Wolist 和 http://localhost:3003/createWo 即可。
{
"WoList":{
"header": {
"version": "1.0",
"serviceCode": "13246",
},
"retCode": "0",
"retMessage": "",
"totalPages": "10",
"pageIndex": "2",
"workOrders": [
{
"agentId": "a123",
"domainUserId": "S666666",
"domainUserName": "张三"
},
{
"agentId": "a123",
"domainUserId": "S666666",
"domainUserName": "麻子"
},
{
"agentId": "a123",
"domainUserId": "S666666",
"domainUserName": "李四"
}
]
},
"createWo":{}
}
2. 在package.json中的scripts里面加一行命令:
json-server db.json --port 3003
如图:
3. 在项目根目录执行命令,启动json-server
npm run json
4. 验证是否启动成功
浏览器输入提示地址即可,例如:
http://localhost:3003/Wolist
在浏览器可以访问成功,在代码中将其看作要请求的地址,正常写请求即可。