vue 使用mockjs造假数据

最新推荐文章于 2024-08-05 14:39:04 发布

a576837179

最新推荐文章于 2024-08-05 14:39:04 发布

阅读量939

点赞数 1

分类专栏： vue功能块文章标签： vue.js

本文链接：https://blog.csdn.net/a576837179/article/details/111978321

版权

本文介绍了如何在 Vue.js 项目中使用 Mock.js 生成随机数据并拦截 Ajax 请求。Mock.js 提供了模拟各种场景的功能，支持生成各种数据类型，包括文本、数字、邮箱等。使用步骤包括安装 Mock.js、创建 mock 文件夹、在 main.js 中引入、设置请求接口以及在 Vue 页面中调用 Axios 接口。

摘要由CSDN通过智能技术生成

什么是Mock.js?
生成随机数据，拦截 Ajax 请求。

通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；支持支持扩展更多数据类型，支持自定义函数和正则。优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

使用步骤：
1.先安装mockjs

npm install mockjs --save-dev

2.在src目录下创建mock文件夹，并创建index.js文件,拦截axios请求

import Mock from 'mockjs'
//第一种
Mock.mock('/news/api','post',{
   
	"userInfo|4":[{
   
		"name":"@cname",
		"age|18-28":"25",
		"sex|1":["男","女"]
	}]
})
//第二种
var Random = Mock.Random;
var listData = function(){
   
    let articles