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}
})