Vue-cli 在本地模拟请求数据
2018-09-05 本文已影响0人
Yuhoo
写在前面
在我们开发的时候，尤其是前后端分离的项目，接口总是滞后于页面的开发，所以我们需要模拟后台API请求结果。
模拟后台数据请求
第一步：安装插件
npm install vue-resource --save
第二步：读取本地json数据
目前的vue-cli2.0已经放弃dev-server.js，只需在webpack.dev.conf.js配置就行，具体配置如下：
在const portfinder = require('portfinder')后面加上以下代码
const portfinder = require('portfinder')
// 读取本地json数据
const express = require('express')
const app = express()//请求server
var homeData = require('../static/mock/index.json') // 加载本地数据文件
var cityData = require('../static/mock/city.json')//加载本地数据文件
var apiRoutes = express.Router()
app.use('/api', apiRoutes)//通过路由请求数据
第三步：进行后台数据模拟
在devServer里面添加
// 进行后台数据模拟
before(app) {
app.get('/api/home', (req, res) => {
res.json({
errno: 0,
data: homeData
})
}), // 接口返回json数据，上面配置的数据seller就赋值给data请求后调用
app.get('/api/city', (req, res) => {
res.json({
errno: 0,
data: cityData
})
})
}
第四步：查看数据结果
运行npm run dev，在浏览器中打开http://localhost:8080/api/home，可以看到访问结果
获取本地json数据结果
在vue文件中使用axios请求json数据
第一步：安装axios
npm install axios --save // 使用axios发送请求
main.js文件中：
import axios from 'axios'; // 消息请求
Vue.prototype.$http = axios; // 将axios挂载到Vue实例中的$http 上面
第二步：安装vue文件中请求
this.$http.get('./api/home').then((res) => {
this.content = res.data;
console.log(this.content);
}).catch((err) => {
console.log(err);
});
