快捷導(dǎo)航

Vue3中簡單使用Mock.js方法實例分析

更新時間：2023年04月04日 09:40:10 作者：記得世界寒冷

這篇文章主要介紹了Vue3中簡單使用Mock.js方法,mock.js在模擬后端接口數(shù)據(jù)響應(yīng)與協(xié)調(diào)統(tǒng)一前后端開發(fā)接口規(guī)范方面有著重要的應(yīng)用,需要的朋友可以參考下

mock.js簡介

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

前端開發(fā)人員用來模擬虛擬數(shù)據(jù)，攔截ajax請求，方便模擬后端接口

安裝

npm install mockjs

使用

本文主要介紹在Vue項目中使用mock.js，包括axios發(fā)送請求與請求簡單封裝

創(chuàng)建mock文件夾，新建index.js文件

// 引入mockjs
import Mock from "mockjs";
// 獲取 mock.Random 對象
const Random = Mock.Random;
// 使用mockjs模擬數(shù)據(jù)
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(), // 獲取全局唯一標(biāo)識符
//     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請求添加表格數(shù)據(jù) */
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,
  };
});

模擬數(shù)據(jù)可自己手動編寫，也可由for循環(huán)自動生成，可以設(shè)置數(shù)量，字段（可以通過正則表達式限制輸出格式）。最后可設(shè)定請求路徑，請求方式以及返回內(nèi)容，可根據(jù)自身需求進行更改。

創(chuàng)建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("網(wǎng)絡(luò)異常");
    return Promise.reject(err);
  }
);
//響應(yīng)攔截器
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中模擬請求保持一致

調(diào)用封裝好的接口

導(dǎo)入模擬數(shù)據(jù)與接口文件，根據(jù)自己的路徑進行修改

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

調(diào)用接口

//頁面數(shù)據(jù)請求
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(); //直接調(diào)用請求方法
//添加用戶
mockApi
  .addUser(editUser)
  .then((res) => {
        console.log(res)
    if (res.code === "0") {
       ElMessage({
          message: "保存成功",
          type: "success",
         });
      }
    })
    .catch(function (error) {
       console.log(error);
});