mock.js简介前端开发人员用来模拟虚拟数据，拦截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就是文中说到的使用第一步，根据自身需要进行修改
ps：apifox中如今也集成了mock.js的功能，提供了postman类似的模拟发送请求功能之外，还提供了更多的web程序开发所需要的定制化功能！
以上就是vue3中怎么使用mock.js方法的详细内容。