Mock 使用方式 + 在 Vue 项目中使用 Mock

Mock + Nginx + Cypress 专栏收录该内容
2 篇文章 0 订阅


写下博客用于自我复习、总结。
如有错误之处,请各位大佬指出。
学习资料来源于:尚硅谷


Mock 介绍

在前后端开发过程中,后端进行接口开发,前端使用对应接口从数据库获取前端想要展现的数据。对于后端来讲,它们需要根据需求文档,确定要写的接口的功能。有时,虽然接口还没有写出来,但是相关接口文档已经写出来了。这时前端如果想要调用接口,但是接口还没有完成,前端开发人员也就只能含泪上班摸摸鱼了。

那在开发过程中,为了避免这样的情况发生,现在前端已经能够独立于后端进行开发,也就是前端开发人员可以自己根据接口文档去模拟假数据。这个问题的解决方案就是使用第三方库 mock.js。它将可以用来生成随机的数据并拦截Ajax请求

在这里插入图片描述
那么为什么要学习了解并在一些情况下考虑选择使用 Mock 来模拟数据呢?我自己把测试数据写死,我看也挺好,再安装第三方库是不是麻烦了点?

对于上述疑问,不妨先来看看在 Mock 官网给出的六大特性。

在这里插入图片描述
简单叙述一下:

Mock 要做的是前后端分离,从而让前端人员能够独立于后端进行开发。但是如果在前端模拟接口十分麻烦,那就得不偿失了。但是 Mock 完全不用担心,它的用法十分简单。而且,当我们想使用 Mock 时,不需要修改既有的代码,只需要让其拦截 Ajax 请求即可。想正常发送 Ajax 请求调用接口时,只需要不让 Mock 拦截请求即可。除此以外,后端提供的数据,每次都是相同的。如果在某种情况下,想测试不同数据的效果,让后端同事去数据库修改数据,一是麻烦,二是不够随机性。而 Mock 可以在每次拦截时都返回一组随机数据,模拟各种场景。它支持生成随机文本、数字、布尔值、日期、邮箱、链接、图片、颜色等各种各样的数据。这还不算完,如果想自定义随机其他类型数据,我们也可以对其进行扩展,而且扩展方式也很简单,扩展的时候还支持自定义函数和正则表达式。总结来说,功能性极强,对前端开发人员很友好。

本篇文章将主要介绍如何在 Vue 项目中使用 Mock 拦截请求并返回模拟数据


搭建测试项目

1、找一个空文件夹,打开 cmd 命令行,执行命令: vue create xxx
(xxx:文件夹名称随意)
在这里插入图片描述
2、随后在接下来的选择中,为了演示就用 Vue2 的默认项目即可。
在这里插入图片描述
3、在通过漫长的等待后,终于创建成功。
在这里插入图片描述
4、此时进入项目,安装相关依赖:

使用 axios 发送 ajax:cnpm install axios –save

使用 mockjs 生成随机数据:cnpm install mockjs –save-dev

在这里插入图片描述
5、测试项目创建完成。


mock.js 模拟数据的基础使用方式

在 Vue 项目中使用 Mock 之前,先简单介绍一下相关使用方式。

想要测试一下基础方法,我们可以在刚才的项目文件夹下,创建一个 mock 文件夹,里面包含一个 js 文件,用来测试使用基础使用方式。
在这里插入图片描述
想要测试 mock 的基础语法,我们只需要在 testMock.js 文件中包含以下基础内容:

// 先用 require 导入 mockjs
const Mock = require('mockjs')
// 随后就可随意测试 mockjs 语法
let id = Mock.mock('@id')
console.log(id);

随后使用 node xxx (xxx:js文件名)的形式,运行即可看到输出结果。此时已经可以看到上述代码的运行结果。
在这里插入图片描述
这就是最基本的模拟数据方法,使用的 Mock.mock。它将根据数据模板生成模拟数据。

对于 Mock.mock 中可选用的用法和可用工具类可参考官方文档。官方文档介绍的很详细,案例也全部都展现了出来,很容易理解:

http://mockjs.com/examples.html
https://github.com/nuysoft/Mock/wiki

在这里就不将它们全部复制过来了。我们只需要在需要时查看官方文档,寻找相关用法即可。为了之后方便查看,在这里只展示几个用法。

const Mock = require('mockjs')
const fs = require('fs')

