硅谷甄选二（登录）

一、登录路由静态组件

src\views\login\index.vue

<template><div class="login_container"><!-- Layout 布局 --><el-row><el-col :span="12" :xs="0"></el-col><el-col :span="12" :xs="24"><el-form class="login_form"><h1>Hello</h1><h2>欢迎来到硅谷甄选</h2><el-form-item><el-input:prefix-icon="User"v-model="loginForm.username"></el-input></el-form-item><el-form-item><el-inputtype="password":prefix-icon="Lock"v-model="loginForm.password"show-password></el-input></el-form-item><el-form-item><el-button class="login_btn" type="primary" size="default">登录</el-button></el-form-item></el-form></el-col></el-row></div>
</template><script setup lang="ts">import { User, Lock } from '@element-plus/icons-vue'import { reactive } from 'vue'//收集账号与密码数据let loginForm = reactive({ username: 'admin', password: '111111' })
</script><style lang="scss" scoped>.login_container {width: 100%;height: 100vh;background: url('@/assets/images/background.jpg') no-repeat;background-size: cover;.login_form {position: relative;width: 80%;top: 30vh;background: url('@/assets/images/login_form.png') no-repeat;background-size: cover;padding: 40px;h1 {color: white;font-size: 40px;}h2 {color: white;font-size: 20px;margin: 20px 0px;}.login_btn {width: 100%;}}}
</style>

注意：el-col是24份的，在此左右分为了12份。我们在右边放置我们的结构。:xs="0"是为了响应式。el-form下的element-plus元素都用el-form-item包裹起来。

二、登陆业务实现

1）安装大仓库（笔记只写一次）

安装pinia：pnpm i pinia@2.0.34

src\store\index.ts

//仓库大仓库
import { createPinia } from 'pinia'
//创建大仓库
const pinia = createPinia()
//对外暴露：入口文件需要安装仓库
export default pinia

main.ts引入

//引入仓库
import pinia from './store'
app.use(pinia);

2）用户相关的小仓库

src\store\modules\user.ts

//创建用户相关的小仓库
import { defineStore } from 'pinia'
//创建用户小仓库
const useUserStore = defineStore('User', {//小仓库存储数据地方state: () => {},//处理异步|逻辑地方actions: {},getters: {},
})
//对外暴露小仓库
export default useUserStore

使用

//引入用户相关的小仓库import useUserStore from '@/store/moudles/user'let useUserStore2 = useUserStore()

3）按钮回调

//引入路由
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus'
//引入ElNotification
import { ElNotification } from 'element-plus'
let $router = useRouter();
//登录按钮的回调
const login = async () => {//按钮加载效果loading.value = true//点击登录按钮以后干什么//通知仓库发起请求//请求成功->路由跳转//请求失败->弹出登陆失败信息try {//也可以书写.then语法await useStore.userLogin(loginForm)//编程式导航跳转到展示数据的首页$router.push('/')//登录成功的提示信息ElNotification({type: 'success',message: '登录成功！',})//登录成功,加载效果也消失loading.value = false} catch (error) {//登陆失败加载效果消失loading.value = false//登录失败的提示信息ElNotification({type: 'error',message: (error as Error).message,})}
}

4)用户仓库

//创建用户相关的小仓库
import { defineStore } from 'pinia'
//引入接口
import { reqLogin } from '@/api/user'
//引入数据类型
import type { loginForm } from '@/api/user/type'
//创建用户小仓库
const useUserStore = defineStore('User', {//小仓库存储数据地方state: () => {return {token: localStorage.getItem('TOKEN'), //用户唯一标识token}},//处理异步|逻辑地方actions: {//用户登录的方法async userLogin(data: loginForm) { //返回一个promise对象//登录请求const result: any = await reqLogin(data)if (result.code == 200) {//pinia仓库存储token//由于pinia|vuex存储数据其实利用js对象this.token = result.data.token//本地存储持久化存储一份localStorage.setItem('TOKEN', result.data.token)//保证当前async函数返回一个成功的promise函数return 'ok'} else {return Promise.reject(new Error(result.data.message))}},},getters: {},
})
//对外暴露小仓库
export default useUserStore

