mockjs入门使用

最新推荐文章于 2025-03-31 02:00:32 发布

zhangxiaobai___

最新推荐文章于 2025-03-31 02:00:32 发布

阅读量384

点赞数

文章标签： vue.js 前端框架前端

本文链接：https://blog.youkuaiyun.com/zhangxiaobai___/article/details/127499356

版权

本文介绍了MockJS在前端开发中的应用，特别是在后端接口未完成时，如何使用MockJS生成随机数据并拦截Ajax请求，以模拟接口响应。通过安装、创建mock.js文件、拦截异步请求以及在项目中引入和使用MockJS的步骤，帮助前端开发者进行快速开发。

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

1.前言

在一个项目中，通常是前端负责访问接口，展示数据，后端负责业务逻辑，访问数据的数据，并将数据返回前端。往往存在的问题是后端还没做好接口，写好接口文档，前端就需要数据做展示。这种情况下，前端可以通过mockjs，参考接口文档自己先模拟数据写业务代码，等后端准备好，再用后端接口替换自己写的模拟数据。

mockjs作用就是生成随机数据，拦截 Ajax 请求(模拟后端的接口)。

2.mockjs使用教程

2.1安装

打开cmd，切换到项目文件夹，输入以下命令：

npm i mockjs --save

2.2使用

在src->utils文件夹新建文件mock.js

//导入mock
import Mock from 'mockjs';

2.3拦截异步请求

Mock.mock拦截ajax请求，有三个参数：

第一个参数：要拦截的请求路径

第二个参数：要拦截的请求方式

第三个参数：拦截之后的处理逻辑（它是一个函数）这个函数必须要有一个返回值，这个返回值就是返回给异步请求的结果

案例：返回10条带有id的信息

import Mock from 'mockjs';
Mock.mock(/\/v5\/user/,{
	code:0,
	msg:"成功",
	"data|10":[
		{
			'id|+1':1024,
			'name':'@cname',
			'age|1-100':1,
			'score|1-5':'⭐',
			'title':'@ctitle(8,14)',
			'decsription':'@cparagraph',
			'tel':/1\d{10}/,
			'email':/[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
			'canmarry':function(){
				if(this.age>22){
					return true;
				}else{
					return false;
				}
			},
			'day':'@date("yyyy-MM-dd")'
		}
	]
	
})

2.4导入

在main.js导入

import "@/utils/mock.js"

2.5视图中使用

<template>
    <div v-for="item in list" :key="item.id">
		<h3>{{item.name}}</h3>
		<h3>价格：{{item.price}}</h3>
		<p>产地：{{item.add}}</p>
		<p>{{item.score}}|{{item.day}}|{{item.tel}}</p>
		<h4>{{item.title}}</h4>
		<p>{{item.description}}</p>
		<img :src="item.avatar">
	</div>
</template>
<script>
	import request from "@/utils/request.js"
	export default{
		data(){
			return{
				outNum:5,
				list:[]
			}
		},
		created(){
			//mock随机数
			request.get("/v5/user")
			.then(res=>{
				console.log("随机数据",res.data);
				this.list=res.data.data;
			})
			.catch(err=>{
				console.log(err);
			})
        }
    }
</script>