運行展示

引言

本文將詳細剖析一個基于 Spring Boot 和前端技術構建的圖書管理系統，從后端的 Java 代碼到前端的 HTML、CSS 和 JavaScript 代碼，全面展示系統的設計思路、實現細節以及技術要點。

系統整體架構

本圖書管理系統采用前后端分離的架構。后端使用 Spring Boot 框架，負責處理業務邏輯、數據持久化以及與數據庫的交互；前端使用 HTML、CSS 和 JavaScript 構建用戶界面，通過異步請求與后端進行數據交互。

后端技術實現

后端代碼文件

1. LibraryApplication.java
   作為 Spring Boot 項目的啟動入口，借助 @SpringBootApplication 注解自動配置 Spring 應用上下文，通過 SpringApplication.run 方法啟動整個應用程序。

2. application.properties
   該文件用于對 Spring Boot 應用進行配置，包含數據庫連接信息（如數據庫 URL、用戶名、密碼、驅動類名）、JPA 相關配置（數據庫方言、是否顯示 SQL 語句）等，方便開發與部署時靈活調整參數。

3. Book.java
   這是一個 JPA 實體類，代表數據庫中的 Book 表。借助 JPA 注解將類的屬性映射到數據庫表的列，包含圖書的基本信息，如標題、作者、數量等，還定義了判斷圖書是否可借閱的業務邏輯方法。

4. LibraryController.java
   作為 RESTful 風格的控制器，處理與圖書相關的各種 HTTP 請求，像獲取圖書列表、添加圖書、借閱圖書、歸還圖書、刪除圖書等操作。調用 LibraryService 中的業務邏輯方法處理請求，并將結果以合適的格式返回給前端。

5. LibraryService.java
   此為服務層接口，定義了圖書管理系統的業務邏輯方法，涵蓋獲取圖書列表、添加圖書、借閱歸還圖書等功能，為控制器層提供業務邏輯支持。

6. LibraryServiceImpl.java
   實現了 LibraryService 接口，具體實現了業務邏輯方法。調用 BookRepository 接口中的方法與數據庫交互，完成數據的查詢、插入、更新和刪除操作，同時處理一些業務邏輯判斷。

7. BookRepository.java
   繼承自 JpaRepository 接口，提供基本的 CRUD 操作方法。還可根據業務需求自定義查詢方法，Spring Data JPA 會依據方法名自動生成相應的 SQL 查詢語句，簡化數據訪問層的開發。

8. GlobalExceptionHandler.java
   利用 @RestControllerAdvice 注解對系統中可能出現的異常進行統一處理。通過 @ExceptionHandler 注解針對不同類型的異常編寫處理方法，根據異常類型返回相應的錯誤信息和 HTTP 狀態碼，增強系統的健壯性和用戶體驗。

前端代碼文件

1. index.html
   定義了圖書管理系統的整體頁面結構，包含搜索欄、篩選欄、圖書列表表格和分頁導航欄等，為用戶提供可視化的操作界面。

2. style.css
   負責頁面的樣式設計，運用 CSS 選擇器和屬性設置元素的字體、顏色、大小、邊距等樣式，通過盒模型、布局模型和響應式設計，確保頁面在不同設備和屏幕尺寸下都有良好的顯示效果。

3. script.js
   實現了系統的交互邏輯，包括分頁加載、搜索、篩選、添加圖書、借閱歸還等功能。使用 fetch API 發送異步請求與后端進行數據交互，運用 async/await 語法處理異步操作，根據后端返回的結果更新頁面顯示并給出相應提示。

1. 項目啟動與配置

項目的入口類是 LibraryApplication，使用 @SpringBootApplication 注解標記，通過 SpringApplication.run 方法啟動 Spring Boot 應用。

package com.example;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class LibraryApplication {public static void main(String[] args) {SpringApplication.run(LibraryApplication.class, args);}
}

application.properties 文件用于配置數據庫連接、JPA 以及日志等信息。例如，配置 MySQL 數據庫連接：

spring.datasource.url=jdbc:mysql://localhost:3306/java_library_db?useSSL=false&allowPublicKeyRetrieval=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

2. 實體類設計

Book 實體類使用 JPA 注解進行數據庫表映射，包含圖書的基本信息，如標題、作者、數量等。

