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

<script> import header from './components/header/header.vue'   const ERR_OK = 0   export default {   data () {    return {     seller: {}    }   },   created () {    this .$http.get( '/api/seller' ).then((response) => {     response = response.body; // 获取到数据     if (response.errno === ERR_OK) {      this .seller = response.data;      console.log( this .seller);     }    })   },   components: {    'v-header' : header   } } </script>

最后重新启动项目即可访问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);

});

}

},