使用mock

我将我使用mock的心得记录一下，在前后端分离的趋势下，我们原有的开发流程已经变更，所以前端在进行开发时往往 因为接口的时间而浪费，所以出现了mock方便我们前端自行模拟接口进行开发提升效率

首先我们需要的工具有两种第一个json5还有一个就是mock需要npm装包  接下来就是vscode一个插件JSON5 syntax

安装
（1）npm install axios --save
（2）npm install mockjs --save-dev
（3）npm install json5 --save-dev 

首先创建这两个文件

index.js

const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
const JSON5 =   ('json5')

// 读取json文件
function getJsonFile (filePath) {
  let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
  return JSON5.parse(json)
}
// 返回一个函数
module.exports = function (app) {
  // 监听http请求
  // if (process.env.MOCK == true) {
  app.get('/user/userSteam', function (rep, res) {
    // getJsonFile方法定义了读取json文件
    let json = getJsonFile('./userInfo.json5')
    // 将json传入Mock.mock方法中，生成的数据返回浏览器
    res.json(Mock.mock(json))
  })
  // }
}

//userInfo.json5
{
  id: '@id()', // 得到随机id，对象
  username: '@cname()', // 随机生成中文名字
  date: '@date()', // 随机生成日期
  avatar: "@image('200x100', 'red', '#FFF', 'avatar')", // 生成图片，参数size,bg,textcolor,text
  description: '@paragraph()', // 描述
  ip: '@ip()', // ip地址
  email: '@email()'
}

vue.config.js

devServer: {
    before: require('./src/mock/index.js'),
    open: true,
    host: '1.2.2.13', ip地址
    port: 8080,
    hotOnly: true,
    watchContentBase: true,
    proxy: {
      "/api": {
        target: "http://1.1.2.13:8080",
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

最外层创建一个.env.development文件

MOCK = true

使用

getList() {
      this.axios.get('/user/userSteam').then((res) => {

　　　　　console.log(res);

      }).catch((err) => {
        console.log(err);
      });
    }

第二种就简单的多了那就是实用fastmock官网不需要去学习mock使用直接去网站生成你的接口就可以了不需要下在mock或者json的东西直接生成