Vue3之Mockjs的使用

01 Mockjs的特性

为什么mockjs在前端这么受欢迎呢，首先它有很多特性，如下：

数据类型丰富
支持生成伪随机数据，如文本、数字、布尔值、日期、邮箱、链接、图片、颜色等等
拦截 Ajax 请求
不需要修改代码，就可以拦截 Ajax 请求，返回模拟的响应数据，安全便捷
没有接口文档，也能造数据
当前端开发程序员写好了接口文档，没有实现接口文档，先自己造数据，模拟后端，开发前端的功能
切换接口服务器
等待后端接口做好，和后端联调，更改baseURL实现切换接口服务器

02 Mockjs的安装

安装：npm i mockjs -D

03 Mockjs的使用

1. 定义mock.js

2. 在main.js 导入import ‘@/mock/mock.js’

3.导入 mock
在script标签中导入import Mock from ‘mockjs’

04 Mockjs方法

Mockjs其中有很多方法，这里列举几个常用的

Mock(url,methd,data)Mock(url,data)Mock(url,method,function(options){ return {data数据}
})

05 Mockjs综合案例

Mock.vue代码段：

<template><div><h1>mock数据</h1><div v-for="item in list" :key="item.id"><p>{{item.name}}</p><p>{{item.now}}</p><p>{{item.add}}</p><img :src="item.pic" alt=""></div></div>
</template><script setup>import {ref} from 'vue'import request from "@/utils/request.js"const list = ref([]);request.get("/api/random?name=小明&age=18").then(res=>{console.log(res.data,"random")list.value = res.data.list;})request.get("/api/getData").then(res=>{console.log("mockdata",res.data);})
</script>

Mock.js代码段：

// 导入mockjs
import Mock from 'mockjs';
import qs from 'qs'
// 拦截 接口地址/api/getData  拦截get方法
// 并返回数据
Mock.mock(/\/api\/random/,function(options){// console.log(options,"options");var str = options.url.slice(options.url.indexOf("?")+1);var elem = qs.parse(str);// 获取问号后面内容console.log(str);return Mock.mock({status:0,name:elem.name,"list|10":[{"id|+1":1234,"name":"@cname",//随机中文名"age|1-200":1,//生成1-200的随机数"price|200-500.2-5":1,//生成小数"star|1-5":"★",//字符串随机"chart|2":"我爱我的祖国","love|1":true,//随机布尔值"girl|2":["小红","小黄","小梅","小兰"],//随机数组（1随机1个,2复制2份）,"wife":{"h|150-190":1,"w":45,"weight|85-150":1,"money|1000-9999":1},//对象"aprice":function(){return this.price+this.name}, //函数"tel":/1\d{10}/,"pic":function(){return Mock.Random.dataImage('200x100', this.name)},"date":"@date(yyyy/MM/dd)","time":Mock.Random.time(),"pdate":"@datetime()","now":"@now()","des":"@cparagraph(1,3)","keyword":"@cword(3,5)","title":"@ctitle(5,12)","url":"@url()","email":/[a-z]{4,12}@\.(126|163]qq)\.(com|cn|org)/,"ip":"@ip","add":"@county(true)"}]})
})Mock.mock("/api/getData","get",function(){return {"name":"mumu","age":18}
})

Vue3那些实用小知识~相关推荐

VC实用小知识总结 (一)，转http://blog.csdn.net/myiszjf/article/details/10007431
在上一篇中,我们以经介绍了程序的流程和框架,在本篇将详细讨论各个功能的实现主要包括 1.获取磁盘信息 2.获取目录信息 3.获取文件信息 4.运行指定文件 5.删除指定文件 6.删除指定目录 7.创建 ...
【实用小知识】常用的软件测试方法
随着软件测试技术的不断发展,测试方法也越来越多样化,针对性更强:选择合适的软件测试方法可以让我们事半功倍.以下是一些常用的软件测试方法: β测试_Beta测试 β测试,英文是Beta testing. ...
C#实用小知识：字符串里的换行
从前,用asp.net core写了一个给客户发交易明细的应用,每天发一次,因为是csv格式,当时用的是StringBuilder来一行一行组装数据,组装完后,EMali或SFTP给客户. 后来,为节 ...
Maven在Eclipse中的实用小技巧
前言我们在开发的工程中很多都是Maven项目,这样更加便于我们jar包的管理.而我们一般使用的IDE都是Eclipse,由于我们在日常的开发过程中会经常要用到一些Maven的操作,所以我今天主要跟大 ...
计算机比较实用的知识,电脑小知识：最常用的10个电脑技巧
很多时候,我们在操作电脑的时候会遇到一些问题,有时候一些小技巧可以简单的解决问题,下面就给大家提供一些参考内容. 1.有时候要离开电脑去做其他的事情,又不想别人偷看自己的电脑,按下Windows键和L ...
中鑫吉鼎|13个理财小知识好懂实用，大人小孩都该知道
1.建立10个赚钱理由梦想清单,也就是"赚到了钱最想实现的心愿",并在其中挑选3个重要的. 2.实现理财前期步骤: ①制作梦想相册,将梦想的实质内容可视化. ②每天看梦想相册,时时 ...
Python小知识 | 这些技能你不会？(一)
阅读文本大概需要 8-10 分钟,动手才能学到更多东西. ✪ Python小知识 ✪ 最近在看<零压力学Python>,巩固一下基础知识,意外收获到很多常用却不一定被注意的小知识,分享给大 ...
.gpg 进程 linux,小知识之Linux系统中的最大进程数，最大文件描述，最大线程数...
今天来了解一下linux里面的一些小知识: (一)Linux系统中最大可以起多少个进程? (1)32位系统中最多可以起32768个进程 (2)64位系统中最多可以起2的22次方(4194304)约42 ...
Android小知识10则(上)(2018.8重编版)
Android小知识10则(下) 目录前言横竖屏锁定不同分辨率的图标将字符串写在资源文件中为AlertDialog设置点击监听 ProgressDialog了解一下最后前言 Androi ...

Vue3那些实用小知识~

Vue3之Mockjs的使用

01 Mockjs的特性

02 Mockjs的安装

03 Mockjs的使用

04 Mockjs方法

05 Mockjs综合案例

Vue3那些实用小知识~相关推荐

最新文章

热门文章