微网站注册,网络营销服务平台,关键词优化排名查询,泉州关键词优化系列文章目录 本系列记录一下通过Abp搭建后端#xff0c;VueElement UI Plus搭建前端#xff0c;实现一个小型项目的过程。
Day 1 Vue 页面框架Day 2 Abp框架下#xff0c;MySQL数据迁移时#xff0c;添加表和字段注释Day 3 登录页以及路由 (一#xff09;Day 4 登录页及…系列文章目录 本系列记录一下通过Abp搭建后端VueElement UI Plus搭建前端实现一个小型项目的过程。
Day 1 Vue 页面框架Day 2 Abp框架下MySQL数据迁移时添加表和字段注释Day 3 登录页以及路由 (一Day 4 登录页及路由 (二Vue状态管理Day 5 登录页及路由 三 基于axios的API调用 文章目录 目录 系列文章目录 文章目录 前言 一、整体布局 二、登录窗体 三、API 调用修改 总结 前言 还是走到了这一步要涉足我的盲区样式和布局了。先看看最终的效果 一、页面需求
这是一个非常非常简单的登录页基本功能如下
1. 提供账号密码输入框
2. 输入框左侧显示图标
3. 账号可以一键清空
4. 密码可以查看明文
5. 账号不能为空密码不能为空密码长度6-12位
6. 重置按钮清空输入的账号密码
7. 登录按钮调用api成功后转到/home/index失败则弹出失败消息。
一、整体布局
登录视图中背景为统一颜色 #2b4b6b非常好记的一个颜色值。然后整体居中。这个居中是通过视频中的方法先绝对定位然后左上点到正中央再平移回去这个思路对于居中只知道 text-align的我而言就友好多了。
具体布局如下
src/views/login/LoginView.vue
templatediv classlogin_containerdiv classlogin_boxdiv classlogo_boximg src/assets/logo.svg altlogo //div/div/div
/template
style langless scoped
.login_container {background-color: #2b4b6b;height: 100%;
}
.login_box {width: 430px;height: 300px;background-color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 3px;.logo_box {height: 100px;width: 100px;position: absolute;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;border: 1px solid #ddd;padding: 10px;box-shadow: 0 0 10px;background-color: #eee;img {height: 100%;width: 100%;border-radius: inherit;background-color: #eee;}}
}
/style 这里基本上都是跟着视频走用的less还没有看到和普通css有啥区别另外好像element ui plus用的是sass。后续有时间了再看看。
上述代码渲染出来的效果是这样的 就是一个图标盖在一个白色矩形上。这个白色矩形就是后续的输入窗体了。
二、登录窗体
输入窗体直接用el-form这里提一下和视频不一样的地方就是图标的自动导入。在前面已经配置好了自动导入所以不用像视频那样手动引入直接在代码里写就可以。 在components.d.ts中会自动生成如下代码 其它的基本上就是根据ElementUI Plus的官方文档来处理了。包括输入框、校验、事件处理官方文档上都有说明基本就是CV大法就可以了。
src/views/login/components/LoginForm.vue
templateel-form refloginFormRef :modelloginForm :rulesrules classlogin_form label-width0el-form-item propusernameel-input v-modelloginForm.username classw-50 m-2 placeholder账号 clearabletemplate #prefixElIconElIconUser/ElIconUser/ElIcon/template/el-input/el-form-itemel-form-item proppasswordel-input v-modelloginForm.password classw-50 m-2 typepassword placeholder密码 show-passwordtemplate #prefixElIconElIconLock/ElIconLock/ElIcon/template/el-input/el-form-itemel-form-itemdiv classlogin_buttonsel-button typeprimary classjustify-end clicksubmitForm(loginFormRef)登录/el-buttonel-button classjustify-end clickresetForm(loginFormRef)重置/el-button/div/el-form-item/el-form
/template 三、API 调用修改
需要特别说明的就是登录API调用了。昨天已经做了一个简单处理但是实际上还是需要再修改一下。
修改主要提现在两点错误处理和响应数据统一处理。
错误处理又分为两个地方axios的响应拦截器和login方法里面。上代码
src\api\index.ts
http.interceptors.response.use((response: AxiosResponse) {const { data } responsereturn data},async (error: AxiosError) {if (error.code AxiosError.ERR_BAD_RESPONSE) {error.message 服务器错误请您稍后重试}if (error.code AxiosError.ECONNABORTED) {error.message 请求超时请您稍后重试}if (error.code AxiosError.ERR_NETWORK) {error.message 网络错误请您稍后重试}const result {code: error.code,message: error.message,success: false}return result }
)
在响应拦截器中做了两个处理第一个就是正常返回时把data直接返回第二个就是错误时针对特定code添加了中文消息然后将错误封装成统一响应数据。
然后在调用的地方也做了相应的修改
src\api\login.ts 主要是针对异常做了处理具体errorToResult方法如下
export const errorToResult (error: unknown) {const axError error as AxiosErrorreturn {code: axError ? (axError.code ? axError.code : -1) : -1,success: false,message: axError ? (axError.message ? axError.message : ) : error ,data: null}
}
那为什么要这么做
首先在调用axios时会有各种各样的可能出错那么login方法就需要去try-catch所以这里的异常处理是必不可少的。
另外后端返回的结果会有定义code根据code不同会有不同的处理方式而这个又是和业务紧密相关的并不是一个统一弹窗就能完全覆盖的。当然一些基础的错误用统一弹窗也就够了。
总体思路就是在login这里把所有的异常处理掉统一成一致的响应数据然后在实际使用的地方根据响应数据再进行后续处理。
最后在LoginForm中实际调用的代码是这个样子的
const submitForm async (formEl: FormInstance | undefined) {if (!formEl) returnawait formEl.validate(async (valid, fields) {if (valid) {await doLogin()}})
}const currentUser useCurrentUserStore()
const router useRouter()const doLogin async () {const result await login(loginForm)handleResultDTO(result,(r: ResultDTOLogin.LoginResponse) {const { data } rcurrentUser.setToken(data!.token)currentUser.setUserInfo({ name: data!.nickname })router.push(/home/index)})// if (result.success result.data) {// const loginResponse result.data// currentUser.setToken(loginResponse.token)// currentUser.setUserInfo({ name: loginResponse.nickname })// router.push(/home/index)// } else {// ElMessage.error(result.message)// }
}
在 doLogin中注释掉的内容后面被封装到 handleResultDTO方法里 export const handleResultBase (result: ResultBase, action: (r: ResultBase) any): any {if (result result.success) {return action(result)} else {ElMessage.error(result.message)}
}export const handleResultDTO T(result: ResultDTOT, action: (r: ResultDTOT) any): any {if (result result.success result.data) {return action(result)} else {ElMessage.error(result.message)}
}
这个只是两种不同的写法本质上都是依据响应数据是否返回了正确了结果来处理提取成方法只是一个习惯。 总结
以上就是今天的内容本文记录了一下vue登录页面的具体搭建过程另外对API调用进行了重构主要是涉及到异常处理部分。
