mock数据简单应用

按以下提示，拷贝代码可、快速、直接得到一个对象数组的请求

更多mock格式，请去官网查看

1.安装

// 安装axios请求
npm install axios  

// 使用mock产生水机水机数据
npm install mockjs

// 使用json5解决json文件，无法添加注释(不写注释可忽略)
npm install json5

2，根目录建立mock/index.js文件

const fs = require("fs"); // 读取
const path = require("path"); // 文件路径
const Mock = require("mockjs"); // mockjs 导入依赖模块
const JSON5 = require("json5"); // json5

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

// 返回一个函数
module.exports = function(app) {
  app.get("/user/userinfo", function(_rep, res) {
    // 没次响应请求时读取mock data的json文件
    // getJsonFile方法定义了如何读取json文件并解析成数据对象
    var json = getJsonFile("./userInfo.json5");
    // 将json传入 mock.mock 方法中 生成数据返回给浏览器
    res.json(Mock.mock(json));
  });
};

3，根目录建立mock/userInfo.json5文件

记得装一个json5插件，不然json5代码不会高亮，也不能注释，也不能key不带冒号)

// {
//     id: '@id()', // 随机id
//     username: '@cname()', // 随机名字
//     data: '@date()', // 随机日期
//     img: "@image('200x100', '#50B347', '#FFF', 'Mock.js')", // 随机图片 大小 背景颜色  字体颜色 文字
//     cparagraph: '@cparagraph()', // 随机描述
//     ip: '@ip()', // 随机ip地址
//     email: '@email()', // 随机邮箱
// }
{
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  "list|1-10": [
    {
      id: "@id()", // 随机id
      username: "@cname()", // 随机名字
      data: "@date()", // 随机日期
      img: "@image('200x100', '#50B347', '#FFF', 'Mock.js')", // 随机图片 大小 背景颜色  字体颜色 文字
      cparagraph: "@cparagraph()", // 随机描述
      ip: "@ip()", // 随机ip地址
      email: "@email()", // 随机邮箱
    }
  ]
}

4，根目录建立vue.config.js文件

首先解释一下 devServer:{}下的 before() 方法，项目每次请求，都可以通过这个中间件拦截到，中间就可以做一些操作

module.exports = {
  devServer: {
    before: require("./mock/index.js") // 引入mock/index.js
  }
};

5.页面使用

<template>
  <div>
    213
  </div>
</template>

<script>
import axios from "axios";
export default {
  mounted() {
    axios
      .get("/user/userinfo")
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err, 123);
      });
  }
};
</script>

<style></style>

标签：ip,json5,js,json,随机,应用,简单,mock
来源： https://blog.csdn.net/weixin_44955769/article/details/113238634