MockJS的使用

夏殿灬青葛石

已于 2022-10-30 16:02:00 修改

阅读量656

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-10-30 15:44:23 首次发布

本文链接：https://blog.csdn.net/W2398439780/article/details/127578022

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

创建项目

vue cli 创建一个vue2项目
npm install安装axios、mockjs
在这里插入图片描述
在项目中创建mock目录，新建index.js文件

//引入mockjs
import Mock from "mockjs";

//设置延迟时间
Mock.setup({
timeout: 4000
})

//使用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')"

}
})

引入

在main.js中导入mock
在这里插入图片描述
在根组件App.vue中导入axios
并在组件被挂载完成时【mounted】用axios发送get请求

可以看见mock返回的数据

渲染mock生成的图片

首先在data中定义一个空的img属性，把它的值绑定给img标签的src属性
最后在请求成功时，把响应里data中的data.img属性赋值给this.img
在这里插入图片描述

数据占位符的使用

建议参考文档: link

使用
两种方法

Random.xxx() //使用Random函数
Mock.mock(‘@xxx’) // 使用占位符
注意：其中xxx为random对应方法，也对应@xxx的占位符

3. Random.boolean()   随机布尔值
4. Random.natural( min?, max? )  随机自然数 min-max之间
5. Random.integer( min?, max? )  随机整数min-max之间
6. Random.float()   随机浮点数
7. Random.character( pool? )   随机字母  pool对应有（lower[小写]/upper[大写]/number[数字]/symbol[符号]）
8. Random.string( pool?, min?, max? )   随机字符串
9. Random.range(start?, stop, step?)   随机范围数字组成的数组
10.  Random.date( format? )  随机日期
11.  Random.time( format? )  随机时间
12.  Random.datetime( format? )  随机日期+时间
13.  Random.now( unit?, format? )  当前时间
14.  Random.image( size?, background?, foreground?, format?, text? )  图片占位
15.  Random.dataImage( size?, text? )  生成base64格式图片
16.  Random.color()  随机颜色
17.  Random.rgb()  随机rgb颜色
18.  Random.rgba()   rgba颜色值
19.  Random.paragraph( min?, max? )   段落
20.  Random.sentence()
21.  Random.word( min?, max? )
22.  Random.title( min?, max? )
23.  Random.cparagraph( min?, max? )   中文段落
24.  Random.csentence( min?, max? )   中文句子
25.  Random.cword( pool?, min?, max? )  汉字
26.  Random.ctitle( min?, max? ） 标题
27.  Random.first() 姓
28.  Random.last()  名
29.  Random.name( middle? )  姓名
30.  Random.cfirst()  中文姓
31.  Random.clast()  中文名
32.  Random.cname()  中文姓名
33.  Random.url()  随机URL
34.  Random.domain()  随机域名
35.  Random.protocol()
36.  Random.email()  邮箱
37.   Random.region()
38.   Random.province()  省
39.   Random.city( prefix? )  市   （prefix是否带前缀省，值为boolean）
40.   Random.county( prefix? )  区县  (prefix是否带缀省，市)
41.   Random.increment( step? )  递增

直接@快捷使用
在这里插入图片描述