Vue中使用Webpack5+mockjs模拟数据

前言

学习视频【黑马程序员】mock快速入门教程【配套资料+源码】_哔哩哔哩_bilibili总结出的笔记

我用的node版本为14.16.1

一、创建vue项目

vue create mock-demo

二、安装依赖

1. 安装axios

   npm install axios --save
   

2. 安装mockjs

   npm install mockjs --save
   

3. 安装json5**（在我这个案例里面装一下）**

   npm install json5 --save-dev
   

三、创建mock文件夹

在根目录下面，也就是在mock-demo里面

1. 创建testMock.js文件

   1. 引入

      const Mock = require('mockjs')
      

   2. 生成id

      let id = Mock.mock("@id");
      console.log(id)
      

      1. 运行在命令行

         node testMock.js
         

         记得进入mock目录再去运行

   3. 可以查看可以模拟数据的类型：Mock.js (mockjs.com)

   4. 生成对象类型数据

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

2. 创建userInfo.json

   1. 改名为userInfo.json5

   2. 添加拓展JSON5 syntax（解决json里面没办法加注释问题）

   3. {
        id: "@id()", // 得到随机的id， 对象
        username: "@cname()", // 随机生成中文名字
        date: "@date()", // 随机生成日期
        avatar: "@image('200x100', 'red', '#fff', 'avator')", // 生成图片，参数：size, background, foreground, text
        description: "@paragraph()", // 描述
        ip: "@ip()", // IP地址
        email: "@email()", // email
      }
      

3. 新建testJson5.js

   1. 命令行运行此文件，打印出来是字符串

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

   2. 命令行运行此文件，打印出来是对象

      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);
      console.log(obj);
      

      我们要的是对象不是字符串，所以取第二种

四、查看Webpack中文档

DevServer | webpack 中文文档 | webpack中文文档 | webpack中文网 (webpackjs.com)

五、配置vue.config.js

vue.config.js在根路径下面，没有的话自己创建一个

1. webpack5版本为

   module.exports = {
     // ...
     devServer: {
       setupMiddlewares: (middlewares, devServer) => {
         if (!devServer) {
           throw new Error("webpack-dev-server is not defined");
         }
         const mockMiddleware = require("./mock/index.js");
         mockMiddleware(devServer.app);
         return middlewares;
       },
     },
   };
   

2. webpack4版本为

   module.exports = {
       before: require('./mock/index.js')
   }
   

六、封装一个中间件

1. 在Mock文件夹下创建index.js

   const fs = require("fs");
   const path = require("path");
   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 (app) {
     // 监听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));
     });
   };
   

七、在HelloWorld.vue文件中

1. 发起网络请求

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

八、运行项目

npm run serve

1. 打开调试可以看见控制台有打印出数据
2. 打开网络（和控制台同一行）
   1. 名称里面有个userinfo
   2. 点击里面有个响应就有数据

九、查看环境变量，设置环境变量

（如果后端给了数据就不要模拟数据了）：模式和环境变量 | Vue CLI (vuejs.org)

由于是vue-cli-service serve运行命令，那就在根目录(src同级目录)创建.env.development文件

1. MOCK=true
   

2. mock夹里的index.js（判断环境）

   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));
       });
     }
   };
   

3. 修改MOCK=false，重新运行项目试试看