SpringBoot3結(jié)合Vue3實現(xiàn)用戶登錄功能

更新時間：2024年03月29日 09:36:21 作者：howard2005

最近項目需求搭建一個結(jié)合Vue.js前端框架和Spring Boot后端框架的登錄系統(tǒng),本文主要介紹了SpringBoot3結(jié)合Vue3實現(xiàn)用戶登錄功能,具有一定的參考價值,感興趣的可以了解一下

一、實戰(zhàn)概述

該實戰(zhàn)教程旨在指導開發(fā)者通過前后端分離的方式，搭建一個結(jié)合Vue.js前端框架和Spring Boot后端框架的登錄系統(tǒng)。首先，從創(chuàng)建前端項目開始，利用Vue CLI快速生成項目結(jié)構(gòu)，安裝axios以實現(xiàn)HTTP請求功能，vue-router處理路由導航，less與less-loader用于樣式預處理增強前端開發(fā)體驗。完成基礎(chǔ)設(shè)置后，開發(fā)者在IDEA中打開并繼續(xù)構(gòu)建前端頁面，分別創(chuàng)建登錄組件、首頁組件以及配置路由視圖。編寫應用根組件，并設(shè)置主入口腳本，同時為解決跨域問題設(shè)置了反向代理。

接著進行后端項目的搭建，創(chuàng)建Spring Boot應用，配置服務(wù)器運行端口號，并啟動服務(wù)確保能訪問到后端首頁。然后，為后端設(shè)計數(shù)據(jù)模型，創(chuàng)建用戶實體類和結(jié)果實體類，以便于業(yè)務(wù)邏輯處理。最后，開發(fā)登錄控制器以對接前端發(fā)送的登錄請求。

整合測試階段，分別啟動前端login-vue項目和后端LoginDemo項目，前端調(diào)用后端接口進行登錄驗證，確保用戶登錄功能正常運作。此實戰(zhàn)涵蓋了項目初始化、模塊安裝、組件開發(fā)、路由配置、實體類設(shè)計、控制器編寫及跨域解決方案等關(guān)鍵環(huán)節(jié)，有助于開發(fā)者理解和實踐前后端交互開發(fā)流程。

二、實戰(zhàn)步驟?

（一）創(chuàng)建前端項目 - login-vue

查看Node和npm版本

安裝vue腳手架，執(zhí)行命令：nmp install -g @vue/cli

1、創(chuàng)建Vue項目

在命令行窗口里執(zhí)行命令：vue create login-vue，選擇Default ([Vue 3] babel, eslint)

2、安裝axios模塊

Axios 是一款基于Promise的JavaScript庫，主要用于瀏覽器和Node.js環(huán)境，提供了一種簡單、高效的方式來處理前端與后端API之間的HTTP通信。它支持創(chuàng)建和發(fā)送GET、POST等多種HTTP請求，可處理JSON數(shù)據(jù)自動轉(zhuǎn)換，并具有攔截請求/響應、取消請求、設(shè)置超時等功能。 Axios遵循Promise API設(shè)計，易于理解和使用，廣泛應用于現(xiàn)代Web項目中進行異步數(shù)據(jù)交互。

進入login-vue目錄，執(zhí)行命令：npm install axios --save

3、安裝vue-router模塊

Vue Router是Vue.js官方的路由管理器，它通過將SPA（單頁應用）的頁面切分成多個組件，并實現(xiàn)了URL與組件間的映射關(guān)系。在Vue項目中，通過定義路由規(guī)則和嵌套路由，Vue Router能夠?qū)崿F(xiàn)視圖與URL的同步切換，提供前端路由功能，支持動態(tài)路由、導航守衛(wèi)等功能，為構(gòu)建復雜單頁應用提供了便捷的支持。

執(zhí)行命令：npm install vue-router@4 --save

4、安裝less和less-loader模塊

