众所周知,在许多人眼中,前端是没有后端就活不下来的,因为前端最重要的一部分就是数据交互,没有数据,没有接口那前端怎样干活呢,这不,mockjs就产生了

当我们拿到一个新的业务的时候,前端和后端只要商量好就可以同时进行开发了。下面就详细说一下mock是怎样使用的吧👇👇👇

I’m mockjs 的官方大大🤪🤪🤪

First:

首先我创建了一个vue项目,然后下载axios,mockjs和json5。下载json5的主要原因是解决json文件没有办法添加注释的问题,说白了,就是下载不下载无所谓,但是axios和mockjs是必须要下载的。

在这里插入图片描述

Then :

我又创建了一个文件夹,是mock,在mock里面创建一个js文件
在这里插入图片描述
然后:

//导入mock模块
const Mock=require('mockjs')
//根据mock的定义产生数据
 let id = Mock.mock('@id')
console.log(id);

我怎样看ID:打开终端,进入我刚刚创建的mock文件夹,然后,node test
步骤是:打开终端–cd 创建的文件夹-- node js文件就可以正确打开了。
在这里插入图片描述
这就是生成随机的id,是不是很简单,然后后台一般都是返回对象,这咋操作?

// 定义一个对象
var obj = Mock.mock({
    id:"@id()",//随机id
    username:"@cname()",//随机中文名字
    date:"@date()",//随机生成日期
    avatar:"@image('')",//图像
    description:"@paragraph()",//描述
    ip:"@ip()",//ip
    email:"@email()"//email
})
console.log(obj);

在这里插入图片描述
mock文档

但是这种mock的方法是最简单的,但是确是一个超级大bug,因为mock数据的不确定性很大,所以往往不会直接使用mock,公司一般会用yapi这种工具,前端后端就可以直接使用,也更加方便呦~~

Logo

前往低代码交流专区

更多推荐