开发时,模拟数据的三种方式.

在前端开发的时候,往往需要数据来测试模块的性能.
所以就需要模拟数据
模拟数据一般有三种,
第一种就是本地创建json文件
vue开发项目中,创建json文件一般放在静态文件夹里,
但因此也有一个隐藏的坑,
使用vuecli生成项目的时候会生成一个static文件夹,
本地mock数据就是放在这个文件夹里的.
用一下方法获得数据.

this.axios.get('/static/mock/user/login.json').then((res) => {
      this.res = res
    })

但是,在vue/cli 3.0以上的版本会发现没有static文件夹,反而多了一个public文件夹
mock数据就需要放在这个文件夹下
就需要这样引入

this.axios.get('/mock/user/login.json').then((res) => {
      this.res = res
    })

第二种方式就是在网上的一些mock网站生成mock数据库,
然后引入
以 www.easy-mock.com 平台举例
在平台创建项目,然后模拟数据,就可以导入了

axios.defaults.baseURL = 'https://www.easy-mock.com/mock/项目生成的地址'
// 获取数据
this.axios.get('/user/login').then((res) => {
      this.res = res
    })

第三种方法就是使用mockjs 实现数据mock
首先在vue项目中输入

 cnpm i mockjs --save-dev

下载mockjs
然后在src文件夹下创建mock文件夹,在mock文件夹下创建JS文件,

import Mock from 'mockjs'
Mock.mock('/api/user/login',{
  "status": 0,
  "data": {
    "id|10001-12000": 0,
    "username": "@cname",
    "email": "[email protected]",
    "phone": null,
    "role": 0,
    "createTime": 1545454525000,
    "updateTime": 1545454525000
  }
});

然后在main.js中引入mockjs

const mock = true
if (mock) {
    require('./mock/api')
}

然后就可以获取模拟数据了

this.axios.get('/api/user/login').then((res) => {
      this.res = res
    })

以上就是三种模拟数据mock的方法.如果还有更好的方法,希望大家能与我分享.