我将为您提供一个完整的、功能齐全的Java图书管理系统网页前端（HTML），这个页面将包含所有核心功能的UI界面，并使用现代的设计风格，您可以直接复制这些代码到一个.html文件中,在浏览器中打开即可看到效果。
（图片来源网络，侵删）
这个设计将包含：
- 响应式布局：适配桌面和移动设备。
- 现代UI风格：使用卡片、阴影和柔和的配色。
- 功能模块：导航栏、图书列表、添加/编辑/删除图书的模态框、搜索功能。
- 交互逻辑：使用JavaScript实现增删改查、搜索、分页等前端交互。
最终效果预览
第1步：创建HTML文件 (index.html)
这是整个页面的骨架，包含了结构、样式和脚本。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">Java图书管理系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
/* --- 全局样式和变量 --- */
:root {
--primary-color: #3498db;
--secondary-color: #2c3e50;
--danger-color: #e74c3c;
--success-color: #2ecc71;
--light-bg: #ecf0f1;
--white: #ffffff;
--text-color: #333;
--border-color: #ddd;
--shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--light-bg);
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* --- 头部样式 --- */
header {
background-color: var(--secondary-color);
color: var(--white);
padding: 1rem 0;
box-shadow: var(--shadow);
margin-bottom: 2rem;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo h1 {
font-size: 1.8rem;
}
.logo i {
margin-right: 10px;
color: var(--primary-color);
}
/* --- 导航和操作区 --- */
.controls {
background-color: var(--white);
padding: 1.5rem;
border-radius: 8px;
box-shadow: var(--shadow);
margin-bottom: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
justify-content: space-between;
}
.search-bar {
display: flex;
align-items: center;
flex: 1;
min-width: 250px;
}
.search-bar input {
flex-grow: 1;
padding: 10px 15px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 1rem;
outline: none;
transition: border-color 0.3s;
}
.search-bar input:focus {
border-color: var(--primary-color);
}
.search-bar button {
padding: 10px 15px;
margin-left: 10px;
background-color: var(--primary-color);
color: var(--white);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.search-bar button:hover {
background-color: #2980b9;
}
.btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.btn-primary {
background-color: var(--primary-color);
color: var(--white);
}
.btn-primary:hover {
background-color: #2980b9;
}
.btn-success {
background-color: var(--success-color);
color: var(--white);
}
.btn-danger {
background-color: var(--danger-color);
color: var(--white);
}
/* --- 图书列表表格 --- */
.table-container {
background-color: var(--white);
padding: 1.5rem;
border-radius: 8px;
box-shadow: var(--shadow);
overflow-x: auto;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background-color: #f8f9fa;
font-weight: 600;
color: var(--secondary-color);
}
tr:hover {
background-color: #f8f9fa;
}
.actions {
display: flex;
gap: 10px;
}
.btn-sm {
padding: 5px 10px;
font-size: 0.875rem;
}
/* --- 模态框样式 --- */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.3s;
}
.modal-content {
background-color: var(--white);
margin: 5% auto;
padding: 20px;
border-radius: 8px;
width: 90%;
max-width: 500px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
animation: slideIn 0.3s;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-color);
}
.modal-header h2 {
color: var(--secondary-color);
}
.close {
font-size: 28px;
font-weight: bold;
cursor: pointer;
color: #aaa;
transition: color 0.3s;
}
.close:hover {
color: var(--danger-color);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
.form-group input {
width: 100%;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 5px;
font-size: 1rem;
outline: none;
}
.form-group input:focus {
border-color: var(--primary-color);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
/* --- 分页样式 --- */
.pagination {
display: flex;
justify-content: center;
align-items: center;
margin-top: 2rem;
gap: 10px;
}
.pagination a {
color: var(--secondary-color);
padding: 8px 16px;
text-decoration: none;
border: 1px solid var(--border-color);
transition: all 0.3s;
}
.pagination a:hover, .pagination a.active {
background-color: var(--primary-color);
color: var(--white);
border-color: var(--primary-color);
}
/* --- 动画 --- */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideIn {
from { transform: translateY(-50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.header-content, .controls {
flex-direction: column;
text-align: center;
}
.search-bar {
width: 100%;
}
.table-container {
padding: 10px;
}
.actions {
flex-direction: column;
}
}
</style>
</head>
<body>
<header>
<div class="container header-content">
<div class="logo">
<h1><i class="fas fa-book"></i> Java图书管理系统</h1>
</div>
<div class="header-info">
<span id="current-user">欢迎, 管理员</span>
</div>
</div>
</header>
<main class="container">
<!-- 控制栏：搜索和添加 -->
<div class="controls">
<div class="search-bar">
<input type="text" id="search-input" placeholder="搜索书名、作者或ISBN...">
<button onclick="searchBooks()"><i class="fas fa-search"></i> 搜索</button>
</div>
<button class="btn btn-primary" onclick="openAddModal()">
<i class="fas fa-plus"></i> 添加新图书
</button>
</div>
<!-- 图书列表表格 -->
<div class="table-container">
<table id="books-table">
<thead>
<tr>
<th>ID</th>
<th>书名</th>
<th>作者</th>
<th>ISBN</th>
<th>出版日期</th>
<th>库存</th>
<th>操作</th>
</tr>
</thead>
<tbody id="books-tbody">
<!-- 图书数据将通过JavaScript动态加载到这里 -->
</tbody>
</table>
</div>
<!-- 分页 -->
<div class="pagination" id="pagination">
<!-- 分页链接将通过JavaScript动态生成 -->
</div>
</main>
<!-- 添加/编辑图书的模态框 -->
<div id="book-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 id="modal-title">添加新图书</h2>
<span class="close" onclick="closeModal()">×</span>
</div>
<form id="book-form">
<input type="hidden" id="book-id">
<div class="form-group">
<label for="book-title">书名</label>
<input type="text" id="book-title" required>
</div>
<div class="form-group">
<label for="book-author">作者</label>
<input type="text" id="book-author" required>
</div>
<div class="form-group">
<label for="book-isbn">ISBN</label>
<input type="text" id="book-isbn" required>
</div>
<div class="form-group">
<label for="book-date">出版日期</label>
<input type="date" id="book-date" required>
</div>
<div class="form-group">
<label for="book-stock">库存</label>
<input type="number" id="book-stock" min="0" required>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" onclick="closeModal()">取消</button>
<button type="submit" class="btn btn-success">保存</button>
</div>
</form>
</div>
</div>
<script>
// --- 模拟数据 ---
let books = [
{ id: 1, title: "Java核心技术 卷I", author: "Cay S. Horstmann", isbn: "9787111544937", publishDate: "2025-09-01", stock: 50 },
{ id: 2, title: "Effective Java", author: "Joshua Bloch", isbn: "9787115545396", publishDate: "2025-04-01", stock: 30 },
{ id: 3, title: "深入理解Java虚拟机", author: "周志明", isbn: "9787115425441", publishDate: "2025-11-01", stock: 20 },
{ id: 4, title: "Spring Boot实战", author: "汪云飞", isbn: "9787121320304", publishDate: "2025-05-01", stock: 40 },
{ id: 5, title: "算法（第4版）", author: "Robert Sedgewick", isbn: "9787111407010", publishDate: "2012-10-01", stock: 25 },
{ id: 6, title: "设计模式：可复用面向对象软件的基础", author: "Erich Gamma", isbn: "9787111211624", publishDate: "2007-09-01", stock: 15 },
{ id: 7, title: "代码整洁之道", author: "Robert C. Martin", isbn: "9787115214335", publishDate: "2010-01-01", stock: 35 },
{ id: 8, title: "重构：改善既有代码的设计", author: "Martin Fowler", isbn: "9787115508645", publishDate: "2025-03-01", stock: 22 }
];
let filteredBooks = [...books];
let currentPage = 1;
const booksPerPage = 5;
// --- 页面加载时初始化 ---
document.addEventListener('DOMContentLoaded', () => {
renderBooksTable();
renderPagination();
// 为表单添加提交事件
document.getElementById('book-form').addEventListener('submit', handleFormSubmit);
});
// --- 渲染图书列表 ---
function renderBooksTable() {
const tbody = document.getElementById('books-tbody');
tbody.innerHTML = ''; // 清空现有内容
const startIndex = (currentPage - 1) * booksPerPage;
const endIndex = startIndex + booksPerPage;
const paginatedBooks = filteredBooks.slice(startIndex, endIndex);
if (paginatedBooks.length === 0) {
tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 20px;">没有找到图书。</td></tr>';
return;
}
paginatedBooks.forEach(book => {
const row = `
<tr>
<td>${book.id}</td>
<td>${book.title}</td>
<td>${book.author}</td>
<td>${book.isbn}</td>
<td>${book.publishDate}</td>
<td>${book.stock}</td>
<td class="actions">
<button class="btn btn-primary btn-sm" onclick="editBook(${book.id})">
<i class="fas fa-edit"></i> 编辑
</button>
<button class="btn btn-danger btn-sm" onclick="deleteBook(${book.id})">
<i class="fas fa-trash"></i> 删除
</button>
</td>
</tr>
`;
tbody.innerHTML += row;
});
}
// --- 渲染分页 ---
function renderPagination() {
const pagination = document.getElementById('pagination');
pagination.innerHTML = '';
const totalPages = Math.ceil(filteredBooks.length / booksPerPage);
if (totalPages <= 1) return;
// 上一页
const prevDisabled = currentPage === 1 ? 'disabled' : '';
pagination.innerHTML += `<a href="#" onclick="changePage(${currentPage - 1})" ${prevDisabled}><i class="fas fa-chevron-left"></i></a>`;
// 页码
for (let i = 1; i <= totalPages; i++) {
const activeClass = i === currentPage ? 'active' : '';
pagination.innerHTML += `<a href="#" class="${activeClass}" onclick="changePage(${i})">${i}</a>`;
}
// 下一页
const nextDisabled = currentPage === totalPages ? 'disabled' : '';
pagination.innerHTML += `<a href="#" onclick="changePage(${currentPage + 1})" ${nextDisabled}><i class="fas fa-chevron-right"></i></a>`;
}
function changePage(page) {
const totalPages = Math.ceil(filteredBooks.length / booksPerPage);
if (page < 1 || page > totalPages) return;
currentPage = page;
renderBooksTable();
renderPagination();
}
// --- 搜索功能 ---
function searchBooks() {
const searchTerm = document.getElementById('search-input').value.toLowerCase();
filteredBooks = books.filter(book =>
book.title.toLowerCase().includes(searchTerm) ||
book.author.toLowerCase().includes(searchTerm) ||
book.isbn.toLowerCase().includes(searchTerm)
);
currentPage = 1; // 重置到第一页
renderBooksTable();
renderPagination();
}
// --- 模态框操作 ---
function openAddModal() {
document.getElementById('modal-title').textContent = '添加新图书';
document.getElementById('book-form').reset();
document.getElementById('book-id').value = '';
document.getElementById('book-modal').style.display = 'block';
}
function editBook(id) {
const book = books.find(b => b.id === id);
if (!book) return;
document.getElementById('modal-title').textContent = '编辑图书';
document.getElementById('book-id').value = book.id;
document.getElementById('book-title').value = book.title;
document.getElementById('book-author').value = book.author;
document.getElementById('book-isbn').value = book.isbn;
document.getElementById('book-date').value = book.publishDate;
document.getElementById('book-stock').value = book.stock;
document.getElementById('book-modal').style.display = 'block';
}
function closeModal() {
document.getElementById('book-modal').style.display = 'none';
}
// 点击模态框外部关闭
window.onclick = function(event) {
const modal = document.getElementById('book-modal');
if (event.target == modal) {
closeModal();
}
}
// --- 表单提交处理 ---
function handleFormSubmit(e) {
e.preventDefault(); // 阻止表单默认提交
const bookId = document.getElementById('book-id').value;
const bookData = {
title: document.getElementById('book-title').value,
author: document.getElementById('book-author').value,
isbn: document.getElementById('book-isbn').value,
publishDate: document.getElementById('book-date').value,
stock: parseInt(document.getElementById('book-stock').value, 10)
};
if (bookId) {
// 编辑模式
const index = books.findIndex(b => b.id == bookId);
if (index !== -1) {
books[index] = { ...books[index], ...bookData };
showNotification('图书信息已更新！', 'success');
}
} else {
// 添加模式
const newId = Math.max(...books.map(b => b.id), 0) + 1;
books.push({ id: newId, ...bookData });
showNotification('新图书已添加！', 'success');
}
closeModal();
searchBooks(); // 重新渲染列表（因为搜索功能会重置和过滤）
}
// --- 删除功能 ---
function deleteBook(id) {
if (confirm('确定要删除这本图书吗？此操作不可撤销。')) {
books = books.filter(book => book.id !== id);
showNotification('图书已删除！', 'danger');
searchBooks(); // 重新渲染列表
}
}
// --- 通知功能 ---
function showNotification(message, type = 'info') {
// 创建通知元素
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 15px 20px;
background-color: ${type === 'success' ? 'var(--success-color)' : type === 'danger' ? 'var(--danger-color)' : 'var(--primary-color)'};
color: white;
border-radius: 5px;
box-shadow: var(--shadow);
z-index: 2000;
animation: slideInRight 0.3s ease, slideOutRight 0.3s ease 2.7s;
`;
notification.textContent = message;
document.body.appendChild(notification);
// 3秒后自动移除
setTimeout(() => {
if (notification.parentNode) {
notification.parentNode.removeChild(notification);
}
}, 3000);
}
// 添加滑入滑出动画
const style = document.createElement('style');
style.textContent = `
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
`;
document.head.appendChild(style);
</script>
</body>
</html>
第2步：代码解析
HTML 结构 (<body>)
<header>: 网站的头部,包含Logo和用户信息。<main class="container">: 主要内容区域，所有功能都在这里。.controls: 一个控制栏，包含搜索框和“添加新图书”按钮。.table-container: 包含图书列表的<table>。#pagination: 分页导航的容器。
<div id="book-modal" class="modal">: 一个隐藏的模态框，用于添加和编辑图书信息，它包含一个表单,表单字段与图书属性对应。<link>: 引入了Font Awesome图标库,让按钮和界面更美观。
CSS 样式 (<style>)
- CSS变量 (
root): 定义了颜色、阴影等全局变量,方便统一管理和修改主题。 - 响应式布局: 使用了Flexbox (
display: flex) 和媒体查询 (@media (max-width: 768px)),确保在手机和平板上也能良好显示。 - 卡片式设计: 将每个功能模块（如控制栏、表格、模态框）都放在一个带圆角和阴影的白色卡片中,符合现代Web设计风格。
- 交互效果: 为按钮、链接、表格行等添加了
hover效果,提升了用户体验。 - 模态框样式: 使用
position: fixed实现居中显示的弹窗，并添加了背景遮罩 (rgba(0, 0, 0, 0.5))。 - 动画: 使用
@keyframes定义了简单的淡入 (fadeIn) 和滑入 (slideIn) 动画,让界面切换更流畅。
JavaScript 逻辑 (<script>)
这是整个页面的“大脑”,负责处理所有用户交互和数据操作。
- 模拟数据 (
books数组): 在实际项目中，这里的数据会从后端Java API获取,我们用JavaScript数组来模拟数据库。 - 核心函数:
renderBooksTable(): 根据filteredBooks数组和当前页码,动态生成表格的HTML并插入到页面中。renderPagination(): 根据总数据量和每页显示数量,生成分页链接。searchBooks(): 监听搜索框的输入，实时过滤books数组,并更新显示。openAddModal()/editBook(): 控制模态框的显示,并在编辑时将现有数据填充到表单中。closeModal(): 关闭模态框。handleFormSubmit(): 处理表单提交，判断是新增还是编辑，然后更新books数组,并重新渲染页面。deleteBook(): 在用户确认后，从books数组中移除对应项。showNotification(): 创建一个临时的通知元素，显示操作成功或失败的信息，几秒后自动消失，替代了传统的alert。
如何与后端Java集成？
这个前端页面是完全独立的，要与后端Java项目（例如使用Spring Boot）集成,您需要做以下改动：
（图片来源网络，侵删）
-
数据获取:
-
将模拟的
books数组删除。 -
使用
fetchAPI 或axios库在页面加载时从后端获取数据。 -
示例 (使用
fetch):async function loadBooksFromServer() { try { const response = await fetch('/api/books'); // Spring Boot的API端点 if (!response.ok) { throw new Error('网络响应不正常'); } books = await response.json(); // 假设后端返回JSON数组 searchBooks(); // 加载后重新渲染列表 } catch (error) { console.error('获取图书数据失败:', error); showNotification('无法连接到服务器，请检查网络。', 'danger'); } } // 在DOMContentLoaded中调用 document.addEventListener('DOMContentLoaded', loadBooksFromServer);
-
-
数据提交:
-
修改
handleFormSubmit函数，不再操作本地books数组，而是使用fetch将数据发送到后端。 -
示例 (发送POST请求):
async function handleFormSubmit(e) { e.preventDefault(); const bookData = { /* 从表单获取数据 */ }; const bookId = document.getElementById('book-id').value; const url = bookId ? `/api/books/${bookId}` : '/api/books'; const method = bookId ? 'PUT' : 'POST'; try { const response = await fetch(url, { method: method, headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(bookData), }); if (response.ok) { showNotification(bookId ? '更新成功！' : '添加成功！', 'success'); closeModal(); loadBooksFromServer(); // 重新加载最新数据 } else { throw new Error('操作失败'); } } catch (error) { showNotification('操作失败，请重试。', 'danger'); } }
-
-
数据删除:
- 修改
deleteBook函数，使用fetch发送DELETE请求到后端。 - 示例:
async function deleteBook(id) { if (confirm('确定要删除吗？')) { try { const response = await fetch(`/api/books/${id}`, { method: 'DELETE' }); if (response.ok) { showNotification('删除成功！', 'success'); loadBooksFromServer(); } else { throw new Error('删除失败'); } } catch (error) { showNotification('删除失败，请重试。', 'danger'); } } }
- 修改
通过以上步骤，您就可以将这个功能完善的前端界面与强大的Java后端完美地结合在一起,构建一个真正意义上的全栈Java图书管理系统。
