网站建设教程实训心得,东莞做网站企业,广告设计公司简介文案,中国建设行业峰会网站系列文章目录
上一节#xff1a;第一节#xff1a;Vben Admin介绍和初次运行 文章目录 系列文章目录前言项目路径的概述一、登录逻辑梳理loginApi接口查看Mock 二、后端程序对接准备关闭Mock 总结 前言
第一节#xff0c;我们已经配置了前端环境#xff0c;运行起来了我们…系列文章目录
上一节第一节Vben Admin介绍和初次运行 文章目录 系列文章目录前言项目路径的概述一、登录逻辑梳理loginApi接口查看Mock 二、后端程序对接准备关闭Mock 总结 前言
第一节我们已经配置了前端环境运行起来了我们的Vben Admin的项目。 本节内容我们先熟悉下项目的目录和文件然后开始准备对接后端程序 项目路径的概述
路由在 src/router 页面在 sr/views
一、登录逻辑梳理
首先我们前端运行的url是http://127.0.0.1:5173/#/login 通过路由/login可以定位登录文件是views/sys/login/Login.vue 调用的链路 Login.vue LoginForm.vue 登录按钮handleLogin userStore.login loginApi 我们先分析loginApi
loginApi接口
loginApi就是前端向后端请求的接口 src/api/sys/user.ts 这个接口需要的参数是LoginParams 期望的返回是LoginResultModel 具体结构可以在api/sys/model/userModel.ts 文件查询 分析到这里我们已经基本了解了登录接口的要求后端只要满足loginAPI的传参和返回应该就没有问题。
查看Mock
现在我们看下在没有后端支持的情况下Vben Admin是如何通过Mock模拟登录的。 在项目启动后我们点击登录按钮我们的前端控制台输出是这样婶儿的。 登录调用了 mock/sys/user.ts 文件里面的/basic-api/login 这里逻辑是如果登录通过用户和密码查询到用户信息就返回用户信息如果未查询到就返回报错。同时成功是返回 resultSuccess 失败是返回 resultError 格式。 在文件mock/_utils.ts中可以看到
export function resultSuccessT Recordable(result: T, { message ok } {}) {return {code: ResultEnum.SUCCESS,result,message,type: success,};
}export function resultError(message Request failed,{ code ResultEnum.ERROR, result null } {},
) {return {code,result,message,type: error,};
}二、后端程序对接准备
关闭Mock
.env.development文件里修改 这里 VITE_USE_MOCK 改成 false VITE_GLOB_API_URL 改成 api
项目再次启动再次登录这次登录已经报错了 404说明我们请求的http://127.0.0.1:5173/api/login url不存在下一步我们就要对接后端的/api/login 接口。
总结
本节前端登录逻辑梳理完成了后端只要在/api/login 接口编写返回逻辑前后段就可以打通了具体详情我们下一节介绍
