?
一、實戰(zhàn)概述
-
本次實戰(zhàn)，我們深入實踐了基于數(shù)據(jù)庫的用戶登錄功能開發(fā)。首先構(gòu)建了包含id、username和password字段的
user表，并初始化了測試數(shù)據(jù)。接著，在后端Spring Boot項目中集成MySQL數(shù)據(jù)庫驅(qū)動與Druid連接池，以及MyBatis持久層框架，通過配置application.yaml文件來指定數(shù)據(jù)庫連接信息。 -
在模型層，我們保留了
User實體類以映射數(shù)據(jù)庫中的用戶表結(jié)構(gòu)；在數(shù)據(jù)訪問層，創(chuàng)建了UserMapper接口并使用注解方式編寫SQL查詢方法，用于根據(jù)用戶名和密碼從數(shù)據(jù)庫獲取用戶信息。為驗證查詢邏輯，我們編寫了單元測試確保能正確查詢到數(shù)據(jù)庫中的用戶記錄。 -
服務(wù)層上，構(gòu)建了
UserService類，注入UserMapper實例，并封裝了一個基于數(shù)據(jù)庫查詢的登錄方法。最后，在控制器層的LoginController中，通過@Autowired注入UserService，并調(diào)整登錄處理邏輯，使其調(diào)用服務(wù)層的登錄方法進行實際的身份驗證。文章來源：http://www.zghlxwxcb.cn/news/detail-789167.html -
在前端Vue項目運行的同時啟動后端Spring Boot應(yīng)用，通過前后端聯(lián)動測試展示了基于數(shù)據(jù)庫的用戶登錄功能。用戶在前端頁面輸入用戶名和密碼，經(jīng)由跨域請求傳遞至后端，通過數(shù)據(jù)庫查詢驗證身份后返回結(jié)果，成功實現(xiàn)了根據(jù)實際用戶數(shù)據(jù)進行登錄的功能，有效提高了系統(tǒng)的安全性與實用性。文章來源地址http://www.zghlxwxcb.cn/news/detail-789167.html
二、實戰(zhàn)步驟
（一）創(chuàng)建數(shù)據(jù)庫
- 創(chuàng)建
login數(shù)據(jù)庫
（二）創(chuàng)建用戶表
- 創(chuàng)建用戶表
user
- 添加用戶表記錄
（三）后端項目引入數(shù)據(jù)庫
1、添加相關(guān)依賴
- 修改
pom.xml文件，添加相關(guān)依賴
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>3.2.1</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>net.huawei</groupId>
<artifactId>LoginDemo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>LoginDemo</name>
<description>LoginDemo</description>
<properties>
<java.version>21</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.2.18</version>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>3.0.3</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
- 刷新項目依賴
2、用戶實體類保持不變
- 用戶實體類 -
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 + '\'' +
'}';
}
}
3、編寫應(yīng)用配置文件
- 將全局配置文件
application.properties更名為application.yaml
# 配置服務(wù)器
server:
port: 8888
# 配置數(shù)據(jù)源
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/login?useSSL=false&useUnicode=true&characterEncoding=UTF-8
username: root
password: 903213
# 配置Druid數(shù)據(jù)源類型
type: com.alibaba.druid.pool.DruidDataSource
druid:
initial-size: 20 # 初始連接數(shù)
min-idle: 10 # 最小空閑連接數(shù)
max-active: 100 # 最大連接數(shù)
4、創(chuàng)建用戶映射器接口
- 創(chuàng)建
mapper子包，在子包里創(chuàng)建UserMapper接口
package net.huawei.login.mapper;
import net.huawei.login.bean.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
/**
* 功能：用戶映射器接口
* 作者：華衛(wèi)
* 日期：2024年01月14日
*/
@Mapper // 納入Spring容器管理
public interface UserMapper {
@Select("select * from user where username = #{username} and password = #{password}")
User login(String username, String password);
}
- 測試用戶映射器接口
package net.huawei.login;
import net.huawei.login.bean.User;
import net.huawei.login.mapper.UserMapper;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
@SpringBootTest
class LoginDemoApplicationTests {
@Autowired // 注入用戶映射器Bean
private UserMapper userMapper;
@Test
public void testLogin() {
// 定義用戶名和Miami
String username = "無心劍";
String password = "903213";
// 調(diào)用用戶映射器登錄方法
User user = userMapper.login(username, password);
// 判斷是否登錄成功
if (user != null) {
System.out.println("恭喜，[" + username + "]登錄成功~");
} else {
System.err.println("遺憾，[" + username + "]登錄失敗~");
}
}
}
- 運行
testLogin()測試方法，查看結(jié)果
- 修改用戶名，再運行
testLogin()測試方法，查看結(jié)果
5、創(chuàng)建用戶服務(wù)類
- 創(chuàng)建
service子包，在子包里創(chuàng)建UserService類
package net.huawei.login.service;
import net.huawei.login.bean.User;
import net.huawei.login.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
* 功能：用戶服務(wù)類
* 作者：華衛(wèi)
* 日期：2024年01月14日
*/
@Service // 納入Spring容器管理
public class UserService {
@Autowired // 注入用戶映射器Bean
private UserMapper userMapper;
/**
* 用戶登錄方法
*
* @param username
* @param password
* @return 用戶實體
*/
public User login(String username, String password) {
return userMapper.login(username, password);
}
}
6、修改登錄控制器
- 登錄控制器 -
LoginController
package net.huawei.login.controller;
import net.huawei.login.bean.User;
import net.huawei.login.result.Result;
import net.huawei.login.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
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 {
@Autowired // 注入用戶服務(wù)Bean
private UserService userService;
@CrossOrigin
@PostMapping(value = "/login")
@ResponseBody
public Result login(@RequestBody User requestUser) {
// 獲取用戶名和密碼
String username = requestUser.getUsername();
String password = requestUser.getPassword();
// 對html標簽進行轉(zhuǎn)義，防止XSS攻擊
username = HtmlUtils.htmlEscape(username);
// 調(diào)用用戶服務(wù)對象的登錄方法
User user = userService.login(username, password);
// 判斷登錄是否成功
if (user != null) {
return new Result(200);
} else {
System.out.println("用戶名或密碼有誤！");
return new Result(400);
}
}
}
（四）測試用戶登錄功能
1、啟動前端項目 - login-vue
- 在前端項目目錄里執(zhí)行命令：
npm run serve
2、啟動后端項目 - LoginDemo
- 運行入口類 -
LoginDemoApplication
3、訪問前端登錄頁面
- 訪問
http://localhost:8080/login
4、測試用戶登錄功能
- 輸入用戶名
admin與密碼903213
- 單擊【登錄】按鈕
- 輸入正確的用戶名與密碼：無心劍 ：903213
- 單擊【登錄】按鈕，跳轉(zhuǎn)到首頁
- 錄屏操作演示
三、實戰(zhàn)總結(jié)
- 本次實戰(zhàn)通過構(gòu)建數(shù)據(jù)庫用戶表，實現(xiàn)了基于Spring Boot和MyBatis的數(shù)據(jù)庫登錄驗證功能。首先創(chuàng)建了包含必要字段的
user表及測試數(shù)據(jù)，然后在后端配置數(shù)據(jù)庫連接，并利用UserMapper接口與注解SQL實現(xiàn)用戶查詢。服務(wù)層封裝了登錄方法，在控制器中調(diào)用此方法進行身份驗證。前端Vue項目與后端聯(lián)動，輸入的用戶名和密碼經(jīng)過跨域請求傳遞至后端，經(jīng)數(shù)據(jù)庫查詢驗證后返回結(jié)果，成功構(gòu)建了一個安全、實用的基于數(shù)據(jù)庫用戶數(shù)據(jù)的身份驗證系統(tǒng)。
到了這里，關(guān)于Spring Boot 3 + Vue 3實戰(zhàn)：引入數(shù)據(jù)庫實現(xiàn)用戶登錄功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
