06-快速上手mockjs---免费的仿真接口

最新推荐文章于 2024-01-05 17:34:04 发布

原创最新推荐文章于 2024-01-05 17:34:04 发布 · 414 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#mockjs #前端接口

Ajax 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了MockJS的基本概念和用途，它能帮助前端开发者在后端接口未完成时快速模拟数据。通过vue-cli和axios创建项目，详细讲解了MockJS的安装、引入和使用步骤，包括Mock.mock()方法的参数说明。示例中展示了如何模拟包含多个属性的数据，如姓名、头像、地址和关键字等，以便于前端页面的开发和测试。

一、mockjs介绍

相信很多小伙伴都有和我一样的经历，想写一个前端的网站，但又没有接口。自己不会后端或者写一个接口太过于麻烦了，老是去求助别人或者买一个接口也不是一个好办法。

此时我们就可以使用mockjs来帮我们快速模拟接口的一些数据，并提供接口给我们的前端，但注意这里的的数据不是真实的，是随机生成的。

ps：mockjs真的很方便，上手简单，但功能很强大，极力推荐

官方中对mockJS的作用解释有以下几点：

生成随机数据，拦截Ajax请求
前后端分离，让前端可以在接口API未出的情况下进行独立开发
拦截Ajax请求，返回模拟的响应数据
支持随机生成文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
加粗样式通过随机数据，模拟各种场景

官网链接

二、快速上手

1、前期准备

我在这里为了更加还原前端的项目，我采用了vue-cli帮助我们快速建立项目，并用axios帮我们进行网络的请求管理。
如果不会vue又想和我写法一样的同学们，当然我们也可以利用原生js和ajax中原生的XMLHttpRequests进行数据的请求，用的途中有问题可以随时和我讨论。

以下我重点放在mockjs上面。

2、mockjs使用实例

2.2.1、安装mockjs

打开项目文件夹所在的终端或者 cmd ，并输入npm install mockjs

在这里插入图片描述

2.2.2、引入mockjs

import Mock from 'mockjs'

在这里插入图片描述

2.2.3、将mockjs导入main.js文件中，我们就可以直接去取接口了

import './mock/index.js'

2.2.4、创建mockjs并使用

我们主要使用Mock.mock( rurl?, rtype?, template|function( options ) )来模拟后端的接口参数含义如下

rurl(可选)：模拟的接口URL 字符串或 URL 正则
rtype(可选)：模拟的接口请求，可以是post、get、put等等
template(可选)：模拟的数据
function( options )(可选)：生成响应数据的函数。

注意：

以下的value|数字：数字可以是单个数字，代表生成数字条数据，也可以是区间，比如1-10，代表随机生成1-10条数据
@变量(数字)：这里的数字代表多少，比如 @cname(3) 代表生成的名字为3个字，以下仅仅列出常用的，更多用法请查阅官网
下面都是@c变量名()：这 c 代表的生成的是中文，如果去掉默认生成英语

import Mock from 'mockjs'

///\/jun\/mo\/xiao/对其进行转意,只要url包括其中的数据就行，防止我们git请求后加的参数对我们的接口产生影响
Mock.mock('/\/jun\/mo\/xiao/', 'get', {
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1,
        //@cname()：可以帮助我们模拟名字数据
        'name': "@cname()",
        //@cname()：可以帮助我们模拟图片数据
        /**
         * 第一个参数：代表图片大小，注意这里是小写的x
         * 第二个参数：图片的颜色
         * 第三个参数：文字的颜色
         * 第四个参数：图片的类型jpg,jepg,png等
         * 第五个参数：图片上的文字
         */
        'headPortrait': "@image( '50x50', '#ffao7a', '#ffbbff', 'jpg', '君莫笑' )",
        //@city()：可以帮助我们模拟城市名的数据，true代表省份+市，如果不写默认false，则只有市
        'address': '@city(true)',
        //@cword()：可以帮助我们模拟单词的数据
        'keyWord': '@cword()',
        //@csentence()：可以帮助我们模拟句子的数据
        'descript': '@csentence()',
    }]
})

在这里插入图片描述