let obj = Mock.mock({
    id: "@id()",                   // 得到随机的id
    username: "@cname()",          // 随机生成中文名字
    date: "@date()",               // 随机生成日期
    avatar: "@image('200x200','red','#fff','avatar')",   // 随机生成图片
    description: "@paragraph()",   // 随机生成描述
    ip: "@ip()",                   // 随机生成ip地址
    email: "@email()",             // 随机生成email

    // 范围内,随机重复字符串次数
    "string|1-10": "xxx",
    // 范围内,随机生成数字
    "number|1-100": 100,
    // 随机生成布尔值
    "boolean|1": true,
    // 在对象中,抽取随机数个数据
    "object|1-4": {
        "110000": "北京市",
        "120000": "天津市",
        "130000": "河北省",
        "140000": "山西省"
    },
    // 在数组中,抽取随机数个数据
    "array|1-10": [
        {
            // 抽出的每个数据中的对象将轮流从该数组中抽取
            "name|+1": [
                "Hello",
                "Mock.js",
                "!"
            ]
        }
    ],
    // 根据正则表达式,随机生成自定义数据
    'regexp': /[a-z][A-Z][0-9]/,
})
fs.writeFile('./result.json',JSON.stringify(obj),()=>{
    console.log('done')
})

我们可以看到效果:
在这里插入图片描述

算上上面的用法,共有三种生成随机数据的形式:

let Random = Mock.Random
Random.email()
// => "n.clark@miller.io"
Mock.mock('@email')
// => "y.lee@lewis.org"
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

第一种是直接拿到对应工具类的对象,并直接调用其中方法,比如 Random 是一个工具类,用于生成随机数据。

第二种是使用Mock.mock,直接使用对应方法的 @ 即可,不用刻意调用某个工具类。但是这种方式和第一种方式一样,输出的是个字符串。

第三种依然使用Mock.mock,但是会以对象的形式返回随机数据。由于后端接口返回的数据将会是JSON格式,所以为了模拟数据,通常用这种方式写。


Vue 项目中使用 mock.js 拦截数据

如果想要在项目中使用 mock,首先需要在项目根目录下找到或者新建 vue.config.js。其中的内容为:

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

随后在对应文件夹中,新建一个 index.js。
在这里插入图片描述
其中的内容为:

const Mock = require('mockjs'); // 导入依赖模块

// 返回一个函数
module.exports = function(app){
    // 监听 http 请求
    app.get('/user/userinfo', function(rep, res){
        // 设置要返回的数据
        let json = {
            id: "@id()",                    // 得到随机的id
            username: "@cname()",           // 随机生成中文名字
            date: "@date()",                // 随机生成日期
            avatar: "@image('200x200','red','#fff','avatar')",  // 生成图片                  
            description: "@paragraph()",    // 描述
            ip: "@ip()",                    // ip地址
            email: "@email()",              // email
        }
        res.json(Mock.mock(json));
    });
}

此时,我们就可以去 Vue 组件中发送 axios 请求,去获取 mock 提供的数据。

1、首先运行项目: npm run serve

2、随后在任意一个 Vue 组件里发送请求:

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

3、测试成功:
在这里插入图片描述


后端接口写好后,mock.js 的移除处理

最终不要忘记,mock.js 只是用来模拟接口。当后端接口完成后,就需要将 mock.js 从项目中“移除”。但是所谓移除不是单纯的把之前的拦截文件去掉或者注释掉。之前提到过 mock 的一个特性,就是开发无侵入,我们可以利用 Vue CLI 的特性,给一个判断接口是否存在的功能。具体说明:

1、在package.json中,我们可以看到项目运行的命令。
在这里插入图片描述
2、这些命令会对应着 Vue CLI 项目中不同的模式:
在这里插入图片描述
3、综上所述,我们使用的项目运行 npm run serve 会对应着 development 模式。我们移除 mock 的处理,只需要通过设置 development 模式的环境变量,就可以实现。具体来看:

(1)首先查看环境变量的设置:
在这里插入图片描述
我们选用 .env.[mode] 这种用法,即:在指定的模式中被载入。

(2)在项目的根目录下,创建 .env.development 环境变量文件( file 类型即可),其中的内容如下:
在这里插入图片描述
(3)在我们使用 mock 模拟接口的 index.js 文件中,我们只需要做以下处理即可:

module.exports = function(app){
    // 增加判断条件:
    if(process.env.MOCK == 'true'){
        // 监听 http 请求
        app.get('/user/userinfo', function(rep, res){
            // 设置要返回的数据
            let json = {
                id: "@id()",                   // 得到随机的id
                username: "@cname()",          // 随机生成中文名字
                date: "@date()",               // 随机生成日期
                avatar: "@image('200x200','red','#fff','avatar')",   // 生成图片                
                description: "@paragraph()",   // 描述
                ip: "@ip()",                   // ip地址
                email: "@email()",             // email
            }
            res.json(Mock.mock(json));
        });
    }
}

(4)随后,只需要调整这个环境变量值,就可以决定 mock 是否会拦截请求了。测试成功:
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值