如何用vue3+Element?plus實現(xiàn)一個完整登錄功能
更新時間：2024年01月23日 15:15:26 作者：czy陳澤宇
要實現(xiàn)用戶的登錄功能,可以使用Vue3和Element?Plus,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3和Element?Plus組件庫實現(xiàn)一個完整的登錄功能,文中提供了詳細(xì)的代碼示例,需要的朋友可以參考下
一、想要實現(xiàn)的效果
二、搭建登錄靜態(tài)
1、實現(xiàn)左邊背景和右邊登錄欄的總體布局布局：
<el-row class="content">
<!--el-col 列： -->
<el-col :span="16" :xs="0" class="content-left"></el-col>
<el-col :span="8" :xs="24" class="content-right">
<el-row>2、賬號密碼登錄和手機號碼登錄切換使用<el-tabs>組件實現(xiàn)：
3、其他省略
4、全部代碼：
<el-row class="content">
<!--el-col 列： -->
<el-col :span="16" :xs="0" class="content-left"></el-col>
<el-col :span="8" :xs="24" class="content-right">
<div class="loginContent">
<div class="loginContentTop">
<div class="header">
<div class="logo">
<img src="../assets/images/logo.png" alt="" class="image" />
</div>
<div class="fontSize">JinPiKa</div>
</div>
<span class="introduce">全球最大的代碼托管平臺</span>
</div>
<div class="loginContentForm">
<div class="loginMethods">
<el-tabs>
<el-tab-pane
label="賬號密碼登錄"
class="toLogin"
:class="{ option: !option }"
@click="toOption(0)"
>
<!-- loginForm: 表單數(shù)據(jù)對象-->
<el-form
:model="loginForm"
:rules="loginFormRules"
style="width: 208px"
>
<el-form-item label="" prop="username">
<el-input
:prefix-icon="User"
placeholder="用戶名:user"
v-model="loginForm.username"
inline-message
></el-input>
</el-form-item>
<el-form-item label="" prop="password">
<el-input
:prefix-icon="Lock"
placeholder="密碼:user"
show-password
v-model="loginForm.password"
inline-message
></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
<el-tab-pane
label="手機號碼登錄"
class="toLogin"
:class="{ option: !option }"
@click="toOption(0)"
>
<!-- loginForm: 表單數(shù)據(jù)對象-->
<el-form
:model="loginFormPhone"
:rules="loginFormPhoneRules"
style="width: 208px"
prop="phone"
>
<el-form-item label="">
<el-input
:prefix-icon="User"
placeholder="請輸入手機號"
v-model="loginFormPhone.phone"
inline-message
></el-input>
</el-form-item>
<el-form-item label="" prop="code">
<el-input
:prefix-icon="Lock"
placeholder="請輸入驗證碼"
v-model="loginFormPhone.code"
inline-message
></el-input>
</el-form-item>
</el-form>
</el-tab-pane>
</el-tabs>
</div>
</div>
<div class="loginContentButton">
<div class="buttonTop">
<el-checkbox v-model="checked" label="自動登錄" size="small" />
<el-link type="primary" :underline="false">
<span style="font-size: 12px">忘記密碼</span>
</el-link>
</div>
<el-button type="primary" class="loginButton" @click="tologin">
登錄
</el-button>
<el-divider>
<span class="fengexian">其他登錄方式</span>
</el-divider>
<div class="svgItems">
<div class="svgItem">
<svg-icon
name="zhifubao"
width="18px"
height="18px"
color="pink"
></svg-icon>
</div>
<div class="svgItem">
<svg-icon
name="taobao"
width="18px"
height="18px"
color="pink"
></svg-icon>
</div>
<div class="svgItem">
<svg-icon
name="weibo"
width="18px"
height="18px"
color="pink"
></svg-icon>
</div>
</div>
</div>
</div>
</el-col>
</el-row>三、封裝接口
1、首先需要對axios進(jìn)行一個二次封裝，實現(xiàn)請求和響應(yīng)攔截器
在utils文件夾(一般用于存放封裝的文件)下創(chuàng)建一個request.ts文件
import axios from 'axios'
const requeset=axios.create({
baseURL: import.meta.env.BASE_URL, //基礎(chǔ)路徑
timeout:5000 //發(fā)請求超時時間為5s
})
//給request實例添加請求攔截器
request.interceptors.request.use((config)=>{
// config：配置對象：里面有個headers屬性請求頭，經(jīng)常給服務(wù)器端通過請求頭攜帶公共參數(shù)
return config
})
//配置響應(yīng)攔截器
request.interceptors.response.use(
//成功響應(yīng)：返回服務(wù)端的數(shù)據(jù)
(response)=>{
return response.data
},
//失敗響應(yīng)：會返回錯誤對象，用來處理http網(wǎng)絡(luò)錯誤
（error)=>{
// 存儲網(wǎng)絡(luò)錯誤信息
let message = ''
// 根據(jù)http狀態(tài)碼判斷網(wǎng)絡(luò)錯誤
const status = error.response.status
switch (status) {
case 401:
message = '登錄已過期，請重新登錄'
break
case 403:
message = '沒有權(quán)限，請聯(lián)系管理員'
break
case 404:
message = '請求資源不存在'
break
case 500:
message = '服務(wù)器內(nèi)部錯誤'
break
default:
// eslint-disable-next-line @typescript-eslint/no-unused-vars
message = '網(wǎng)絡(luò)錯誤'
break
}
// 提示錯誤信息
ElMessage({
type: 'error',
message,
})
// 返回一個失敗的promise對象
return Promise.reject(error)
}
)2、引入pinia
（1）在store文件夾下創(chuàng)建pinia倉庫，
// 引入 pinia
import { createPinia } from 'pinia'
// 創(chuàng)建大倉庫
const pinia = createPinia()
// 對外暴露
export default pinia
（2）在main.ts中，引入倉庫并全局使用pinia
// 引入倉庫 import pinia from './store' // 全局使用 pinia app.use(pinia)
3、在api文件夾下，封裝登錄接口，用于統(tǒng)一管理用戶相關(guān)的接口
// 引入封裝好的 request
import request from '@/plugins/request'
// 引入用戶相關(guān)的 ts 類型檢測
import { loginForm, loginResponseData } from './type'
//用戶相關(guān)接口的請求地址
enum API{
//用戶登錄的請求地址：在接口文檔中，去掉默認(rèn)請求地址baseURL后剩下的部分
LOGIN='/admin/login'
}
//登錄接口
export const reqLogin=(data:loginForm)=>{
request.post<any,loginResponseData>(API.LOGIN,data)
}或者第二種普通封裝方式：
// 封裝登錄相關(guān)接口
import { loginForm } from '@/apis/user/type'
import request from '@/utils/request'
export function useLoginAPI(data: loginForm) {
return request({
url: 'http://monitor-spring.jinxinapp.cn/api/v1/admin/login',
method: 'POST',
data,
})
}4、在store文件夾下創(chuàng)建用戶相關(guān)的小倉庫
// 用戶相關(guān)的小倉庫
import { defineStore } from 'pinia'
//引入登錄接口
import {reqLogin} from '@/api/user/index.ts'
const useUserStore=defineStore('user',{
state:()=>{
return{
token:localStorage.getItem('token'),
}
},
actions:{
//用戶登錄的方法,data是登錄時傳入的賬號密碼
async useLogin(data:loginForm){
//登錄請求
const result=awiat reqLogin(data)
if(result.code==200){
this.token=result.data.token
localStorage.getItem('token',result.data.token)
return 'ok'
}else{
return Promise.reject(new Error(result.data.message))
}
}
},
getters:{}
})
export default useUserStore5、在登錄頁面，點擊登錄按鈕調(diào)用tologin方法
const tologin=async ()=>{
try{
//調(diào)用倉庫里的登錄方法，傳入的loginForm里面是賬號密碼
await useStore.userLogin(loginForm)
$router.push('/home') //登錄成功跳轉(zhuǎn)首頁，
ElNotification({
title: '成功',
message: '登錄成功',
type: 'success',
})
}catch(error){
ElNotification({
message: (error as Error).message,
type: 'error',
})
}
}總結(jié)
到此這篇關(guān)于如何用vue3+Element plus實現(xiàn)一個完整登錄功能的文章就介紹到這了,更多相關(guān)vue3+Element plus登錄功能內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue踩坑記-在項目中安裝依賴模塊npm install報錯
這篇文章主要介紹了vue踩坑記-在項目中安裝依賴模塊npm install報錯，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue之事件處理的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下。2020-07-07
js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實現(xiàn)操作
這篇文章主要介紹了js節(jié)流防抖應(yīng)用場景,以及在vue中節(jié)流防抖的具體實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了React中父子組件通信詳解，在父組件中，為子組件添加屬性數(shù)據(jù)，即可實現(xiàn)父組件向子組件通信，文章通過圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-10-10
這篇文章主要為大家詳細(xì)介紹了Vue仿百度搜索功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
vue中的el-tree @node-click傳自定義參數(shù)
這篇文章主要介紹了vue中的el-tree @node-click傳自定義參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
最近新做了個項目，前端使用的是目前很流行的前端框架，對于后端，本項目選擇的是比較好上手、輕量級的python后臺框架：Flask。感興趣的可以了解一下2021-05-05
當(dāng)通過AJAX方式取回數(shù)據(jù)后，使用vue.js可以完美地按一定邏輯在頁面上的展示數(shù)據(jù)，代碼簡單、優(yōu)美、自然，而且便于與在用的頁面框架集成，本文給大家介紹Vue.js展示AJAX數(shù)據(jù)簡單示例2017-03-03
vite+vue3項目解決低版本兼容性問題解決方案(Safari白屏)
這篇文章主要介紹了vite+vue3項目解決低版本兼容性問題（Safari白屏）,使用官方插件 @vitejs/plugin-legacy 為打包后的文件提供傳統(tǒng)瀏覽器兼容性支持,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03