1. 程式人生 > >Vue專案載入本地的json資料模擬請求後臺資料

Vue專案載入本地的json資料模擬請求後臺資料

1. 安裝express和axios

npm i express --save &  npm i axios --save 

網速不好的,可以安裝淘寶映象,使用cnpm

2. 在main.js中引入axios,並掛載到全域性

import axios from ‘axios’;

Vue.prototype.$axios = axios;

3.在專案中static(靜態資源)中,新建一個儲存本地JSON資料

4. 在build/webpack.dev.conf.js中配置express並設定路由規則

// 增加express start
const express = require('express');
const app = express();
const appData = require('../static/json/appData.json'); //匯入本地的json資料
const runRedLight = appData.runRedLight;
const redLightRoad = appData.redLightRoad;
const apiRoutes = express.Router();
app.use('/api',apiRoutes);
// 增加express end
5.在build/dev-server.js中新增路由規則

//express start
before(app){
app.get('/api/light',(reg,res)=>{
res.json({
errno:0,
data:runRedLight
})
}),
app.get('/api/road',(reg,res)=>{
res.json({
errno:0,
data:redLightRoad
})
})
}
//express end
6.最後在各元件(xxx.vue)中使用了

created(){   this.getLocalData() }) } methods:{  getLocalData() { this.$axios.get('/api/light').then(res=>{ console.log(res.data); } }