vue3-Typescriptプロジェクトでのmock.jsの簡単な使用

1.mock.jsの用途

プロジェクト開発では、インターフェイスを呼び出すことによってデータが取得され、レンダリングされます。現在、フロントエンドとバックエンドは別々に開発されており、バックエンドが時間内にインターフェースを開発して完成させることができない場合があります。このとき、mock.js を使用して仮想データをシミュレートし、生​​成することができます。バックエンド インターフェイスが開発される前に、独立して開発を終了できます。プロジェクトは通常どおりに進めることができ、貴重な時間を節約できます。バックエンド インターフェイスを作成した後、実際のインターフェイスに置き換える方がはるかに便利で迅速です。

2. プロジェクトでmock.jsを使用する

1.mock.jsをインストールする

npm install mock.js -save

2. プロジェクトの src フォルダーの下にモックフォルダーを作成します

モックフォルダーの下のindex.tsファイル

import Mock from "mockjs";

//Random方法是mockjs的核心方法，可以生成各种占位符
const Random = Mock.Random;

// 如果是想通过模拟接口来使用数据，可以这样做：
Mock.mock("/system/addUser", "post", {
    
      //这里路径和接口路径一致就可以了，请求类型也是
  code: 200,
  data: {
    
    },
  msg: "addUser succesful",
});

対応する API ファイルは user.ts です。

import http from "../request";

export default class User {
    
    
/**
   * 添加用户
   * @param userName 添加的用户名字
   * @param userRole 添加的用户的角色
   * @param loginPwd 要添加的用户的密码，明文，放到后台时会以MD5的结果存储
   * @param phoneNum 要添加的用户的手机号
   *备注:密码确认不在后端进行，所以无需传输确认密码
   * @returns
   */
  static async addUser(
    userName: string,
    userRole: string,
    loginPwd: string,
    phoneNum?: string
  ) {
    
    
    return http.post("/system/addUser", {
    
      //mock的路径和这个路径一致
      action: "addUser",
      userName,
      userRole,
      loginPwd,
      phoneNum,
    });
  }
}

3. プロジェクトの main.ts ファイルに導入します

// 导入mock
require("./mock");

モックを使用する必要がない場合は、コメントアウトしてください。

4. 通常どおりインターフェースを呼び出します

        User.addUser(userName, userRole, loginPwd, phoneNum).then((res) => {
    
     //路径一致
          if (res.code == 200) {
    
    
            ElMessage({
    
    
              type: "success",
              message: "添加成功!",
            });
            console.log("添加成功");
            formEl.resetFields();
            data.addUserForm.phoneNum = "";
            // router.push("/main/systemSetting/userManagement");
          } else if (res.code == 204) {
    
    
            ElMessage({
    
    
              type: "warning",
              message: "用户名已存在，请重新设置用户名！",
            });
          } else {
    
    
            ElMessage({
    
    
              type: "error",
              message: "新增失败！",
            });
          }
        });

したがって、モックを使用できます。基本的な単純なモック。パスの一致のみが必要です。