mock在vue中的使用

安装项目

1 安装vue项目  vue creat mock-dome
2 安装 axios mock  json5
    npm install axios mockjs json5 -s

创建mock

在项目根目录下创建mock文件夹 并创建在mock文件夹下index.js

创建vue.config.js引入mock/index.js

vue.config.js 引入代码

module.exports = {
  devServer: {
    before: require('./mock/index.js')
  }
}

编写json5数据

在mock文件夹下创建userInfo.json5文件（跟写json文件差不多属性值可以参考mock官网来写数据都是自动生成的）
代码如下

{
  id: "@id()",//得到随机id ,对象
  username: "@cname()",//随机生成中午名字
  date: "@date()",//随机生成日期
  avater: "@image('200','red','#fff','avatar')",//生成图片参数
  description: "@paragraph()",//描述
  ip: "@ip()",//ip地址
  email: "@email()"//email
}

编写mock代码

可以直接用这套代码
如果需要更多的接口 可以在module.export里进行编写
const fs = require('fs');
const path = require('path');
const JSON5 = require('json5');
const Mock = require('mockjs');
// 读取json文件
function getJsonFile(filePath){
  // 读取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname,filePath),'utf-8');
  console.log(JSON5.parse(json));
  //解析并返回
  return JSON5.parse(json)
}
// getJsonFile('./userInfo.json5')
//返回一个函数
module.exports = function(app){
  // 监听http请求
  app.get('/user/userinfo',function(req,res){
    //每次响应请求时读取mock data的json文件
    // getJsonfile 方法定义了如何读取json文件并解析成数据对象
    var json = getJsonFile('./userInfo.json5');
    console.log(res.json(Mock.mock(json)));
    // 将json传入 Mock.mock方法中，生成的数据返回给浏览器
    res.json(Mock.mock(json))
  })
}

在vue中使用数据

  mounted: function(){
    axios.get('/user/userinfo')
    .then(res=>{
      console.log(res);
    })
    .catch(err=>{
      console.log(err);
    })
  }