Less是一種CSS預處理器，通過擴展CSS語法提供變量、嵌套規(guī)則、混合、函數(shù)等高級特性，使得樣式編寫更高效、模塊化和易于維護。less-loader則是Webpack的一個加載器，用于將Less文件編譯成瀏覽器可識別的CSS代碼。在Vue項目中安裝并配置less和less-loader后，即可在.vue文件或獨立.less文件中編寫Less代碼，并在構(gòu)建過程中自動轉(zhuǎn)化為CSS樣式。

執(zhí)行命令：npm install --save-dev less less-loader

5、運行Vue項目

執(zhí)行命令：npm run serve

給出訪問應用的網(wǎng)址

6、在瀏覽器里訪問首頁

訪問http://local:8080

7、在IDEA里打開Vue項目

打開Vue項目 - login-vue

8、創(chuàng)建登錄Vue組件

在src/components目錄里，刪除HelloWorld.vue組件，創(chuàng)建LoginView.vue組件

<template>
  <table class="login-table" border="0" cellpadding="10">
    <tr>
      <td align="center">用戶名</td>
      <td><input id='username' type="text" v-model="username" placeholder="請輸入用戶名"/></td>
    </tr>
    <tr>
      <td align="center">密&nbsp;&nbsp;&nbsp;&nbsp;碼</td>
      <td><input id='password' type="password" v-model="password" placeholder="請輸入密碼"/></td>
    </tr>
    <tr align="center">
      <td colspan="2">
        <button @click="handleLogin">登錄</button>
      </td>
    </tr>
  </table>
</template>

<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import axios from "axios";

const router = useRouter();
const username = ref('');
const password = ref('');

async function handleLogin() {
  try {
    const response = await axios.post('/api/login', {username: username.value, password: password.value});
    console.log(response.data.code)
    if (response.data.code === 200) {
      router.replace('/index'); // 使用后端返回的路徑
    } else if (response.data.code === 400) {
      alert('用戶名或密碼錯誤！請重新登錄！');
      username.value = '';
      password.value = '';
      document.getElementById('username').focus();
    }
  } catch (error) {
    console.error("Error during login:", error.message); // 添加錯誤處理，打印錯誤信息
  }
}
</script>

