越用越爽的后台框架开发纪实-2----VbenAdmin,登录接口对接

最近接到了一个表单项目，主要是表单数据库的维护和权限管理，找了一圈后，最终确定使用这款vbenAdmin后台，好久没有做前端了，感觉是越做越爽，感觉从小路逐渐到大路，然后上马路的感觉，确定框架后，就开发过程进行一个简单的记录，这个是我在使用的时候的一些小坑，希望能跟大家一起共勉。

文档镇楼，真的是所有的框架确实是文档是最香的，大家一定要好好看文档，内功修炼不能断

vben Admin 文档

一、看清结构，学习一个新的框架，摸索好位置最重要

目前我所用到的登录接口的文件目录主要用到了以下几个：

（1）src/views:所有的页面都存储在这里（可以多多参考样例代码）；

（2）src/local/lang/zh-CN:多语言配置；

（3）src/api:所有接口使用目录；

（4）.env.development:主要调整修改后台接口参数；

二、遇到的一些可圈可点的地方：

1、.env.development

# Whether to open mock
VITE_USE_MOCK = false

这里是是否使用mock数据的开关，这个后台系统的一个非常好的点就是没有后台的话，他是可以进行简单的数据交互和调用的，使用的就是mock数据，开发的时候可以用两点好处：

（1）可以更好地看出页面交互；（2）写接口的时候可以多多参考mock数据结构更好地写对应接口，更适合全栈开发；

# Basic interface address SPA
# VITE_GLOB_API_URL = /basic-api
VITE_GLOB_API_URL = http://localhost:8000/api/v1

这个地方是填写你自己的调用接口使用的，关闭了mock的话，就要填写自己的后台接口写在这里

2、我在开发的时候接口是已经写好了，所以登录的时候就需要有输入数字验证码的功能，vben没有，我们的后台是使用go-admin写的，调用起来其实都是一样的

  const getCode = async () => {
    // 模拟异步请求
    try {
      const res = await getCodeAPI(); // 使用 await 等待 getCodeAPI 完成
      console.log(res);
      codeUrl.value = res.data;
      uuid.value = res.id;
      console.log(codeUrl); // 确保正确打印 codeUrl
    } catch (error) {
      console.error('Error fetching code:', error); // 错误处理
    }
  };
  //onKeyStroke('Enter', handleLogin);

  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN);
  // 在组件挂载时调用 getCode 方法
  onMounted(() => {
    getCode();
  });

有两个知识点：

（1）vue3的生命周期和vue2有些些不同，要按照onMounted这种写法书写；

（2）进行接口调用的时候，要做好引用，vue3中的引用可真是挺多的，不过这样的复用性和代码管理是具备更强的优势的；

3、在对接口的时候我遇到了一个小问题，前端一直抓不到数据，总是undifined，然后这个可能大家也会遇到，分享给大家就是在接口调用类defHttp，当中的正确返回码的接口和我们现在用的框架不匹配，就是框架使用的code:0是接口调用成功返回，而我们后台写的是code:200,这里要做一点点小小的更改：在定义类的文件中第58行，找到定义ResultEnum.SUCCESS的文件，修改为接口一致的就可以了

/**
 * @description: Request result set
 */
export enum ResultEnum {
  // SUCCESS = 0,
  SUCCESS = 200,
  ERROR = -1,
  TIMEOUT = 401,
  TYPE = 'success',
}

/**
 * @description: request method
 */
export enum RequestEnum {
  GET = 'GET',
  POST = 'POST',
  PUT = 'PUT',
  DELETE = 'DELETE',
}

/**
 * @description:  contentType
 */
export enum ContentTypeEnum {
  // json
  JSON = 'application/json;charset=UTF-8',
  // form-data qs
  FORM_URLENCODED = 'application/x-www-form-urlencoded;charset=UTF-8',
  // form-data  upload
  FORM_DATA = 'multipart/form-data;charset=UTF-8',
}

原先默认的是0，改后为200，这时候前端接口就可以正确的调用数据了

4、接口书写，完全按照样例书写就可以了，我贴出来我写的验证码获取的代码：根据

export function getCodeAPI(params: any, mode: ErrorMessageMode = 'modal') {
  return defHttp.get<LoginCodeModel>(
    {
      url: uricode,
      params,
    },
    {
      errorMessageMode: mode,
    },
  );
}

根据自己的需求，匹配相对应的参数即可，其中如果想要定义返回的值的结构，可以定义一个<LoginCodeModel>,这个是一个模型文件，一个ts文件，可以定义数据结构

export interface LoginCodeModel {
  code: string | number;
  msg: string;
  requestId: string;
  status: string;
  data: string;
  id: string;
}