文章目录

前言
安装Mock.js 和 axios
Mock.js语法规范
Mock.js在vue中的使用
如何控制mock的开关

前言

随着互联网行业的发展，前后端分离已经成为了行业的主流，也是一种趋势。在这样一种趋势的推动下去开发项目，一定会遇到这样一个问题，后端接口未开发完毕，前端页面如何展示数据呢？这个时候就用到mock.js了。

安装Mock.js 和 axios

npm install --save-dev mockjs
npm install --save axios

Mock.js语法规范

Mock.js常用语法规范: 语法规范
Mock.js 官网：Mock.js
在这里插入图片描述

1. 数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名(name)、生成规则(rule)、属性值(value)：

// 属性名   name
// 生成规则 rule
// 属性值   value
'name|rule': value

属性值是字符串 String

// 通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
'name|min-max': string

// 通过重复 string 生成一个字符串，重复次数等于 count。
'name|count': string

属性值是数字 Number

// 生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型。
'name|min-max': number

// 生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到 dmax 位。
'name|min-max.dmin-dmax': number

示例：
在src/api目录下创建mock.js文件，引入mock.js

// 引入mockjs
const Mock = require('mockjs');

// 生成一个用户名 随机出现1-10次
const username1 = Mock.mock({
    
    
    'username|1-10': '*'
})
// 输出：
// {username: '**'}
// {username: '*******'}

// 生成一个用户名 出现10次
const username2 = Mock.mock({
    
    
    'username|10': '*'
})
// 输出 
// {name: '**********'}

// 生成一个用户的年龄，范围在16-30之间
const age = Mock.mock({
    
    
    'age|16-30': 0
})
// 输出
// {age: 27}
// {age: 19}

// 浮点数 示例
const number = Mock.mock({
    
    
    'number1|1-5.1-10': 1,
    'number2|1-5.1-10': 1.123,
    'number3|2.1-10': 1,
    'number4|2.3': 1,
})
// 输出
/* 
 {
    number1 : 4.96537959,
    number2: 4.123741,
    number3: 2.834512422,
    number4: 2.752
 }
 */

2.数据占位符定义规范

占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。

占位符的格式为：

@占位符
@占位符(参数 [, 参数])

3.常用占位符

下面列出几个常用的占位符：

        id: '@id', //随机id
        title: '@ctitle', // 随机标题 @ctitle中文标题 @title英文标题
        name: '@cname', //随机名称 @name英文名称 @cname中文名称
        nickName: '@last', //随机昵称 @last英文昵称 @clast中文昵称
        phone: /^1[34578]\d{9}$/, //随机电话号码
        'age|11-99': 1, //年龄  属性名(age)、生成规则(rule)、属性值(value) 'age|rule': value
        address: '@county(true)', //随机地址 @county(true)省市县  @county(false)||@county()县||区||-
        email: '@email', //随机邮箱
        isMale: '@boolean', //随机性别
        createTime: '@datetime', //创建时间 可以自定义格式 @datetime(yyyy-MM-dd hh:mm:ss)
        date: '@date(yyyy-MM-dd hh:mm:ss)', // 随机生成日期 也可以自定义格式
        paragraph: '@cparagraph', // 随机描述 @cparagraph中文随机描述 @paragraph英文随机描述
        headPortrait: Random.image('200x100'), //用户头像1
        avatar() {
    
     //用户头像2
            //  # （150~200）（70-110）（70-110）红色色调
            //  # （110~170）（200-225）（200-225）蓝绿色调
            //  # （180-225）（140-255）（120-255） 跨度较大
            const a = '#' + Random.integer(180, 255).toString(16) +
                Random.integer(140, 255).toString(16) +
                Random.integer(120, 220).toString(16)
            return Random.image('100x100', a, ' png ') //dataImage
        },

在这里插入图片描述

Mock.js在vue中的使用

使用mock.js去造数据实际上跟请求真实的后端接口步骤是一样的，也是服务器地址+接口名去请求的，那么我们要先定义接口名跟接口返回的数据，下面我说下大致步骤：

定义接口路由，在接口中并返回mock模拟的数据
二次封装接口，便于管理
页面调用该接口，获取数据

1. 定义接口路由，在接口中并返回mock模拟的数据

现在就是相当于我们在服务器写的代码了，定义接口，跟返回的数据
我们在mock文件夹下新建一个index.js,这个文件也可以放在api文件夹下，也可以放在utils下，根据个人喜好而定，在这个文件中定义接口：

// mock.js
// 引入mockjs
const Mock = require('mockjs');
// 获取mock.Random对象
const Random = Mock.Random

// 定义一个接口名为list的接口
// window.api.baseUrl这个是我在外部文件配置的服务器地址，便于修改，你们如果没有这个需求的话，直接写上去就可以
Mock.mock(window.api.baseUrl + '/list', {
    
    
    code: 0,
    'data|10': [{
    
    
        id: '@id', //随机id
        title: '@ctitle', // 随机标题 @ctitle中文标题 @title英文标题
        name: '@cname', //随机名称 @name英文名称 @cname中文名称
        nickName: '@last', //随机昵称 @last英文昵称 @clast中文昵称
        phone: /^1[34578]\d{9}$/, //随机电话号码
        'age|11-99': 1, //年龄  属性名(age)、生成规则(rule)、属性值(value) 'age|rule': value
        address: '@county(true)', //随机地址 @county(true)省市县  @county(false)||@county()县||区||-
        email: '@email', //随机邮箱
        isMale: '@boolean', //随机性别
        createTime: '@datetime', //创建时间 可以自定义格式 @datetime(yyyy-MM-dd hh:mm:ss)
        date: '@date(yyyy-MM-dd hh:mm:ss)', // 随机生成日期 也可以自定义格式
        paragraph: '@cparagraph', // 随机描述 @cparagraph中文随机描述 @paragraph英文随机描述
        headPortrait: Random.image('200x100'), //用户头像1
        avatar() {
    
     //用户头像2
            //  # （150~200）（70-110）（70-110）红色色调
            //  # （110~170）（200-225）（200-225）蓝绿色调
            //  # （180-225）（140-255）（120-255） 跨度较大
            const a = '#' + Random.integer(180, 255).toString(16) +
                Random.integer(140, 255).toString(16) +
                Random.integer(120, 220).toString(16)
            return Random.image('100x100', a, ' png ') //dataImage
        },
        'number4|1-3.3-10': 2.456,
    }],
})

2. 二次封装接口

在api文件夹下新建test.js，把mock文件夹下我们封装好的index.js（mock接口）引入test.js

import './mock/index.js'
import request from '@/utils/request'


export const getList = (() => {
    
    
    return request({
    
    
        url: '/list',
        method: 'GET',
    })
})

3. 页面调用该接口，获取数据

在页面中引入上面定义好的getList 方法，直接调用，拿到我们模拟的数据

import {
    
     getList } from "@/api/test";
export default {
    
    
  mounted() {
    
    
    this.getList();
  },

  methods: {
    
    
    async getList() {
    
    
      const res = await getList();
      console.log(res);
    },
  },
};

数据如下：
在这里插入图片描述
这样我们就请求成功啦

如何控制mock的开关

我们只是希望在开发环境下使用mock，又或者说是在接口还没好的时候使用mock

新建.env.development，定义环境变量
定义接口路由前，判断当前MOCK环境变量是否为true

module.exports = function (app) {
    
    
    if (process.env.MOCK == 'true') {
    
    
        // 定义接口及接口返回数据
    }
}