vue结合插件mock.js使用

傷城~ 2022-12-21 10:55 395阅读 0赞

#### 一、前言 ####

mock.js可以通过随机数据来模拟各种场景，不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则，非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

#### 二、基础语法 ####

> http://mockjs.com/examples.html

#### 三、结合vue使用 ####

##### 1.安装 #####

使用npm安装

npm install mockjs --save

使用yarn安装

yarn add mockjs --save

#### 2.引入mock.js ####

通过vue脚手架搭建的项目，在src目录下创建mock文件夹区分，在mock文件夹下面创建文件index.js,以及模拟接口服务services文件夹，其中index.js内容如下：

// 判断环境不是 prod 或者 preview 是 true 时，加载 mock 服务
    if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') { 
      // 使用同步加载依赖
      const Mock = require('mockjs2')
      require('./services/user')
      Mock.setup({ 
        timeout: 500 // 请求延时时间
      })
      console.log('mock mounted')
    }

在services文件夹下面创建接口模拟服务user.js

import Mock from "mockjs2";
    
    //获取登录
    Mock.mock(/\/api\/user\/login/, "get", { 
      status: 200,
      message: "success",
      data: { 
        id: "@string(10)", // 随机字符串id
        name: "@cname()" // 中文名称
      }
    });
    
    //获取用户列表数据
    Mock.mock(/\/api\/user\/userList/, "get", { 
      status: 200,
      message: "success",
      "data|5-10": [
        // data|n-m 随机生成 多少个
        { 
          "id|+1": 1, // 模拟自增+1
          id: "@increment(1)", // 自增的数字
          name: "@cname()", // 中文名称
          introduce: "@cword(10,20)", // 中文字
          img: "@dataImage(64x64)" // 图片
        }
      ]
    });

在main.js中引入mock

import './mock'

#### 3.使用测试 ####

创建测试页面测试一下

<template>
      <div class="MockTest">
        <button @click="this.getUserInfo">获取用户信息</button>
        <button @click="this.getUserList">获取用户列表数据</button>
      </div>
    </template>
    
    <script>
    import axios from "axios";
    export default { 
      components: { },
      data: function() { 
        return { };
      },
      created() { },
      mounted() { },
      methods: { 
        //获取用户信息
        getUserInfo() { 
          axios.get("/api/user/login").then(res => { 
            console.log(res);
          });
        },
        //获取用户列表数据
        getUserList() { 
          axios.get("/api/user/userList").then(res => { 
            console.log(res);
          });
        }
      }
    };
    </script>

点击获取用户信息，结果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center]

点击获取用户列表数据，结果如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/969cf28514794e1293a5cec932a668d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/126ece6d94af462a8575e4ba5f39c24b.png