vue mock数据 并通过axios获取数据

在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加

?
1
2
3
4
5
6
7
8
const express = require( 'express' )
const app = express()
const appData = require( '../data.json' ) // 加载本地json文件
const seller = appData.seller // 获取对应本地数据
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use( '/api' ,apiRoutes)

然后找到devServer,插入以下代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//然后找到devSeerver,在里面添加
  before (app) {
   app.get( '/api/seller' ,(reg,res) => {
    res.json({
     errno: 0,
     data: seller
    }) // 接口返回json数据,上面配置的数据seller就复制给data请求后调用
   }),
   app.get( '/api/goods' ,(reg,res) => {
    res.json({
     errno: 0,
     data: goods
    }) // 接口返回json数据,上面配置的数据goods就复制给data请求后调用
   }),
   app.get( '/api/ratings' ,(reg,res) => {
    res.json({
     errno: 0,
     data: ratings
    }) // 接口返回json数据,上面配置的数据ratings就复制给data请求后调用
   })
  }

请求访问

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

最后重新启动项目即可访问npm run dev

注意this的引用方式

methods:{
getSellerData(){
var that = this;
that. $http. get( '/api/seller')
. then( function ( response) {
if( response. data. errno == ERRNO){
that. seller = response. data. data;
} else{
alert( "数据获取失败!");
}
})
. catch( function ( error) {
console. log( error);
});
},
getRatingData(){
var that = this;
that. $http. get( '/api/ratings')
. then( function ( response) {
if( response. data. errno == ERRNO){
that. ratings = response. data. data;
console. log( that. ratings);
} else{
alert( "数据获取失败!");
}
})
. catch( function ( error) {
console. log( error);
});
}
},

你可能感兴趣的:(Vue.js)