Vue+Mock.js，模拟接口数据

博主： leesong
发布时间：2023 年 04 月 03 日
341 次浏览
暂无评论
3620字数
分类：学习记录

# **前言：**

**解决前端在开发过程中过度依赖后端接口的问题，可以引入****`mock.js`**进行数据模拟

# **过程：**

## 一、安装相关依赖

```
npm install axios --save  ## 安装axios
npm install mockjs --save-dev  ## 安装mockjs
npm install json5 --save-dev  ## 安装json5
```

**`axios`**通常用于生产环境和开发环境中，使用axios发送ajax

**`mockjs`**通常只用于开发环境中，产生随机数据

**`json5`**通常只用于开发环境中，解决json文件，无法添加注释问题

## 二、新建mock文件夹

![image-2.png](https://blog.leesong.top/usr/uploads/2023/08/778962182.png)

**mock文件夹目录分析**

**`index.js`**读取json文件以及返回数据

```
const fs = require("fs");
const path = require("path");
const Mock = require("mockjs");
const JSON5 = require("json5");

// 读取json文件
function getJsonFile(filepath) {
  // 读取指定json文件
  var json = fs.readFileSync(path.resolve(__dirname, filepath), "utf-8");
  return JSON5.parse(json);
}

// 返回一个函数
module.exports = function (middlewares) {
  if (process.env.MOCK == "true") {
    // 监听http请求
    middlewares.unshift({
      name: "mock",
      // `path` 是可选的
      path: "/user/userInfo",
      middleware: (req, res) => {
        let json = getJsonFile("./userinfo.json5"); //mock数据的模板，自己新建。
        res.send(Mock.mock(json));
      },
    });
    return middlewares;
  }
};
```

**`testJSON5.js`**用于解析JSON5格式

```
const fs = require("fs");
const path = require("path");
const JSON5 = require("json5");

var json = fs.readFileSync(path.join(__dirname, "./userInfo.json5"), "utf-8");
console.log(json);

var obj = JSON5.parse(json); //parse 将字符串转换成对象
console.log(obj);
```

**`testMock.js`**用于测试数据模板

```
const Mock = require("mockjs");

var userInfo = Mock.mock({
  id: "@id()", //得到随机的id
  username: "@cname()", //随机生成中文名字
  date: "@date()", //随机生成日期
  avator: "@image('200x200','#50B347','#fff','avatar')", //生成图片，参数：size,background,foreground,text
  description: "@paragraph()", //描述
  ip: "@ip()", //IP地址
  email: "@email()", //email
});
console.log(userInfo);
```

**`userInfo.json5`**内置数据模板用于模拟数据

```
{
    id: "@id()", //得到随机的id
    username: "@cname()", //随机生成中文名字
    date: "@date()", //随机生成日期
    ip: "@ip()", //IP地址
    email: "@email()", //email
}
```

## 三、在vue.config.js配置devServer服务

```
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true,
    setupMiddlewares: require("./src/mock/index.js"),
  },
});
```

## **四、使用axios获取mock模拟数据**

```
<template>
  <div class="hello">
    <p>{{ content }}</p>
  </div>
</template>

export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      content: "",
    };
  },
  mounted: function () {
    axios
      .get("/user/userInfo")
      .then((res) => {
        this.content = res.data;
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>

<style scoped lang="scss">

</style>
```

![image-4-1024x476.png](https://blog.leesong.top/usr/uploads/2023/08/224992913.png)

**控制台输出获取的模拟数据**

## **五、移除mockjs**

**采取项目环境变量的方式对是否使用mockjs进行控制**

**在mock文件夹下的****`index.js`**中使用以下判断语句：

```
if (process.env.MOCK == "true") {
  ···
}
```

**在项目根目录下新建**`**.env.development**`文件，添加**`MOCK`**控制语句

```
MOCK=true
```

**当使用后端提供的接口获取数据时，只需要改为****`false`**即可移除**`mockjs`**

**此处环境变量无法获取，为undefined，尚未解决，除此之外正常使用**