Vue学习七：MockJs前端数据模拟

Mock.js 是前端常用的 模拟数据生成库 ，用来不用后端接口，前端自己造假数据开发。

核心作用

前后端分离：后端接口没好，前端先模拟数据开发、调试
生成随机假数据：名字、手机号、邮箱、日期、图片、文字等
拦截 Ajax 请求：替换真实接口，返回模拟数据
数据模板语法简单，易上手

常用随机数据

@cname 中文姓名
@id 身份证号
@phone 手机号
@email 邮箱
@datetime 日期时间
@cparagraph 中文段落
@image 随机图片

一句话总结

Mock.js = 前端假数据生成器 + 接口拦截器，让前端不用等后端。相当于后端的apipost

例子数据如下：

复制代码

//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
Mock.mock('/product/search', {
    "ret":0,
    "data":
    {
        "mtime": "@datetime",//随机生成日期时间
        "score|1-800": 1,//随机生成1-800的数字
        "rank|1-100":  1,//随机生成1-100的数字
        "stars|1-5": 1,//随机生成1-5的数字
        "nickname": "@cname",//随机生成中文名字
        // 生成图片
        "img": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')"
        //生成的数据仅跟|后的规则相关，：后的数据仅确认数据类型
    }
});

核心方法：

Mock.mock( rurl?, rtype?, template|function( options ) )

rurl：表示需要拦截的 URL，可以是 URL 字符串或 URL 正则
rtype：表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template：表示数据模板，可以是对象或字符串
function：表示用于生成响应数据的函数。

设置延迟时间：

复制代码

// 延时400ms请求到数据
Mock.setup({
    timeout: 400
})

// 延时200-600毫秒请求到数据
Mock.setup({
    timeout: '200-600'
})

在mock/index.js配置好mock代码后，需要在main.js中导入mock组件

此处不使用import mock from './mock'是因为在main.js中没有显式的出现mock组件，所以会违反规则报错。此时仅引入mock组件的代码。

在App.vue中配置简单的axios请求，url绑定mock所设置的拦截路径/product/search

复制代码

<script>
import axios from 'axios'
export default {
  name: 'App',
  mounted: function(){
    axios.get("/product/search").then(res => {
      console.log(res)
    })
  }
}
</script>

返回的结果如下：

img图片可访问生成网站路径访问，也可提取到view层直接输出：

若在axios中要插入参数在访问链接中

需要在index.js中添加mock的RegExp方法：在路径中加上".*"表示适配任意变量。

具体使用可参考稀土掘金指南

mockjs 零基础、零门槛、一看就会使用指南【前言】 mockjs生成随机数据，实现前后端分离。此文章详细介绍moc - 掘金