vue3-Typescript项目中mock.js的简单使用

一、mock.js用来做什么

在项目开发中，会通过调用接口来获取数据，然后进行渲染。现在前后端分离开发，有时后端并不能够及时开发完成接口，这个时候我们就可以通过mock.js来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发，使项目可以正常进行，节约了宝贵时间，等到后端接口编写完毕后，再替换成真正的接口就方便快捷很多。

二、项目中使用mock.js

1. 安装mock.js

npm install mock.js -save

2. 在项目src文件夹下创建mock文件夹

mock文件夹下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");

如果不需要使用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: "新增失败！",
            });
          }
        });

如此就可以使用mock啦。基础简单的mock，只需要路径匹配就行啦。