当前位置：首页 > news >正文

Mock安装及应用

news 2025/8/25 17:28:28

1、安装
npm install mockjs
2、Mock.Random属性
该属性是一个工具类，用于生成各种随机数据。它提供的方法如下：
Basic: boolean,natural,integer,float,character,string,range,date,time,datetime,now;
Image: image,dataImage;
Color: color;
Text: paragraph,sentence,word,title,cparagraph,csentence,cword,ctitle;
Name: first,last,name,cfirst,clast,cname;
Web: url,domain,email,ip,tId;
Address:area,region;
Helper: capitalize,upper,lower,pick,shuffle;
Miscellaneous: guid,id;
使用实例

const Random = Mock.Random
// 1. 随机布尔值
console.log('随机布尔值', Random.boolean());// 2. 随机一个整数 - Random.integer(min, max)
console.log('随机整数', Random.integer());
console.log('随机整数', Random.integer(9,90));// 3. 随机一个字符 - Random.character(pool?)
console.log('随机字符 英文大小写/数字/特殊字符', Random.character());
console.log('随机字符', Random.character('ab139$'));// 4. 返回一个整型数组 - Random.range(起始值?, 终止值, 步长 = 1)
console.log('数字数组', Random.range(4));
console.log('数字数组', Random.range(4,9));
console.log('数字数组', Random.range(12,23,2));// 5. 日期 - Random.date/time/datetime(日期格式)
console.log('随机年月日', Random.date());
console.log('随机时分秒', Random.time());
console.log('随机年月日 时分秒', Random.datetime());
console.log('随机年月日 时分秒', Random.date('yyyy-M-d hh:mm:ss'));console.log('当前时间带格式', Random.now('yyyy-MM-dd'));// 6. 随机图片 - Random.image(尺寸, 背景色, 文字颜色, 图片类型, 文本)
// Random.dataImage(尺寸, 内容)
this.randomSrc1 = Random.image('100x100', '#f00', '#0f0', 'png', '李白')
this.randomSrc2 = Random.dataImage('100x100', '张飞')// 7. 随机颜色 - Random.hex/rgb/rgba/hsl()
console.log('随机颜色', Random.hex());
console.log('随机颜色', Random.rgb());
console.log('随机颜色', Random.hsl());// 8. 文本
// Random.cparagraph(min, max)  段落 - 语句长度设置
this.paragraph = Random.cparagraph()
// this.paragraph = Random.cparagraph(5) // 固定句号5个
// this.paragraph = Random.cparagraph(5, 10)// 句号个数 5-10个// Random.ctitle(min, max) 标题 - 长度设置
this.title = Random.ctitle(3,6)// Random.csentence(min, max) 句子 - 字符默认12-18个// Random.cword(汉字池, min, max) 
console.log(Random.cword('男女'));// 9. 名字 - Random.clast/cfirst/cname()
console.log('随即姓名', Random.cname());// 10. web相关
// - Random.url(协议?, 源?)
console.log('随机网址', Random.url('https', 'qq.com'));
// - Random.email( domain? )
console.log('随机QQ邮箱', Random.email('qq.com'));
console.log('随机网易邮箱', Random.email('163.com'));
// - Random.ip() ipv4
console.log('随机IP', Random.ip());// 11. 地址
// - Random.region() 随机大区（华东/南/西/北/中）
// - Random.province()/city/county(true - 是否将前面的内容显示出来)
console.log('随机省', Random.province());
console.log('随机市', Random.city());
console.log('随机县', Random.county(true));// 12. 简化JS操作的方法
// - Random.capitalize(word)  首字母大写
console.log(Random.capitalize('hello'));// - Random.pick(arr) 数组随机取值
console.log(Random.pick([true, 'hello', 12, 23, 'world']));// - Random.shuffle() 打乱数组
console.log('数组乱序', Random.shuffle([1,2,3,4,5]));// 13. 随机身份ID
// - Random.guid()  返回uuid
console.log('随机用户id', Random.guid());// - Random.id()  随机身份证号
console.log('随机身份证号', Random.id());// - Random.increment('步长')
console.log('规律id', Random.increment());
console.log('规律id', Random.increment());
console.log('规律id', Random.increment());
console.log('规律id', Random.increment(10));
console.log('规律id', Random.increment(20));

3、创建mock
在mock文件夹下创建json文件和mock服务器
banner.json：（轮播图数据）

[{"id": "1","imgUrl": "/images/banner1.jpg"},{"id": "2","imgUrl": "/images/banner2.jpg"},{"id": "3","imgUrl": "/images/banner3.jpg"},{"id": "4","imgUrl": "/images/banner4.jpg"}
]

创建mock服务器，设置响应体，就用数据
mockServe.js

import Mock from 'mockjs'// 引入 json 数据
import banner from './banner.json'// 设置响应
Mock.mock('/mock/banner',{data: banner,    
})

4、引用mock服务

import '@/mock/mockServe'

5、新建网络请求 mockRequests.js

import axios from 'axios';// 进度条
import nprogress from 'nprogress'
import 'nprogress/nprogress.css';const mockRequests = axios.create({//基础路径 请求url默认开头会加上baseURLbaseURL: "/mock",//请求不能超过5Stimeout: 5000,});//请求拦截器----在项目中发请求前执行的函数
mockRequests.interceptors.request.use(function(config) {// 加载进度条nprogress.start();return config;
})//响应拦截器----当服务器响应请求后的回调函数
mockRequests.interceptors.response.use(// 成功回调function(res) {// 进度条结束nprogress.done();// 直接返回响应体的 data 作为 promise对象 的valuereturn res.data},// 失败回调function(err) {nprogress.done();console.log('mock数据请求失败');return err;}
)export default mockRequests;

6、创建网络请求函数

import mockRequests from './mockRequests'// mock 接口
export const reqgetBannerList = function() {return mockRequests.get('/banner');
}

7、在组件中发送mock请求（譬如调用调用 reqgetBannerList 函数）

import { reqgetBannerList } from '@/api'async updataBannerList(context) {let result = await reqgetBannerList();if(result) {console.log(result.data)}
}