veu中mock.js的使用

最新推荐文章于 2023-03-11 12:57:26 发布

非官方认证熬夜小能手

最新推荐文章于 2023-03-11 12:57:26 发布

阅读量268

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44348028/article/details/108463583

版权

本文介绍如何在项目中使用MockJS配合Axios发送请求，获取并处理mock生成的随机数据，包括随机文本、浮点数、整数及图片URL。通过注册mockServer并在main.js中调用，实现请求拦截，返回定制化的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目的main.js文件中注册使用mock

import './mock/mockServer'

发送请求页

发送一个axios请求得到返回数据(mock)

methods:{
	//请求获取mock生成的数据
	addData(){
		axios.get('msg').then(res=>{
			this.list = res.data;
			var arrs = this.list.splice(4,this.list.length-4)
			this.list2 = arrs
			console.log(res.data);
		})
	},
}

mock拦截请求，返回随机数据

随机生成图片，添加随机字段

// 根据mock js 提供mock数据接口
import Mock from 'mockjs'
 
const Random = Mock.Random;
export default Mock.mock('msg', function(){  	
	// imgs:Random.dataImage('375x370'),
let result = [{text1:Random.ctitle(20,100)},{text2:Random.ctitle(20,100)},{text3:Random.float(60, 100, 2, 2)},{text4:Random.integer(10,20)},]
	for( let i=0;i< (Math.floor(Math.random()*20) +5); i++){
		let obj = {
			img:Random.dataImage('375x370'),
			
		}
		result.push(obj);
	}
	return result
});

返回数据打印

在这里插入图片描述