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

一、mock.js用来做什么

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

二、项目中使用mock.js

1. 安装mock.js

npm install mock.js -save

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

vue3-Typescript项目中mock.js的简单使用_第1张图片
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");

vue3-Typescript项目中mock.js的简单使用_第2张图片
如果不需要使用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,只需要路径匹配就行啦。

你可能感兴趣的:(javascript,typescript,前端)