vue数据请求---（mock）

最新推荐文章于 2025-04-09 15:03:52 发布

Always_Love

最新推荐文章于 2025-04-09 15:03:52 发布

阅读量398

点赞数

分类专栏： vue 入门

本文链接：https://blog.youkuaiyun.com/Always_Love/article/details/105267324

版权

入门同时被 2 个专栏收录

33 篇文章

订阅专栏

vue

13 篇文章

订阅专栏

本文介绍了在Vue项目中使用MockJS进行数据模拟的步骤，包括安装MockJS，配置模拟数据文件，全局引入及组件内使用，以及如何生成随机数字、对象、字符串和布尔值等。

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

mock模拟数据步骤：

安装 cnpm install mockjs --save-dev
mock.js配置模拟数据的文件 import Mock from ‘mockjs’
在整个项目mian.js引入mock 数据 require("./Mock/mock");
在组件引入mock 数据: 将axios绑定到vue的原型对象（Vue.prototype.axios=Axios）所有的组件可以直接使用（this.$axios）

import Mock from 'mockjs'
Mock.mock("/getuser", //路径名称
			"post",   || "get"
			{		//模拟数据
			result：[
					{
					id:"1",
					name:"Roy"
					},···
					]
			});

mock随机模拟数据：

1.管道符随即数字
"result|min-max “：产生 num个，num随机数字 (min,max)，小数点随机 |150.1-10
“result|num”：产生 num个，num固定数字
" id|+1”:1 id初始值为1，id每次自增加1.

2.随即对象
“city|1”:arr 随机选择一个arr数据内容
“city|”+1:arr 按顺序选择arr数据内容

3.正则随机产生字符

4.随机boolean “boolean|1-2”:true

import Mock from 'mockjs'
Mock.mock("/getuser","post",{
result|1-5:[{ //随即产生1-5个result
	"id|+1":1,
	'name': '@cname',  // 中文名称
	"icid":"@id()",	//随机id号
	'birthday': '@date("yyyy-MM-dd")',  // 日期
	'city': '@city(true)',   // 中国城市
	"weight|80-150.1-10":1,
	"encoude|1-10":{
                "reg|1-10":/[0-9][a-z][A-Z]-/
            },
     "day":"@now()",  //@date(yyyy-MM-dd) @time()    @datetime(),
     "color":"@color()",//随机色的  @color()   @hsl()  @rgb()  @rgba()
     "text":"@cparagraph(1,2)",//产生随机中文
}]);