mock在vue项目中的使用 —— json写法

什么是mock

Mock是什么. 可能还有些读者之前并没有接触过Mock，不清楚Mock是个啥。. Mock简单来理解，就是在测试过程中，对于某些不容易构造或者不容易获取的对象，用一个虚拟的对象来创建以便测试。. 而这个虚拟的对象就是mock对象。. mock对象就是真实对象在调试期间的代替品。

以上是百度的解释，我的理解就是：模拟接口
因为在开发中，我们需要ui的设计图以及后端的接口才能开始开发，如果按部就班开发进度就会非常感人。这时候我们就可以通过mock模拟接口，跟后端同步开发，加快开发进度。

mock官网

第一步（创建vue项目，安装插件）

1.创建vue项目

vue create mock-demo

2.安装mock

cnpm i mockjs --save-dev

3.安装axios

cnpm i axios --save

4.安装json5（使用json5解决json文件无法添加注释的问题）

cnpm i json5 --save-dev

第二步（创建mock文件夹）

新建一个mock文件夹（跟src文件同级），mock文件夹内新建index.js文件

// 1.引入文件
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
const JSON5 = require('json5');

//2.读取json文件
function getJsonFile(filePath){
    //读取指定的json文件
    var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
    // 解析并返回
    return JSON5.parse(json);
}

//3.返回一个函数
module.exports = function(app){
    if(process.env.Mock == "true"){// 对环境变量进行一个判断，方便我们替换真实接口
        //监听http请求
        app.get('/user/userinfo', function(req, res) {
            //每次响应请求时读取mock data的json文件
            //getJsonFile方法定义了如何读取json文件并解析成数据对象
            var json = getJsonFile('./userinfo.json5')
            //将json文件传入Mock.mock 方法中，生成的数据返回给浏览器
            res.json(Mock.mock(json));
        });
    }
}

在mock文件夹内新建userInfo.json5文件，在这写入文件格式

{
    id: '@id',
    name: '@cname',
    date: '@date',
    avatar: "@image('200x100', '#50B347', '#FFF', 'Mock.js')", //参数：大小；背景；foreground（文字颜色）；文字 
    description: '@paragraph', // 描述
    ip: "@ip()", // ip地址
    email: "@email",
    introduction: 'I am a super administrator',
}

第三步（配置vue.config.js文件）

在这里进行请求拦截，换成我们mock的数据

module.exports = {
    devServer: {
        before: require('./mock/index.js')// axios 请求拦截
    }
}

第四步（在项目中使用）

<template>
  <div class="home" v-if="data">
    头像: <img :src="data.avatar" alt=""><br>
    姓名：{{data.name}}<br>
    生日：{{data.date}}<br>
    邮箱：{{data.email}}<br>
    IP：  {{data.ip}}<br>
    介绍：{{data.introduction}}<br>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Home',
  data(){
    return {
      data: null
    }
  },
  mounted(){
    axios.get('/user/userinfo').then(res => {
      console.log(res)
      this.data = res.data
    }).catch(err => {
      console.error(err)
    })
  }
}
</script>

第五步（添加环境边境变量）

如果后端接口写完了，如何快速替换真实接口呢？
添加环境边境变量，方便我们替换真实接口
*注意：一个 Vue CLI 项目有三个模式：你需要根据自己的情况进行配置

我的是development 模式用于 vue-cli-service serve，所以我的环境边境变量文件名字是 ：.env.development

Mock=true

并在mock的index.js的函数中进行判断，上面的index.js代码我已经写了

 if(process.env.Mock == "true"){// 对环境变量进行一个判断，方便我们替换真实接口
 	...
 }

补充

项目地址