package com.example.entity;import jakarta.persistence.*;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@NoArgsConstructor
@Entity
public class Book {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;@Column(nullable = false)private String title;@Column(nullable = false)private String author;@Column(nullable = false)private int quantity;@Column(nullable = false)private int borrowedCount;@Column(nullable = false)private String category;@Columnprivate String tags;@Columnprivate String description;@Columnprivate String publishDate;public boolean isAvailable() {return quantity > 0;}
}

3. 控制器設計

LibraryController 是系統的核心控制器，使用 @RestController 注解將其標記為 RESTful 風格的控制器，負責處理各種與圖書相關的請求，如獲取圖書列表、添加圖書、借閱圖書等。

@RestController
@RequestMapping("/api/library")
public class LibraryController {private final LibraryService libraryService;public LibraryController(LibraryService libraryService) {this.libraryService = libraryService;}@GetMappingpublic ResponseEntity<Map<String, Object>> getAllBooks(@RequestParam(required = false) String category,@RequestParam(required = false) String tag) {return ResponseEntity.ok(Map.of("success", true,"data", libraryService.getAllBooks(category, tag)));}// 其他請求處理方法...
}

4. 異常處理

GlobalExceptionHandler 類使用 @RestControllerAdvice 注解，對系統中可能出現的異常進行統一處理，如請求資源不存在、數據序列化失敗等。

@RestControllerAdvice
public class GlobalExceptionHandler {private static final Logger logger = LoggerFactory.getLogger(GlobalExceptionHandler.class);@ExceptionHandler(NoHandlerFoundException.class)public ResponseEntity<Map<String, Object>> handleNotFound() {return ResponseEntity.status(HttpStatus.NOT_FOUND).body(Collections.singletonMap("error", "請求資源不存在"));}// 其他異常處理方法...
}

前端技術實現

1. 頁面布局與樣式

index.html 文件定義了系統的整體頁面結構，style.css 文件負責頁面的樣式設計，包括搜索欄、篩選欄、表格、按鈕等元素的樣式。

/* 全局樣式 */
body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;margin: 0;padding: 0;background-color: #f9f9f9;color: #333;
}/* 搜索欄和篩選欄 */
.search-filter {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;
}

2. 交互邏輯

script.js 文件實現了系統的交互邏輯，包括分頁加載、搜索、篩選、添加圖書、借閱歸還等功能。

let currentPage = 0;
const pageSize = 10;document.addEventListener('DOMContentLoaded', async () => {await loadPage(currentPage);
});const API_BASE = '/api/library';// 核心分頁邏輯
async function loadPage(page) {showLoader();try {const response = await fetch(`${API_BASE}/paged?page=${page}&size=${pageSize}`);const result = await response.json();if (result.success) {renderBooks(result.data.content);updatePagination(result.data.totalPages, page);}} catch (error) {showToast('數據加載失敗', true);} finally {hideLoader();}
}

以上為部分代碼

系統功能亮點

1. 分頁功能

通過 loadPage 函數實現圖書列表的分頁加載，根據用戶當前所在頁碼向服務器請求相應的數據，并更新頁面顯示。同時，通過 updatePagination 函數動態禁用“上一頁”和“下一頁”按鈕，提高用戶體驗。

2. 搜索與篩選功能

用戶可以通過輸入關鍵詞進行圖書搜索，也可以通過選擇分類和標簽進行圖書篩選。系統會根據用戶輸入的條件向服務器發送請求，獲取符合條件的圖書列表并展示。

3. 圖書操作功能

支持圖書的添加、借閱、歸還和刪除操作。用戶在進行這些操作時，系統會向服務器發送相應的請求，服務器處理完成后返回結果，頁面根據結果進行相應的提示和更新。

總結

本圖書管理系統充分利用了 Spring Boot 的強大功能和前端技術的靈活性，實現了一個功能豐富、交互友好的圖書管理平臺。通過前后端分離的架構，提高了系統的可維護性和可擴展性。在實際開發中，可以根據需求進一步完善系統功能，如添加用戶管理、權限控制等模塊。同時，也可以考慮使用更先進的前端框架，如 Vue.js 或 React.js，提升用戶體驗。