在使用vue-cli开发项目时,无论后台接口是否开发完成,我们都可以自己使用本地json数据用于模拟,但这些json数据要作为接口开发,json server 作为模拟工具就提供了这样的功能,并且使用十分方便。
前提:已经使用vue-cli搭建好了项目
1、全局安装json-server
npm install json-server -g
或使用
cnpm install json-server -g
2、在项目目录下创建mock文件夹,并在文件夹下创建db.json文件
3、找到package.json文件夹,写入两个命令:
"mock": "json-server --watch mock/db.json",
"mockdev": "npm run mock & npm run dev"
我这里只写了一个,其实一个两个都可以,写两个直接可以两条命令一起执行
如果执行npm run mockdev 时一直处于监听db.json的状态,建议使用两条命令分开在两个命令行中执行,可避免在一条命令中重复监听db.json。
4、在config/index.js中设置代理:
主要是为了将请求映射到http://localhost:3000
proxyTable: {
'/api/':{
target:'http://localhost:3000',
changeOrigin:true,
pathRewrite:{
'^/api.':''
}
}
}
注意:如果此时你的服务已经开了(已经npm run dev 了),需重新启动服务
在设置代理之前,可以先进行测试,看是否可以启动mock服务器
运行npm run mock 之后访问http://localhost:3000 ,页面中存在json对象并可访问即可
这样我们就实现了项目用npm run dev启动,而json数据使用npm run mock启动(mock服务器用于模拟后台接口请求)
最后:我们就可以使用vue的axios进行数据请求啦
axios({
url:'/api/table',//api 代理到json文件地址,后面的后缀是文件中的对象或者是数组
method:'get',//请求方式
//这里可以添加axios文档中的各种配置
}).then(function (res) {
console.log(res,'成功');
}).catch(function (err) {
console.log(err,'错误');
})