使用axios来mock数据

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Dj_Fairy/article/details/84628189

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,
}