一篇文章让你对mockjs了解的明明白白

最新推荐文章于 2025-04-19 14:26:06 发布

左手js右手vue

最新推荐文章于 2025-04-19 14:26:06 发布

阅读量1.3k

点赞数

文章标签： 1024程序员节 node.js 模块测试

本文链接：https://blog.youkuaiyun.com/ck2018182068/article/details/127498086

版权

本文介绍了Mock.js的基本概念和用途，它是一个在Node环境中用于生成随机数据的工具，常用于前端开发中模拟后端API。在后端接口未完成时，Mock.js可以帮助前端开发者快速制作假数据进行页面交互和性能测试。文章详细展示了如何安装、配置和使用Mock.js，包括在Vue项目中拦截并返回模拟的Ajax请求。

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

mock.js简介

小小说一下什么是mock.js以及有什么用
mockjs官网mockjs

mock.js是什么？

mock.js是基于node平台的一款生成随机数据的资源包，因此需要在node环境下安装以及使用它，我们通过操作mock指令完成对数据的增删改查，是前后端分离过程中前端的比较优秀的模拟API的工具。

mock.js有什么用？

在后端接口（API）尚未完成之前，前端制作的“假数据”或者写死的数据时使用，并在接口文档拟定之后切换成真实数据组，完成页面的相互交互效果以及对程序性能的相关测试。

okok多余的废话不说了直接来点实际的

安装mockjs

npm i mockjs -D

效果图
在这里插入图片描述

使用mockjs

首先在vue项目文件包src随便创建个文件夹建个名为mock的js文件
模拟一下拦截ajax请求，在mock.js里导入mack.js import Mock from "mockjs"; （有的是mock.js一样的，单纯的格式化样式不一样）在mock.js里写入

Mock.mock(/\/v5\/list/, {
  name: "lihua",
  age: 18,
});

在mian.js导入mack.js import "@/utils/mock";
在需要使用的页面里发起请求我在这里个小项目直接复制出来方便理解
第一步创建mockjs

import Mock from "mockjs";
// 拦截ajax 生成伪数据 拦截地址 “/v5/list”
Mock.mock(/\/v5\/list/, {
  name: "chenkang",
  age: 18,
});

第二步在main.js导入

import "@/utils/mock";

第三步在页面上使用

import request from "@/utils/request";

 created() {
 request
      .get("/v5/list")
      .then((res) => {
        console.log("模拟数据", res.data);
      })
      .catch((err) => {
        console.log(err);
      });
}

mockjs 基本语法

mock(url，data)

mock(url,method,data)

mock(url,method,function(option){
return data
})
//url 可以是正则 也可以是字符串
//method 可以为post get put delete
//option 包括url请求地址 method请求方法 body请求参数