Vue3에서 Mock.js 메소드를 사용하는 방법

mock.js 소개

프론트엔드 개발자는 이를 사용하여 가상 데이터를 시뮬레이션하고, Ajax 요청을 가로채고, 백엔드 인터페이스를 편리하게 시뮬레이션합니다.

Installation

npm install mockjs

Usage

이 글에서는 주로 mock.js의 사용을 소개합니다. 요청을 보내는 Axios를 포함한 Vue 프로젝트 요청으로 간단한 캡슐화

1. 모의 폴더를 만들고 새 index.js 파일을 만듭니다.

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

   시뮬레이션된 데이터는 수동으로 작성하거나 for 루프를 통해 자동으로 생성할 수 있습니다. 설정됩니다(출력 형식은 정규 표현식으로 제한될 수 있음). 마지막으로 요청 경로, 요청 방법, 반환 콘텐츠를 설정하고 개인의 필요에 따라 수정할 수 있습니다.

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

   이 부분은 주로 요청을 캡슐화하는 부분입니다

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,
       });
     },
   }

   Note : url 및 submit 메서드는 mock의 시뮬레이션 요청과 일치해야 합니다

4. 캡슐화된 인터페이스 호출

시뮬레이션 데이터 및 인터페이스 파일을 가져오고 자신의 경로에 따라 수정하세요

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는 기사에서 언급한 사용의 첫 번째 단계입니다. 추신: ApiFox는 이제 Mock의 기능도 통합합니다. Node.js에서는 우편 배달부와 같은 시뮬레이션 전송 요청 기능을 제공합니다. 또한, 웹 프로그램 개발에 필요한 더욱 다양한 맞춤형 기능도 제공합니다!

위 내용은 Vue3에서 Mock.js 메소드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!