vue中使用json-server,实现mock数据
学习各种资料,整理出一份可用的mock方式(如有问题还请各位大神多多指教)
>使用到的技术:
vue-cli、webpack、node、npm、json-server
完整步骤:
(基础版)
1、全局安装json-server
npm i json-server -g
2、安装好之后,修改配置文件,config-->index.js-->proxyTable
proxyTable: {
'/api/': {
target: 'http://localhost:3000',
changeOrigin: true,
secure: false,
pathRewrite: {
'^/api/': ''
}
}
},
3、在目录下创建一个mock文件夹
新建一个db.json文件
{
"data":{
"data":"world",
"status":0,
"msg":"success"
}
}
4、修改package.json文件package.json-->scripts
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"mock": "node mock/db.json --post 9090",
"mockdev": "npm run mock & npm run dev"
},
5、启动项目,再启动服务
npm run dev
npm run mock
或者
npm run mock
6、页面请求
this.$http.get('/api/data').then((res)=>{
console.log(res)
})
(进阶版)
因为项目内可能不是只是需要一个json文件,可能存在这种情况,如果每个文件都去配置就很麻烦,可以直接在mock文件夹里编写一个server.js
1、2步骤同上,步骤3创建文件夹如上
4、创建server.js
5、修改package.json文件package.json-->scripts
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"mock": "node mock/server.js", ///该条配置不一样
"mockdev": "npm run mock & npm run dev"
},
6、启动项目并启动服务