1.基本頁面的搭建

大概需要搭建成這樣子的頁面:

具體的搭建界面就不多講。各個項目都有自己的登錄界面，搭建方法大同小異，這是基礎，在這不做贅敘。

2.賬號登錄的驗證規則配置

直接使用element-plus中現成的表單校驗功能。
template:

<template><div class="pane-account"><el-form:model="account":rules="accountRules"label-width="60px"size="large"status-iconref="formRef"><el-form-item label="帳號" prop="name"><el-input v-model="account.name" /></el-form-item><el-form-item label="密碼" prop="password"><el-input v-model="account.password" show-password /></el-form-item></el-form></div>
</template>

script：

<script setup lang="ts">
import { reactive} from 'vue'
import type { FormRules} from 'element-plus'
// 1.定義account數據
const account = reactive({name: '',password: ''
})
// 2.定義校驗規則
//這里accountRules不需要用reactive進行響應式，因為一般不會改變。
const accountRules: FormRules = {name: [{ required: true, message: '必須輸入帳號信息~', trigger: 'blur' },{pattern: /^[a-z0-9]{6,20}$/,message: '必須是6~20數字或字母組成~',trigger: 'blur'}],password: [{ required: true, message: '必須輸入密碼信息~', trigger: 'blur' },{pattern: /^[a-z0-9]{3,}$/,message: '必須是3位以上數字或字母組成',trigger: 'blur'}]
}
</script>

3.點擊登錄按鈕

上面的登錄界面把它封裝成了多個組件。登錄模塊目錄結構如下:

如上,Login.vue有一個login-panel登錄面板子組件，登錄面板組件下有pane-account和pane-phone兩個子組件。

這里“立即登錄”按鈕是在login-panel組件中，點擊按鈕后需要用到賬號和密碼的信息，但他們都在子組件。有一種方法是把子組件傳到父組件；還有一種方法是login-panel父組件中調用子組件的方法。這里我用第二種方法:
以賬號登錄為例，子組件pane-account文件:

<script setup lang="ts">
import { reactive, ref } from 'vue'
// 1.定義account數據
const account = reactive({name: '',password: ''
})
...
// 3.執行帳號的登錄邏輯
function loginAction() {console.log("用戶正在登錄",account.name,account.password);
}
//一定要暴露出來，父組件才能使用子組件的方法:
defineExpose({loginAction
})
</script>

父組件login-panel.vue文件:

<script setup lang="ts">
import { ref } from 'vue'
import PaneAccount from './pane-account.vue'
import PanePhone from './pane-phone.vue'const activeName = ref('account')
//下面這行代碼要特別注意，經常會用到
//一般都是用InstanceType<typeof xxx>這種方法
//這里最好不要const accountRef = ref<any>()
//雖然萬事都可以any,但那樣子的話就沒有相關提示了
const accountRef = ref<InstanceType<typeof PaneAccount>>()
//點擊登錄按鈕
function handleLoginBtnClick() {if (activeName.value === 'account') {//簡寫方式，accountRef存在才執行accountRef.value.loginAction()accountRef.value?.loginAction()} else {console.log('用戶在進行手機登錄')}
}
</script>

4.表單的校驗

子組件pane-account文件:

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormRules, ElForm } from 'element-plus'
// 1.定義account數據
const account = reactive({name: '',password: ''
})
...
// 3.執行帳號的登錄邏輯
//這個與上面的accountRef是一樣的道理
const formRef = ref<InstanceType<typeof ElForm>>()
function loginAction() {formRef.value?.validate((valid) => {if (valid) {console.log("驗證成功","登錄的操作")} else {ElMessage.error('Oops, 請您輸入正確的格式后再操作~~.')}})
}defineExpose({loginAction
})
</script>

5.賬號的登錄邏輯和登錄狀態保存

首先要封裝一下登錄的網絡接口:
在service文件夾中新建main和login模塊:

service/login/login.ts：

import hyRequest from '..'
//這里account類型暫時為any,后面再處理
export function accountLoginRequest(account: any) {return hyRequest.post({url: '/login',data: account})
}

登錄之后需要把用戶信息保存到pinia中,所以在store里面也要新建login和main模塊來處理相關業務:

store/login/login.ts:

import { defineStore } from 'pinia'
import { accountLoginRequest } from '@/service/login/login'
const useLoginStore = defineStore('login', {state: () => ({id: '',token:'',name: ''}),actions: {//account暫時為any,后面會再進行處理async loginAccountAction(account: any) {// 1.賬號登錄, 獲取token等信息const loginResult = await accountLoginRequest(account)this.id = loginResult.data.idthis.name = loginResult.data.namethis.token = loginResult.data.token...}}
})export default useLoginStore

pinia中的數據一刷新就會消失,下一章節將會解決該問題https://blog.csdn.net/fageaaa/article/details/145532580。

6.定義IAccount對象類型

在上面很多文件里面都用到了一個對象，里面包含有賬號和密碼,但給它的類型都是any:



這樣子是不好的。我們可以把account的類型提取出來，放在一個文件中。
在src中新建一個types文件夾:

types/login.ts：

export interface IAccount {name: stringpassword: string
}

types/index.ts：

 export * from './login'

然后在需要的文件中引入: