Vue3那些实用小知识~

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