How to use Mock.js method in Vue3

Mock.js Introduction

Front-end developers use it to simulate virtual data, intercept ajax requests, and conveniently simulate back-end interfaces

Installation

npm install mockjs

Use

This article mainly introduces the use of mock.js in the Vue project, including axios sending requests and simple encapsulation of requests

1. Create a mock folder and create a new index.js file

   // 引入mockjs
   import Mock from "mockjs";
   // 获取 mock.Random 对象
   const Random = Mock.Random;
   // 使用mockjs模拟数据
   let tableList = [
     {
       id: "5ffa80aD-9CF4-0C77-eBFC-f6612BfAcF4F",
       account: "admin",
       password: "123456",
       address: "36918166@qq.com",
     },
     {
       id: "4FcC922C-C72c-95c3-Ef92-FbFAc24cc831",
       account: "ebHoL6",
       password: "i320Hu74fbn2Gi",
       address: "48165263@qq.com",
     },
   ]
   // for (let i = 0; i < 20; i++) {
   //   let newObject = {
   //     id: Random.guid(), // 获取全局唯一标识符
   //     account: /^[a-zA-Z0-9]{4,6}$/,
   //     password: /^[a-zA-Z]\w{5,17}$/,
   //     address: /[1-9]\d{7,10}@qq\.com/,
   //   };
   //   tableList.push(newObject);
   // }
   /** get请求
    * 获取用户列表
    */
   Mock.mock("/api/mockGetList", "get", () => {
     return {
       code: "0",
       data: tableList,
     };
   });
   /** post请求添加表格数据 */
   Mock.mock("/api/add", "post", (params) => {
     let newData = JSON.parse(params.body);
     newData.id = Random.guid();
     tableList.push(newData);
     return {
       code: "0",
       message: "success",
       data: tableList,
     };
   });

   Simulation data can be written manually or automatically generated by a for loop. The quantity and fields can be set (the output format can be limited by regular expressions). Finally, you can set the request path, request method and return content, and modify them according to personal needs.

2. Create the api folder and create a new http.js file (request encapsulation)

   import axios from "axios";
   import { ElLoading, ElMessage } from "element-plus";
   let http = axios.create({
     baseURL: "",
     timeout: 10000,
   });
   let loadingInstance;
   // 拦截器的添加
   http.interceptors.request.use(
     (config) => {
       loadingInstance = ElLoading.service("加载中");
       return config;
     },
     (err) => {
       loadingInstance?.close();
       ElMessage.error("网络异常");
       return Promise.reject(err);
     }
   );
   //响应拦截器
   http.interceptors.response.use(
     (res) => {
       loadingInstance?.close();
       return res.data;
     },
     (err) => {
       loadingInstance?.close();
       ElMessage.error("请求失败");
       return Promise.reject(err);
     }
   );
   export default http;

   This part is mainly to encapsulate the request

3. Create a new mockApi.js file (interface encapsulation)

   import http from "./http.js";
   export default {
     //用户列表
     findAll() {
       return http({
         url: `/api/mockGetList`,
         method: "get",
       });
     },
     //添加用户
     addUser(user) {
       return http({
         url: `/api/add`,
         method: "post",
         data: user,
       });
     },
   }

   Note: The url and submission method must be consistent with the simulated request in the mock

4. Call the encapsulated interface

Import simulation data and interface files and modify them according to your own path

import "../mock/index.js";
import mockApi from "../api/mockApi/mockApi.js";

Calling the interface

//页面数据请求
let tableData = reactive([]);
const getList = () => {
 mockApi
   .findAll()
   .then((res) => {
        console.log(res)
     if (res.code === "0"){ 
      tableData.push.apply(tableData, res.data);
      }
    })
    .catch(function (error) {
      console.log(error);
    });
};
getList(); //直接调用请求方法
//添加用户
mockApi
  .addUser(editUser)
  .then((res) => {
        console.log(res)
    if (res.code === "0") {
       ElMessage({
          message: "保存成功",
          type: "success",
         });
      }
    })
    .catch(function (error) {
       console.log(error);
});

Project structure

The structure is roughly as above. Management.js in mock is the first step in using it as mentioned in the article. Modify it according to your own needs

PS: ApiFox now also integrates mock.js The function not only provides postman-like simulation sending request functions, but also provides more customized functions required for web program development!

The above is the detailed content of How to use Mock.js method in Vue3. For more information, please follow other related articles on the PHP Chinese website!