vue项目用到的mock数据接口的两种方式

1. 使用 devServer.before 进行数据 mock

// 通过配置 devServer.before 选项，设置 url 访问路径及 response 响应数据，进行 mock 数据。const {data} = require('./data.json')
// 引入 json 数据对象
 
//vue.config.js 配置文件中进行 Vue CLI 的配置
module.exports = {
  //...
  devServer: {before: function(app, server) {app.get('/api/data', function(req, res) {res.json({ data: data, errno: 0});
      });
    }
  }
};

import axios from 'axios'
const ERRNO = 0
 
// 通过函数柯力化，接收 url 作为参数，以返回新的函数接收额外的参数作为 axios 配置项
function get (url) {return function (params) {
    return axios.get(url, {params}).then((res) => {const { errno, data} = res.data
      if (errno === ERRNO) {return data}
    }).catch((e) => {})
  }
}
 
const getData = get('api/data')
 
getSeller().then(res => {console.log(res)
})

2. 使用 Mock.js 进行数据 mock

使用 Mock.mock()，根据数据模板生成模拟数据。

import Mock from 'mockjs'
import data from './bookHome'
// 导入存放模拟 json 数据的 js 文件
 
 
Mock.mock(/\/api\/data/, 'get', home)
// 表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。// 表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。// 表示数据模板，可以是对象或字符串。例如 {'data|1-10':[{}] }、'@EMAIL'。

/* axios 获取 mock 数据 */
import axios from 'axios'
 
export function getData() {
  return axios({
    method: 'get',
    url: `${process.env.VUE_APP_BOOK_URL}/api/data`
    // 通过环境指定的默认地址设定接口 url，方便后续调用
  })
}
 
 
  // 接口方法返回 promise 对象，最终获取 mock 数据
  getData().then(response => {if (response && response.status === 200) {
      const data = response.data
      console.log(data)
    }
  })