项目概述
这个项目是一个书籍管理网站，主要功能包括：
- 用户注册和登录。
- 管理员和普通用户角色管理。
- 用户登录后才能添加、删除和查看书籍详情。
- 书籍分类管理，用户可以为书籍添加自定义分类。
- 评论功能，用户可以对书籍进行评论。
- 书籍封面上传功能。
- 响应式设计，优化页面在不同设备上的显示效果。
下面都是完整代码展示，复制粘贴到编辑器即可正常使用
项目文件结构
book-manager/
├── index.html
├── books.html
├── book-details.html
├── login.html
├── register.html
├── styles/
│ ├── main.css
│ ├── books.css
│ ├── book-details.css
│ ├── login.css
│ └── register.css
├── scripts/
│ ├── main.js
│ ├── books.js
│ ├── book-details.js
│ ├── login.js
│ └── register.js
├── assets/
│ ├── covers/
│ └── images/
步骤1：创建HTML文件
index.html
这是网站的主页，包含导航链接，可以访问书籍页面、登录页面和注册页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Manager</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<h1>Welcome to Book Manager</h1>
<nav>
<a href="books.html">View Books</a>
<a href="login.html">Login</a>
<a href="register.html">Register</a>
</nav>
</header>
<main>
<p>Manage your book collection easily and efficiently.</p>
</main>
</body>
</html>
books.html
这是书籍列表页，用户可以在这里添加、删除、编辑书籍，进行搜索和分类。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Books</title>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/books.css">
</head>
<body>
<header>
<h1>Books</h1>
<nav>
<a href="index.html">Home</a>
<a href="login.html" id="login-link">Login</a>
<a href="register.html" id="register-link">Register</a>
<a href="#" id="logout-link" style="display:none;">Logout</a>
</nav>
</header>
<main>
<form id="book-form" style="display:none;">
<input type="text" id="title" placeholder="Book Title" required>
<input type="text" id="author" placeholder="Author" required>
<textarea id="description" placeholder="Description"></textarea>
<input type="file" id="cover" accept="image/*">
<button type="submit">Add Book</button>
</form>
<div id="filter">
<input type="text" id="search" placeholder="Search books...">
<select id="category">
<option value="">All Categories</option>
<option value="Fiction">Fiction</option>
<option value="Non-fiction">Non-fiction</option>
<option value="Science">Science</option>
<option value="History">History</option>
</select>
</div>
<ul id="book-list"></ul>
</main>
<script src="scripts/main.js"></script>
<script src="scripts/books.js"></script>
</body>
</html>
book-details.html
展示单本书籍的详细信息，并提供评论功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">