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

mock.js简介

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

mock.js是什么？

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

mock.js有什么用？

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

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

安装mockjs

npm i mockjs -D

效果图

使用mockjs

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

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

3. 在mian.js导入mack.js import "@/utils/mock";
4. 在需要使用的页面里发起请求 我在这里个小项目直接复制出来方便理解
   第一步 创建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请求参数

tips： 如果想要了解mock.js的功能和用法，非常建议大家前往官网详细的了解

官网地址：mock官网