So verwenden Sie die Mock.js-Methode in Vue3

Einführung in Mock.js

Front-End-Entwickler verwenden es, um virtuelle Daten zu simulieren, Ajax-Anfragen abzufangen und Back-End-Schnittstellen bequem zu simulieren

Installation

npm install mockjs

Verwendung

In diesem Artikel wird hauptsächlich die Verwendung von Mock.js in vorgestellt Vue-Projekte, einschließlich Axios-Senden von Anfragen. Einfache Kapselung mit der Anfrage. Erstellen Sie einen Scheinordner und erstellen Sie eine neue index.js-Datei. Simulationsdaten können manuell geschrieben oder automatisch durch eine for-Schleife generiert werden festgelegt werden (das Ausgabeformat kann durch reguläre Ausdrücke eingeschränkt werden). Schließlich können Sie den Anforderungspfad, die Anforderungsmethode und den Rückgabeinhalt festlegen und diese entsprechend Ihren persönlichen Anforderungen ändern.

1. Erstellen Sie den API-Ordner und erstellen Sie eine neue http.js-Datei (Anforderungskapselung)

   // 引入mockjs
   import 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,
     };
   });

   Dieser Teil dient hauptsächlich der Kapselung der Anforderung

2. Erstellen Sie eine neue MockApi.js-Datei (Schnittstellenkapselung)

   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;

   Hinweis : URL und Übermittlung Die Methode sollte mit der Simulationsanforderung im Modell übereinstimmen.

3. Rufen Sie die gekapselte Schnittstelle auf

   Projektstruktur

4. Die Struktur von Management.js in Mock ist der erste im Artikel erwähnte Verwendungsschritt. PS: ApiFox integriert jetzt auch die Funktion von Mock. js bietet eine Postboten-ähnliche simulierte Sendeanforderungsfunktion. Darüber hinaus bietet es auch individuellere Funktionen, die für die Entwicklung von Webprogrammen erforderlich sind.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Mock.js-Methode in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!