<style lang="less" scoped>
/* 重置table樣式 */
.login-table {
  width: 100%;
  max-width: 300px;
  margin: 50px auto;
  border-collapse: collapse;
  border-spacing: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.login-table td {
  padding-bottom: 16px;
  padding-top: 16px;
  padding-right: 0px;
  padding-right: 8px;
  vertical-align: middle;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.login-table input[type="text"],
.login-table input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  box-sizing: border-box;
}

.login-table button {
  display: block;
  width: 100%;
  padding: 12px;
  background-color: #007bff;
  color: white;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.3s ease;

  &:hover,
  &:focus {
    background-color: #0056b3;
  }
}
</style>

代碼創(chuàng)建了一個登錄表單，使用Vue響應式數(shù)據(jù)綁定用戶輸入，并在點擊登錄按鈕時通過axios發(fā)送POST請求。根據(jù)后端返回的code進行判斷：200則跳轉(zhuǎn)至/index頁面，400則提示錯誤并清空密碼重置焦點。同時定義了簡潔的登錄界面樣式。

9、創(chuàng)建首頁Vue組件

在src/components里創(chuàng)建IndexView.vue組件

<template>
  <div class="welcome-container">
    Welcome to Vue 3 World~
  </div>
</template>

<script>
export default {
  name: "IndexView"
}
</script>

<style scoped>
.welcome-container {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f5f5f5;
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
  color: red;
  font-weight: bold;
  font-size: 30px;
}
</style>

該代碼定義了一個Vue組件IndexView，渲染一個居中顯示的歡迎信息框，樣式包括內(nèi)邊距、邊框、背景色等，并通過CSS設(shè)置了自動水平居中布局及字體樣式。

10、創(chuàng)建路由視圖

在src里創(chuàng)建router目錄，在router目錄里創(chuàng)建index.js腳本

// 引入Vue3以及新的vue-router
import { createRouter, createWebHistory } from 'vue-router';
import Login from '@/components/LoginView.vue';
import Index from "@/components/IndexView.vue";

// 定義路由
const routes = [
  {
    path: '/login',
    name: 'LoginView',
    component: Login
  },
  {
    path: '/index',
    name: 'IndexView',
    component: Index
  }
];

// 創(chuàng)建路由器實例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 導出全局注冊
export default router;

該代碼引入Vue Router并定義了登錄和首頁兩個路由，使用createRouter創(chuàng)建路由器實例，配置history模式，并導出用于全局注冊。

11、編寫應用根組件

應用Vue組件 - App.vue是 Vue.js 應用程序的根組件，負責整個應用的布局與整體結(jié)構(gòu)，所有其他組件在其內(nèi)部組織和渲染。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <router-view />
  </div>
</template>

<script>
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

此代碼為Vue應用的根組件（App.vue），包含一個logo圖片和動態(tài)路由視圖（<router-view/>）。樣式設(shè)置字體、抗鋸齒及居中對齊。

12、編寫主入口腳本

main.js是Vue應用的主入口腳本，負責初始化Vue應用實例、注冊全局組件與插件（如路由、狀態(tài)管理等），并掛載到DOM指定元素。

// 導入Vue3的核心API，用于創(chuàng)建Vue應用實例
import {createApp} from 'vue';

// 導入根組件App.vue，它是整個應用程序的主視圖模板
import App from './App.vue';

// 導入已配置好的路由模塊（index.js或router.ts等），它管理著應用內(nèi)的頁面跳轉(zhuǎn)邏輯
import router from "@/router";

// 使用createApp方法創(chuàng)建一個Vue應用實例，并注冊全局路由配置
const app = createApp(App).use(router);

// 將Vue應用掛載到HTML文檔中id為'app'的元素上
// 這將把整個應用程序渲染到這個DOM元素內(nèi)部
app.mount('#app');

該代碼導入Vue3核心API創(chuàng)建應用實例，引入根組件與路由配置，通過createApp初始化應用并注冊路由，最后將整個應用掛載到DOM中id為’app’的元素上。

13、設(shè)置反向代理和跨域支持

修改vue.config.js代碼，設(shè)置反向代理和跨域支持

module.exports = {
  // 設(shè)置在保存文件時禁用ESLint自動檢查
  lintOnSave: false,

  // 配置Vue開發(fā)服務(wù)器相關(guān)選項
  devServer: {
    // 配置HTTP代理，以便在開發(fā)過程中將特定請求轉(zhuǎn)發(fā)到其他服務(wù)器
    proxy: {
      // 當請求以 '/api' 開頭時進行代理
      '/api': {
        // 指定目標服務(wù)器地址（例如后臺API接口）
        target: 'http://localhost:8888',
        
        // 設(shè)置為true，允許跨域請求時重寫源信息（Origin header）
        changeOrigin: true,

        // 路徑重寫規(guī)則，將前端應用中'/api'前綴去掉，映射到后端服務(wù)器的實際路徑上
        pathRewrite: { '^/api': '' },
      }
    }
  }
}

這段代碼配置了Vue項目在開發(fā)環(huán)境下的行為：禁用了文件保存時的ESLint檢查，并設(shè)置了一個開發(fā)服務(wù)器的代理服務(wù)。當開發(fā)環(huán)境中前端應用發(fā)起對/api開頭的請求時，該請求會被代理至http://localhost:8888服務(wù)器，并通過pathRewrite規(guī)則進行路徑重寫，解決前后端分離開發(fā)中的跨域問題。

14、訪問登錄頁面

啟動Vue項目，訪問http://localhost:8080/login

（二）創(chuàng)建后端項目 - LoginDemo

1、創(chuàng)建Spring Boot項目

設(shè)置項目名稱 LoginDemo、保存位置、語言、類型、組標識、構(gòu)件名、包名、JDK版本、Java語言級、打包類型

單擊【Next】按鈕，在彈出的對話框里選擇Spring Boot版本，添加項目相關(guān)依賴

單擊【Create】按鈕，得到初始化項目

2、配置服務(wù)器端口號

在前端項目里配置了目標服務(wù)器地址，端口是8888

在應用屬性文件application.properties里配置服務(wù)器端口號

3、啟動應用，訪問首頁在resources目錄里創(chuàng)建首頁index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
</head>
<body>
    <h3 style="text-align: center; color: red">Welcome to Spring Boot World~</h3>
</body>
</html>

修改入口程序LoginDemoApplication代碼

啟動應用程序，在瀏覽器里訪問http://localhost:8888，查看結(jié)果

4、創(chuàng)建用戶實體類創(chuàng)建bean子包，在子包里創(chuàng)建User類

package net.huawei.login.bean;

/**
 * 功能：用戶實體類
 * 作者：華衛(wèi)
 * 日期：2024年01月14日
 */
public class User {
    private int id;
    private String username;
    private String password;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

5、創(chuàng)建結(jié)果實體類創(chuàng)建result子包，在子包里創(chuàng)建Result類，封裝響應碼

package net.huawei.login.result;

/**
 * 功能：結(jié)果實體類
 * 作者：華衛(wèi)
 * 日期：2024年01月14日
 */
public class Result {
    private int code;

    public Result(int code) {
        this.code = code;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }
}

該Java類為結(jié)果實體，包含一個表示狀態(tài)碼的整型變量code，通過構(gòu)造函數(shù)初始化，并提供getter/setter方法，用于處理服務(wù)端響應的狀態(tài)信息。

6、創(chuàng)建登錄控制器

創(chuàng)建controller子包，在子包里創(chuàng)建LoginController類

package net.huawei.login.controller;

import net.huawei.login.bean.User;
import net.huawei.login.result.Result;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;

/**
 * 功能：登錄控制器
 * 作者：華衛(wèi)
 * 日期：2024年01月14日
 */
@Controller
public class LoginController {
    @CrossOrigin
    @PostMapping(value = "api/login")
    @ResponseBody
    public Result login(@RequestBody User requestUser) {
        // 獲取用戶名和密碼
        String username = requestUser.getUsername();
        String password = requestUser.getPassword();
        // 對html標簽進行轉(zhuǎn)義，防止XSS攻擊
        username = HtmlUtils.htmlEscape(username);
        // 判斷登錄是否成功
        if (username.equals("無心劍") && password.equals("903213")) {
            return new Result(200);
        } else {
            System.out.println("用戶名或密碼有誤！");
            return new Result(400);
        }
    }
}

該Java控制器處理登錄請求，接收并校驗用戶提交的用戶名密碼，進行XSS防護，并根據(jù)預設(shè)數(shù)據(jù)判斷登錄是否成功，返回包含狀態(tài)碼的結(jié)果實體。

（三）前后端整合測試

1、啟動前端項目 - login-vue 在前端項目的目錄里執(zhí)行命令：npm run serve

2、啟動后端項目 - LoginDemo

啟動入口類LoginDemoApplication

3、測試用戶登錄功能

訪問http://localhost:8080/login登錄頁面

如果輸入的用戶名或密碼有誤，彈出消息框提示用戶

輸入正確的用戶名或密碼（無心劍：903213）

單擊【登錄】按鈕，跳轉(zhuǎn)到首頁

操作錄屏演示

三、實戰(zhàn)總結(jié)

該實戰(zhàn)通過前后端分離方式，構(gòu)建基于Vue.js與Spring Boot的登錄系統(tǒng)。前端完成項目創(chuàng)建、頁面組件開發(fā)和路由配置；后端搭建Spring Boot服務(wù)，設(shè)計實體類并實現(xiàn)登錄控制器。整合階段測試用戶登錄功能，確保前后端交互正常。

到此這篇關(guān)于SpringBoot3結(jié)合Vue 3實現(xiàn)用戶登錄功能的文章就介紹到這了,更多相關(guān)SpringBoot3 Vue3 用戶登錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: