使用axios來mock資料
阿新 • • 發佈:2018-11-29
1、安裝axios
2、建立陣列json
3、配置devser
vue-cli3在vue.config.js裡面配置
vue-cli3以下的版本在webpack.dev.conf.js裡面配置
配置程式碼如下:
const webpack = require('webpack') const path = require('path') const appData = require('./data.json')//data資料 const seller = appData.seller module.exports = { devServer: { before(app) { app.get('/api/seller', function (req, res) { res.json({ errno: 0, data: seller }) }) } } }
4、配置完成後要重新啟動一下npm run dev/npm run serve
5、在瀏覽器開啟 http://localhost:8080/api/seller就可以看到資料了
6、封裝axios來獲取資料
建立api資料夾==》建立倆個js檔案helper.js和index.js
helper.js
import axios from 'axios' const urlMap = { development: '/', production: '' } const baseUrl = urlMap[process.env.NODE_ENV] const ERR_OK = 0 export function get(url) { return function(params = {}) { return axios.get(baseUrl + url, { params }).then((res) => { const {errno, data} = res.data if (errno === ERR_OK) { return data } }).catch((e) => { }) } }
index.js
import {get } from './helpers'
const seller= get('/api/seller')
export {
seller,
}