【第18章】Vue实战篇之登录界面

---

前言

上一章完成用户注册，这一章主要做用户登录。

---

一、数据绑定

登录和注册使用相同的数据绑定

1. 数据绑定

<!-- 登录表单 -->
<el-form ref="loginFormRef" size="large" autocomplete="off" :model="registerData" v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item><el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input></el-form-item><el-form-item><el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码？</el-link></div></el-form-item><!-- 登录按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true">注册 →</el-link></el-form-item>
</el-form>

2. 数据清空

当注册和登录切换时，清空数据

const clearRegisterData = () => {registerData.value = {username: '',password: '',rePassword: ''}
}<el-link type="info" :underline="false" @click="isRegister = false; clearRegisterData()">← 登录</el-link>
<el-link type="info" :underline="false" @click="isRegister = true; clearRegisterData()">注册 →</el-link>

二、表单校验

1. 代码

<!-- 登录表单 -->
<el-form ref="loginFormRef" size="large" autocomplete="off" :model="registerData" :rules="registerDataRules" v-else><el-form-item><h1>登录</h1></el-form-item><el-form-item prop="username"><el-input name="username" :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input></el-form-item><el-form-item prop="password"><el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"v-model="registerData.password"></el-input></el-form-item><el-form-item class="flex"><div class="flex"><el-checkbox>记住我</el-checkbox><el-link type="primary" :underline="false">忘记密码？</el-link></div></el-form-item><!-- 登录按钮 --><el-form-item><el-button class="button" type="primary" auto-insert-space>登录</el-button></el-form-item><el-form-item class="flex"><el-link type="info" :underline="false" @click="isRegister = true; clearRegisterData()">注册 →</el-link></el-form-item>
</el-form>

2. 展示

三、登录

1.登录按钮

<!-- 登录按钮 -->
<el-form-item><el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
</el-form-item>

2.user.js

import request from '@/utils/request.js'export const registerService = (registerData)=>{var params = new URLSearchParams()for (let key in registerData) {params.append(key, registerData[key])}return request.post('/user/register', params)
}
export const loginService = (registerData)=>{var params = new URLSearchParams()for (let key in registerData) {params.append(key, registerData[key])}return request.post('/user/login', params)
}

3. login

import { registerService,loginService } from '@/api/user.js'const loginFormRef = ref(null)
const loginUser = async () => {let result = await loginService(registerData.value)let message = result.messageif (result.code == 0) {ElMessage.success(message ? message : '登录成功!')} else {ElMessage.error(message ? message : '登录失败!')}
}
const login = () => {if (!loginFormRef) returnloginFormRef.value.validate((valid) => {if (valid) {loginUser()}})
}

四、展示

---

总结

回到顶部