5）小结

Element-plus中ElNotification用法（弹窗）：

引入：import { ElNotification } from 'element-plus'

使用：

//登录失败的提示信息ElNotification({type: 'error',message: (error as Error).message//类型断言，Error是ts内置类型})

//登录成功的提示信息
ElNotification({type: 'success',message: '登录成功！'
})

Element-plus中el-button的loading属性。
pinia使用actions、state的方式和vuex不同：需要引入函数和创建实例
$router的使用：也需要引入函数和创建实例
在actions中使用state的token数据:this.token
类型定义需要注意。
promise的使用和vue2现在看来是一样的。

三、模板封装登陆业务

1）result返回类型封装

//src\api\user\type.ts
interface dataType {token?: stringmessage?: string
}//登录接口返回的数据类型
export interface loginResponseData {code: numberdata: dataType
}

2)State仓库类型封装

//src\store\modules\types\type.ts
//定义小仓库数据state类型
export interface UserState {token: string | null
}

3)本地存储封装

将本地存储的方法封装到一起

//src\utils\token.ts
//封装本地存储存储数据与读取数据方法
export const SET_TOKEN = (token: string) => {localStorage.setItem('TOKEN', token)
}export const GET_TOKEN = () => {return localStorage.getItem('TOKEN')
}

4)登录时间的判断

//src\utils\time.ts
//封装函数：获取当前时间段
export const getTime = () => {let message = ''//通过内置构造函数Dateconst hour = new Date().getHours()if (hour <= 9) {message = '早上'} else if (hour <= 14) {message = '上午'} else if (hour <= 18) {message = '下午'} else {message = '晚上'}return message
}

使用

ElNotification({type: 'success',message: '欢迎回来',title: `HI,${getTime()}好`})

五、表单校验规则

1)表单校验

表单绑定项

<el-form class="login_form" :model="loginForm" :rules="rules" ref="loginForms"> 
</el-form>

Form 组件提供了表单验证的功能，只需为 rules 属性传入约定的验证规则，并将 form-Item 的 prop 属性设置为需要验证的特殊键值即可

定义

//收集账号与密码数据let loginForm = reactive({ username: 'admin', password: '111111' })//定义表单校验需要的配置对象const rules = {username: [//规则对象属性:{required: true, // required,代表这个字段务必要校验的min: 5, //min:文本长度至少多少位max: 10, // max:文本长度最多多少位message: '长度应为6-10位', // message:错误的提示信息trigger: 'change', //trigger:触发校验表单的时机 change->文本发生变化触发校验, blur:失去焦点的时候触发校验规则}, ],password: [{required: true,min: 6,max: 10,message: '长度应为6-15位',trigger: 'change',}, ],}//获取表单元素let loginForms = ref()

校验规则通过后运行

const login = async () => {//保证全部表单项校验通过await loginForms.value.validate()。。。。。。
}

2）自定义表单校验

//自定义校验规则函数const validatorUserName = (rule: any, value: any, callback: any) => {//rule：校验规则对象//value:表单元素文本内容//callback:符合条件，callback放行通过，不符合：注入错误提示信息if (value.length >= 5) {callback()} else {callback(new Error('账号长度至少5位'))}}const validatorPassword = (rule: any, value: any, callback: any) => {if (value.length >= 6) {callback()} else {callback(new Error('密码长度至少6位'))}}//定义表单校验需要的配置对象const rules = {username: [//规则对象属性:/* {required: true, // required,代表这个字段务必要校验的min: 5, //min:文本长度至少多少位max: 10, // max:文本长度最多多少位message: '长度应为6-10位', // message:错误的提示信息trigger: 'change', //trigger:触发校验表单的时机 change->文本发生变化触发校验, blur:失去焦点的时候触发校验规则}, */{ trigger: 'change', validator: validatorUserName },],password: [{ trigger: 'change', validator: validatorPassword },],}