今天小編給大家分享一下Vue3中如何使用Mock.js方法的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯(lián)建站主要從事網(wǎng)站設(shè)計制作、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)合陽,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

mock.js簡介

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

安裝

npm install mockjs

使用

1. 創(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ù)個人需求進行修改。

2. 創(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;

   這部分主要是對請求進行封裝

3. 新建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中模擬請求保持一致

4. 調(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);
});

項目結(jié)構(gòu)

結(jié)構(gòu)大體如上，mock中的Management.js就是文中說到的使用第一步，根據(jù)自身需要進行修改

PS：ApiFox中如今也集成了mock.js的功能，提供了postman類似的模擬發(fā)送請求功能之外，還提供了更多的web程序開發(fā)所需要的定制化功能！

以上就是“Vue3中如何使用Mock.js方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

標(biāo)題名稱：Vue3中如何使用Mock.js方法
分享URL：http://chinadenli.net/article32/gejepc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、微信公眾號、域名注冊、網(wǎng)站營銷、網(wǎng)站收錄、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)