在后端接口没有写好,而前端又希望测试调用接口获取数据,可以通过json-server来模仿接口数据。
首先npm install json-server,然后进行相关配置:
具体的配置如下:
build文件夹下找到webpack.dev.conf.js文件,在该文件moudule.exports 前加上如下配置:
//json-server配置
const jsonServer = require('json-server')
const server = jsonServer.create()
const db = require('../db.json')
const router = jsonServer.router(db)
const middlewares = jsonServer.defaults()
server.use(middlewares)
server.use("/api",router)
server.listen(3000, () => { //模仿后台请求接口为3000
console.log('JSON Server is running')
})
此时,我们所模仿的后台地址为localhost:3000,在浏览器输入该网址,可以检查是否配置成功。
但是,前端端口为8080,后台端口为3000,因此存在跨域的问题,需要对config文件夹下index.js文件进行配置;
module.exports中配置代理:
proxyTable: {
'/api/':'http://localhost:3000/'
},
此时,在db.json文件中写入数据,就可以在前端进行请求:
this.$http.get('api/getNewsList')
.then(
function(res){//成功的函数
this.newsList = res.data;
},
)
.catch(
function(err){//失败的函数
console.log(err)
}
)
注意,因为在配置时,我们加入了/api/,因此在请求的时候,也需要加上 api/
安装vue-resource,并在main.js 中引用,就可以使用$http进行数据请求
import VueResource from 'vue-resource'
Vue.use(VueResource);