Vue3中简单使用Mock.js(vue mocha)

发布时间：2024-01-17

Vue3中简单使用Mock.js mock.js简介

推荐整理分享Vue3中简单使用Mock.js(vue mocha)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3 mounted,vue modern,vue3 mounted,vue3怎么用,vue modern,vue-monaco,vue3 mock,vue3 mock,内容如对您有帮助，希望把文章链接给更多的朋友！

官方链接：Mock.js (mockjs.com)

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

安装npm install mockjs使用

本文主要介绍在Vue项目中使用mock.js，包括axios发送请求与请求简单封装

创建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);// }/** 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, };});

模拟数据可自己手动编写，也可由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);});项目结构

结构大体如上，mock中的Management.js就是文中说到的使用第一步，根据自身需要进行修改

本文链接地址:https://www.jiuchutong.com/zhishi/298375.html 转载请保留说明！

上一篇：使用vue-element-admin进行二次开发(使用的拼音)

下一篇：Vue--》深入理解 Vue 3 导航守卫，掌握前端路由的灵魂技能！(vue-introjs)