目录
1、入门
1.1、下载
1.2、配置与定义数据
1.3、使用方式
1.4、效果图
2、语法规范
2.1、数据模板定义规范
2.2、数据占位符定义规
3、深入学习mockjs
3.1、Mock.mock
3.2、Mock.setup
3.3、Mock.Random
Mock.Random 方法
Random.extend 扩展(自定义随机数据)
3.4、Mock.valid() 、Mock.toJSONSchema()
Mock.valid()
Mock.toJSONSchema()
版本:
"axios": "^1.2.0",
"mockjs": "^1.1.0",
"vite-plugin-mock": "^2.9.6",
1、入门
1.1、下载
npm 下载axios
npm install axios
npm下载 mockjs + 在 vite 的mockjs的配置插件
npm i mockjs vite-plugin-mock -D
1.2、配置与定义数据
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//vite-plugin-mock
import { viteMockServe } from 'vite-plugin-mock'
export default defineConfig({plugins: [vue(),viteMockServe({ //vite-plugin-mockmockPath: "./src/request/",// 指向mock下的文件,这个很重要,一定要指向 mock ,localEnabled: true, // 是否开启开发环境(生产环境不要打开.为 false将禁用 mock 功能)})],
})
创建一个request文件夹,创建以下三个文件,分别是: (要分开也行,注意路径就行,)
request : 用来封闭 axios
mock : 用来拦截 axios 然后自定义数据 **** 这个才是配置mockjs的数据并返回的
api : 请求 axios
这样做可以最大化的把请求接口与mock的界线区分开,
到时候有真的接口,不要mock的某个接口时,删除mock文件下对应的数据就行
request/request 文件配置
import axios from 'axios'
// 创建一个 axios 实例
const request = axios.create({baseURL: 'http://127.0.0.1:5173', // 所有的请求地址前缀部分timeout: 60000, // 请求超时时间毫秒withCredentials: true, // 异步请求携带cookie
})
// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config},function (error) {// 对请求错误做些什么console.error('请求错误', error)return Promise.reject(error)}
)
// 添加响应拦截器
request.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data},function (error) {return Promise.reject(error)}
)export default request request/mock 定义数据 ,
这个文件在哪里, vite.config.ts 的 mockPath 属性值就要写到mock.ts的上级目录
import Mock from "mockjs";
let mock = Mock.mock({url: "/mock", //请求路径method: "post",//请求方法response: () => {return {"data|6": [ //生成6条数据 数组{"shopId|+1": 1,//生成商品id，自增1"shopMsg": "@ctitle(10)", //生成商品信息，长度为10个汉字"shopAddress": "@county(true)", //随机生成地址"shopStar|1-5": "★", //随机生成1-5个星星}]}}
})
let index = Mock.mock({url: "/index",method: "get",response: () => {return {"data|6": [ //生成6条数据 数组{"shopId|+1": 1,//生成商品id，自增1"shopName": "@cname",//生成商品名 ， 都是中国人的名字"shopTel": /^1(5|3|7|8)[0-9]{9}$/,//生成随机电话号}]}}
})
//导出给mockjs处理,导出的变量名随便定义
export default [mock,index,
]上面 ( mock文件 ) 的导出的变量名随便定义,因为是给mockjs自动处理并返回数据的
但是Mock.mock中的url一定要和下面 ( api文件 ) 的路径要一样,因为 url 是浏览器请求的数据的路径
request/api 接口文件 ,这个文档主要写接口的路径与参数
// 导入axios实例
import request from './request'
// PAI
export const login = () => request.post('/mock')
export const index = () => request.get('/index')
1.3、使用方式
<script setup lang='ts'>
import { login,index } from "../request/api";//第一种方式:使用 promise.then
login().then(res => {console.log("login", res.data);
})//第二种方式:使用 await, 但第二种会有一个警告,
let res = await index()
console.log("index", res.data);</script>第二种方式:警报
警报的意思中:具有异步setup（）的组件必须嵌套在<Suspense>中才能呈现。
解决:在父组件套一个
<Suspense>
<异步请求的组件></异步请求的组件>
</Suspense>
这就行了,但这个<Suspense>是一个实验性功能，其API可能会发生变化。
1.4、效果图
mockjs的示例文档
vite-plugin-mock的中文配置文档
2、语法规范
Mock.js 的语法规范包括两部分：1.数据模板定义规范 2.数据占位符定义规
2.1、数据模板定义规范
数据模板中的每个属性由3部分构成:属性名、生成规则、属性值:
属性名 name 、生成规则rule、属性值 value
格式： name | rule: value
注意:
1.属性名和生成规则之间用竖线 | 分隔。
2.生成规则是可选的。
3.生成规则有7种格式:
let constellationsObj = { Aries: '白羊座', Taurus: '金牛座', Gemini: '双子座', Cancer: '巨蟹座', Leo: '狮子座',virgo: '处女座',libra: '天秤座', scorpio: '天蝎座', sagittarius: '射手座', Capricornus: '摩羯座', aquarius: '水瓶座', Pisces: '双鱼座',}let constellationsArr = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']1、"name|min-max":value
1.1：如果value是srting，重复value的值,重复次数等于随机min-max之间的次数。
1.2：如果value是number，就会随机min-max之间选一个值
1.3：如果value是boolean，最终值是与相反值的概率
1.4：如果value是object，最终值是在value值中随机min-max个值
1.5：如果value是array，最终值是重复valur值，会重复min-max之间次数
如： 1.1："id|1-10":'1', //第一次：'1' ，第二次 ：'11111111'1.2："id|1-10":1, //第一次：1 ，第二次 ：81.3: "bool|1-10":true //true的的率为11为之1,false的的率为11为之101.4："obj|1-3": constellationsObj , // 第一 obj：{aquarius:'水瓶座'}//第二 obj：{Cancer:'巨蟹座', Capricornus:'摩羯座'} 1.5: "arr|1-3": constellationsArr,//变量是 constellations ，不过是数组的//arr:['白羊座',...'双鱼座','白羊座',...'双鱼座','白羊座',...'双鱼座',]2、"name|count":value
2.1：如果value是srting，重复value的值,重复次数等于count。
2.2：如果value是boolean，最终值是相反值概的率倍数
2.3：如果value是object，从属性值 object 中随机选取 count 个属性。
2.4：如果value是array，分两种情况，count值为1，和1以上
count 为1的值：随机选中array中的一个值
count 为1以上的值：最终值是重复valur值，会重复count次数
如： 2.1： "id|5":'1', //=>'11111' 五个12.2: "bool|1":true, //=> true与false都是2分之1"bool|5":true, //=> true为5分之4, false都是5分之1,2.3："obj|1": constellationsObj,//变量和上面的一样//一次 obj：{Aries: '白羊座'} ，二次 obj：{libra: '天秤座'}2.4："arr|1": constellationsArr,//count 为1的值//一次 arr: '双子座' ，二次 arr: '水瓶座'"arr|2": constellationsArr,//count 为1以上的值// arr:['白羊座',...'双鱼座','白羊座',...'双鱼座']3、"name|min-max.dmix-dmax":value
3.1：生成一个浮点数,整数部分大于等于min、小于等于max，
小数部分保留dmin到dmax位，value只能是number值就行多少无所谓
如：3.1 "num|1-100.1-10": 1, //第一次 num: 13.502312311, 第二 num: 12.51 第三num: 53.67474、"name|min-dcount":value
4.1：生成一个浮点数,整数部分小于等于max、大于等于dcount整数，
小数部分保留dcount . 后的位数，value只能是number值就行多少无所谓
如：4.1 'num|1-10.2': 200, //第一次num: 10.53 第二 num: 3.56 第三 num: 6.315、"name|count.dmin-dmax":value
5.1：把count作为一个值并小数部分保留dmin到dmax位，
value只能是number值就行多少无所谓
如：5.1'num|1.1-10': 1, //第一次num: 1.18737543 第二 num: 1.3170182 第三 num: 1.56656、"name|count.dcount":value
6.1：把count作为一个值并小数部分保留dcount位，但它最终值的前几位
由value的小数点前几位占置，value只能是number值，且整数无用,小数有用
如：6.1 'num|1.8': 232.123 //第一次 num: 1.12377547 第二 num: 1.12379682 第三 num: 1.123566857、"name|+step":value
7.1：如果value是number，属性值自动加 step，初始值为 value。
7.2：如果value是array，最终值为上次再加 step 顺序选取，会重复
如：5.1:"num|+1": 12, //第一 num: 12 第二 num: 13 第三 num: 145.2:"arr|+1": constellationsArr,//第一arr:'白羊座' 第二arr:'金牛座' 第三 arr:'双子座'4.value是函数Function：执行函数
function，取其返回值作为最终的属性值5.value是正则表达式 RegExp：根据正则表达式
regexp反向生成可以匹配它的字符串
2.2、数据占位符定义规
占位符只是在属性值字符串中占个位置,
并不出现在最终的属性值中。
占位符的格式为: @占位符 @占位符(参数[,参数])
注意:
1.用@来标识其后的字符串是占位符。
2.占位符引用的是Mock. Random中的方法。
3. 通过Mock. Random extend()来扩展自定义占位符。
4.占位符也可以引用数据模板中的属性。
5.占位符会优先引用数据模板中的属性。
6.占位符支持 相对路径和绝对路径。
这个 3.3、Mock.Random 会有说，知道123点，并过下就行
其实这个入门就够, 后面都是要看文档来配置数据的了
3、深入学习mockjs
3.1、Mock.mock
Mock.mock( rurl?, rtype?, template|function( options ) )这个已经在入门展示过了其他使用的具体方法:mock.js学习之Mock.mock()&Mock.setup()使用_篇3
但上面这个是要在同一个组件上使用,如果你想要定义数据与接口分开,还是使用我上面这种方法,
分开定义的好处就是数据来源清晰,容易修改数据、接口、请求方法等,
缺点就是要开多个文件,以及使用分开定义的mock bug有点多,这是因为mock从未更新过,但这是bug大都是可以用其它方法来避免的
后面 我用 分开定义 表示是我这种方法(一个文件定义mock数据,一个请求,还有一个要使用的组件)
组件定义 表示的是在同一个组件上定义的方法(在一个组件上定义数据并请求使用数据)
3.2、Mock.setup
配置拦截 Ajax 请求时的行为。支持的配置项只有一个：timeout 。
如果你是使用上面的链接的方法的话,也是在同一个组件上使用
但在我这定义数据与接口分开是不行的,如何做才行?
let index = Mock.mock({url: "/index",method: "post",timeout: 1000, //其实也很简单,就是在定义数据这加多一个这个属性就行response: () => { return *** }
})timeout : 它的参数是 numbe正整数 如400 或
string 'xx – xx' 风格的字符串，如 "200 -600" ; 单位是毫秒
表示 200 – 600 毫秒后才会返回响应内容，
3.3、Mock.Random
Mock.Random 是一个工具类，用于生成各种随机数据。
Mock.Random 的方法在数据模板中称为『占位符』，书写格式为
@占位符(参数 [, 参数])。
官方示例:这个可以在任何地方使用
使用方法:Mock.Random
import Mock from "mockjs";
var Random = Mock.Random//在某一组件单独使用
Random.email()
// => "n.clark@miller.io"//在定义数据上使用 mock.ts 文件上
let index = Mock.mock({url: "/index",method: "post",response: () => {return {"email": Random.email(),// => { email: "v.lewis@hall.gov" }}}
})使用方法二:'@方法'
Mock.mock('@email')
// => "y.lee@lewis.org"Mock.Random 方法
| 类型 | 方法 |
|
基本 |
boolean, natural, integer, float, character, string , range, date , time, datetime, now 布尔值, 自然数，整数, 浮动，字符， 字符串, 范围，日期，时间，日期时间，现在 |
| 图像 |
image, dataImage 图像，生成一段随机的 Base64 图片编码(这个用定义数据与接口是会报错的,用不了) |
| 颜色 | color |
| 文本 |
paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle 段落， 句子， 单词, 标题， 后面和前面的一样,后面加个 c 表示是中文 |
| 名字 |
first, last, name, cfirst, clast, cname 姓 , 名 , 全名 ,加 c 为中文 |
| 网络 |
url, domain, email, ip, tld Url，域名，电子邮件，ip，顶级域名 |
| 地址 |
area, region 区域 , 地区 |
| 辅助 |
capitalize : 把字符串的第一个字母转换为大写 upper : 把字符串转换为大写， lower : 为大写， pick : 从数组中随机选取一个元素，并返回 shuffle : 打乱数组中元素的顺序，并返回 |
| 杂项 |
guid , id 全局唯一标示符, id |
Random.方法的参数比较多,就不在这说了,而且官网说的也很明的Random.方法的参数
Random.extend 扩展(自定义随机数据)
这是官网的方法,但vue3的组合式API是没有this的,不过它this是Random,
var Random = Mock.Random
Random.extend({constellation: (conut) => {let constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']//如果传参，并且是number值，就随机返回 conut 个值 if (conut !== undefined && Object.prototype.toString.call(conut) === '[object Number]') {let arr = []for (let i = 0; i < conut; i++) {let pickOn = Random.pick(constellations)constellations.splice(constellations.indexOf(pickOn),1)arr.push(pickOn)}return arr} else {return Random.pick(constellations)}}
})使用
let index = Mock.mock({url: "/index",method: "post",response: () => {return {"data": [{"arr": Random.constellation(2),//arr: ['双子座', '水瓶座']"arr1": Random.constellation(4),//arr1:['摩羯座', '射手座', '狮子座']"arr2": Random.constellation(),//arr2: "射手座"}]}}
})返回的 pick 方法是在辅助类型上的,可以从中选一个,也可以自己写
不过我这分开定义的，它这 extend 在不同的文件用不了自定义和方法，真心觉得不用 extend 都行
自定义随机数据最好是使用方法一 : Random.constellation() 记得加(),这是方法,不是属性
因为方法二多多少少都有点问题,虽然还是在一些情况能用,但没必要太麻烦一个个试验
3.4、Mock.valid() 、Mock.toJSONSchema()
Mock.valid()
校验真实数据 data 是否与数据模板 template 匹配。
template :表示数据模板，可以是对象或字符串。
data :表示真实数据
…这个.怎么说呢,应该没人会用，有真实数据估计也没几个人用这个了
Mock.toJSONSchema()
Mock.toJSONSchema() ，
把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
那可以忽略了,无聊可以去官网看下
完成! ✨
支付宝扫一扫
微信扫一扫
.png)
.png)
.png)
