溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue.js怎么實現用戶登錄功能

發(fā)布時間:2021-05-07 09:50:23 來源:億速云 閱讀:546 作者:小新 欄目:編程語言

這篇文章將為大家詳細講解有關vue.js怎么實現用戶登錄功能,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫,Vue允許可以將一個網頁分割成可復用的組件,每個組件都包含屬于自己的HTML、CSS、JavaScript,以用來渲染網頁中相應的地方,所以越來越多的前端開發(fā)者使用vue。

用戶登錄功能的實現

在SpringBoot中配置數據庫信息以及mybatis的相關信息

如下圖:

vue.js怎么實現用戶登錄功能

數據庫easyuser表和User實體類

數據庫中的easyuser表,如下圖:

vue.js怎么實現用戶登錄功能

javabean類User,如下圖:

vue.js怎么實現用戶登錄功能

前端vue腳手架向SpringBoot后端發(fā)送登錄請求

vue.js怎么實現用戶登錄功能

login方法的代碼如下圖:

vue.js怎么實現用戶登錄功能

SpringBoot后端的LoginController控制器的login方法

login方法的代碼如下圖:

vue.js怎么實現用戶登錄功能

UserDao動態(tài)代理接口中的getUserByMessage方法

首先一定先要在啟動類上面,掃描動態(tài)代理接口,如下圖:

vue.js怎么實現用戶登錄功能

vue.js怎么實現用戶登錄功能

UserDao.xml映射文件

vue.js怎么實現用戶登錄功能

路由跳轉到Home.vue組件

前端向后端發(fā)送axios請求之后,后端向前端返回一個json字符串數據,前端解析此json字符串,如果flag登錄標志為"ok",則會跳轉路由,瀏覽器的localhost:8081/login地址在路由跳轉之后,變成localhost:8081/home地址,而path:"/home"對應著Home.vue組件,因此Home.vue組件會渲染到App.vue組件的標簽處,Home.vue組件的效果如下圖:

vue.js怎么實現用戶登錄功能

Home.vue組件的代碼,如下圖:

vue.js怎么實現用戶登錄功能

測試

分別啟動前后端項目,如下圖:

vue.js怎么實現用戶登錄功能

vue.js怎么實現用戶登錄功能

在瀏覽器輸入腳手架項目的生成地址,訪問前端默認首頁,如下圖:

vue.js怎么實現用戶登錄功能

點擊登錄按鈕之后,如下圖:

vue.js怎么實現用戶登錄功能

關于“vue.js怎么實現用戶登錄功能”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI