Vue3中如何使用Mock.js方法

2023-07-06 12:54

短信预约 -IT技能 免费直播动态提醒

今天小编给大家分享一下Vue3中如何使用Mock.js方法的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

mock.js简介

前端开发人员用来模拟虚拟数据，拦截ajax请求，方便模拟后端接口

安装

npm install mockjs

使用

创建mock文件夹，新建index.js文件

// 引入mockjsimport 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);// }Mock.mock("/api/mockGetList", "get", () => {  return {    code: "0",    data: tableList,  };});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,  };});

模拟数据可自己手动编写，也可由for循环自动生成，可以设置数量，字段（可以通过正则表达式限制输出格式）。最终可以设置请求路径、请求方式以及返回内容，根据个人需求进行修改。

创建api文件夹，新建http.js文件（请求封装）

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;

这部分主要是对请求进行封装

新建mockApi.js文件（接口封装）

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,    });  },}

注意：url与提交方法要与mock中模拟请求保持一致

调用封装好的接口

导入模拟数据与接口文件，根据自己的路径进行修改

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

调用接口

//页面数据请求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);});