初始 Mock

关于Mock

一. 在Vue中使用Mock

• 安装Mock

npm i mockjs --save-dev

• 在 /mock/userInfo.json5 定义虚拟数据

  {
    id: "@id()",  // 生成随机ID
    name: "@cname()",  // 中文名字
    date: "@date()",  // 日期
    avatar: '@image("200x200", "red", "#fff", "avatar")',  // 头像
    description: '@paragraph()',  // 描述
    ip: "@ip()",  // IP地址
    email: "@email()" // 邮箱
  }
  

• 在 mock/index.js 引用虚拟数据

  // Mock数据入口文件
  const fs = require('fs');
  const path = require("path");
  const Json5 = require("json5");   // json5是第三方插件 需要引入
  const Mock = require("mockjs");
  
  function getJsonFile(filePath) {
    return fs.readFileSync(path.join(__dirname, filePath), 'utf-8')
  }
  
  // 需要返回一个函数
  module.exports = function (app) {
    // 在开发环境初期才使用 Mock
    if (process.env.MOCK === "true") {
      app.get("/user/userInfo", function (req, res) {
        var json = getJsonFile("./userInfo.json5");
        json = Json5.parse(json);
        res.json(Mock.mock(json))
      })
    }
  
  };
  
  

  注: process.env 是 webpack 在不同运行模式下存放的一些变量

• 在 .env.development(在项目根路径下) 中进行开发时环境的配置

  该文件下定义变量在 打包正式运行之后都会消失

  MOCK=true
  

• 在 vue.config.js 进行访问拦截

  module.exports = {
    devServer: {
      port: 8848,
      before: require("./mock/index.js"),
    }
  };
  

• 测试用例

  axios.get("/user/userInfo").then(res => {
      console.log(res.data);
      // console.log(res);
  })
  

二. 在jQuery项目中使用Mock

• 应用Mock.js

• 引入mockjs 的数据处理文件

• 在 mock/index.js 文件中

// 其中需求声明接口请求的路径, 以及请求的方法, 返回的参数
Mock.mock('/user/userInfo', 'get', {
  id: "@id()",  // 生成随机ID
  name: "@cname()",  // 中文名字
  date: "@date()",  // 日期
  avatar: '@image("200x200", "red", "#fff", "avatar")',  // 头像
  description: '@paragraph()',  // 描述
  ip: "@ip()",  // IP地址
  email: "@email()" // 邮箱
});

• 在主逻辑应用该Mock提供的接口

$.ajax({
      url: "/user/userInfo",
      method: "GET",
      type: "GET",
      dataType: 'json'  // 声明返回的数据类型是json类型, 否则默认为字符串或者后端额外声明
    }).then(function (res) {
      // var json = JSON5.parse(res); // 如果返回的是字符串的JsonString, 可以用Json5进行解析
      // console.log(json);
      console.log(res);
    })

注: json5 解析是第三方工具包

在正式的应用中, 可以加入一个全局变量来控制 Mock.mock是否运行