一、實(shí)戰(zhàn)概述

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

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

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

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

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

• 查看Node和npm版本
  
• 安裝vue腳手架，執(zhí)行命令：nmp install -g @vue/cli
  

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

• 在命令行窗口里執(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)換，并具有攔截請求/響應(yīng)、取消請求、設(shè)置超時等功能。 Axios遵循Promise API設(shè)計(jì)，易于理解和使用，廣泛應(yīng)用于現(xiàn)代Web項(xiàng)目中進(jìn)行異步數(shù)據(jù)交互。
• 進(jìn)入login-vue目錄，執(zhí)行命令：npm install axios --save
  

3、安裝vue-router模塊

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

4、安裝less和less-loader模塊

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

5、運(yùn)行Vue項(xiàng)目

• 執(zhí)行命令：npm run serve
  
• 給出訪問應(yīng)用的網(wǎng)址
  

6、在瀏覽器里訪問首頁

• 訪問http://local:8080
  

7、在IDEA里打開Vue項(xiàng)目

• 打開Vue項(xiàng)目 - 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響應(yīng)式數(shù)據(jù)綁定用戶輸入，并在點(diǎn)擊登錄按鈕時通過axios發(fā)送POST請求。根據(jù)后端返回的code進(jìn)行判斷：200則跳轉(zhuǎn)至/index頁面，400則提示錯誤并清空密碼重置焦點(diǎn)。同時定義了簡潔的登錄界面樣式。

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)建路由器實(shí)例
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 導(dǎo)出全局注冊
export default router;

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

11、編寫應(yīng)用根組件

• 應(yīng)用Vue組件 - App.vue是 Vue.js 應(yīng)用程序的根組件，負(fù)責(zé)整個應(yīng)用的布局與整體結(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應(yīng)用的根組件（App.vue），包含一個logo圖片和動態(tài)路由視圖（<router-view/>）。樣式設(shè)置字體、抗鋸齒及居中對齊。

12、編寫主入口腳本

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

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

// 導(dǎo)入根組件App.vue，它是整個應(yīng)用程序的主視圖模板
import App from './App.vue';

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

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

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

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

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

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

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

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

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

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

14、訪問登錄頁面

• 啟動Vue項(xiàng)目，訪問http://localhost:8080/login
  

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

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

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

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

• 單擊【Create】按鈕，得到初始化項(xiàng)目
  

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

• 在前端項(xiàng)目里配置了目標(biāo)服務(wù)器地址，端口是8888
  

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

3、啟動應(yīng)用，訪問首頁

• 在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代碼
  
• 啟動應(yīng)用程序，在瀏覽器里訪問http://localhost:8888，查看結(jié)果
  

4、創(chuàng)建用戶實(shí)體類

• 創(chuàng)建bean子包，在子包里創(chuàng)建User類
  

package net.huawei.login.bean;

/**
 * 功能：用戶實(shí)體類
 * 作者：華衛(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é)果實(shí)體類

• 創(chuàng)建result子包，在子包里創(chuàng)建Result類，封裝響應(yīng)碼
  

package net.huawei.login.result;

/**
 * 功能：結(jié)果實(shí)體類
 * 作者：華衛(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é)果實(shí)體，包含一個表示狀態(tài)碼的整型變量code，通過構(gòu)造函數(shù)初始化，并提供getter/setter方法，用于處理服務(wù)端響應(yīng)的狀態(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標(biāo)簽進(jìn)行轉(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控制器處理登錄請求，接收并校驗(yàn)用戶提交的用戶名密碼，進(jìn)行XSS防護(hù)，并根據(jù)預(yù)設(shè)數(shù)據(jù)判斷登錄是否成功，返回包含狀態(tài)碼的結(jié)果實(shí)體。

（三）前后端整合測試

1、啟動前端項(xiàng)目 - login-vue

• 在前端項(xiàng)目的目錄里執(zhí)行命令：npm run serve
  

2、啟動后端項(xiàng)目 - LoginDemo

• 啟動入口類LoginDemoApplication
  

3、測試用戶登錄功能

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

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

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

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

• 操作錄屏演示
  文章來源地址http://www.zghlxwxcb.cn/news/detail-795758.html

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

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

到了這里，關(guān)于Spring Boot 3 + Vue 3實(shí)戰(zhàn)：實(shí)現(xiàn)用戶登錄功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！