devbox
神奇cpp
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

10分钟学习如何使用 Express+Mysql开发图书管理系统_数据库设置一个图书管理系统

作者：神奇cpp | 2024-07-11 00:42:36

赞

踩

数据库设置一个图书管理系统

阅读前必读

1分钟学会使用Express+MySQL实现注册功能

在1分钟内，使用 Express 快速编写一个简单的登录功能。

Express EJS渲染技术详解

在开始之前，请确保已在您的电脑上安装了 Node.js 和 npm和MySQL，并且它们的版本分别为：

  • node v16.14.2
  • npm 8.5.0
  • mysql 5.7

开发工具：Visual Studio Code（不唯一，也可以是其他开发工具）。

前方高能，可能阅读需要10分钟

摘要

        本文将介绍如何使用 Express 框架和 MySQL 数据库来搭建一个简单而实用的图书管理系统。通过这个系统，用户可以进行图书的增删改查操作，并能够实现基本的用户权限管理。本文将详细介绍系统的需求分析、数据库设计、后端接口的开发与测试等方面，并附上相关的代码示例。

一、需求分析

        在开始系统的开发之前，我们首先需要进行需求分析，明确系统的功能和特性。本文将提出以下几个基本需求：

管理员登录：系统应该支持管理员登录。

用户的增删改查：系统应该提供用户的增加、删除、修改和查询功能，以方便管理员对用户信息的管理。

图书的增删改查：系统应该提供图书的增加、删除、修改和查询功能，以方便管理员对图书信息的管理。

借阅和归还管理：系统应该支持用户借阅图书和归还图书的管理，包括借阅记录的保存和查询。

​

系统功能结构图 

二、数据库设计

我将介绍如何设计一个简单而有效的关系型数据库模型，以满足管理员登录，以及图书的增删改查，借阅和归还管理等功能的需求。

2.1 数据表设计

首先，我们需要设计几个核心的数据表来存储系统的数据：

用户表（users）：用于存储用户的登录信息，包括用户ID、用户名和密码等字段。

图书表（books）：用于存储图书的相关信息，包括图书ID、名称、作者和出版社等字段。

借阅记录表（borrow_records）：用于记录用户借阅图书的情况，包括记录ID、用户ID、图书ID、借阅日期和归还日期等字段。

2.2 数据表创建

首先我们在MySQL中创建一个名为 “book_library”的数据库。

CREATE DATABASE book_library;

再打开“book_library” 数据库

USE book_library;

接下来，我们在“book_library”数据库中创建这些数据表。

创建用户表（users）:

  1. CREATE TABLE users (
  2.   id INT AUTO_INCREMENT PRIMARY KEY,
  3.   username VARCHAR(50) NOT NULL,
  4.   password VARCHAR(50) NOT NULL
  5. );

创建图书表（books）:

  1. CREATE TABLE books (
  2.   id INT AUTO_INCREMENT PRIMARY KEY,
  3.   title VARCHAR(100) NOT NULL,
  4.   author VARCHAR(50),
  5.   publisher VARCHAR(50)
  6. );

创建管理员表（admin）:

  1. CREATE TABLE admin (
  2.   id INT AUTO_INCREMENT PRIMARY KEY,
  3.   username VARCHAR(50) NOT NULL,
  4.   password VARCHAR(50) NOT NULL,
  5.   nick_name VARCHAR(50) NOT NULL
  6. );

插入管理员数据：

INSERT INTO admin (username, password, nick_name) VALUES ('root', 'root', '管理员');

创建借阅记录表（borrow_records）:

  1. CREATE TABLE borrow_records (
  2.   id INT AUTO_INCREMENT PRIMARY KEY,
  3.   user_id INT NOT NULL,
  4.   book_id INT NOT NULL,
  5.   borrow_date DATE NOT NULL,
  6.   return_date DATE
  7. );

​

三、后端接口的开发

3.1 项目准备工作

3.1.1 创建项目目录

首先我们创建一个名为“book-server”的项目目录。

​

3.1.2 打开项目目录

将创建好的 “book-server”文件夹拖动到vscode图标进行打开（也可以通过其他方式打开）。

​

3.1.2 初始化项目

我们在终端输入 "npm init -y" 命令对项目进行初始化。

npm init -y

我们成功初始化项目后，项目目录将会生成一个重要的文件“package.json”。 

​

3.1.3 安装框架包

 在项目终端使用以下下命令可以快速安装框架包：

  1. Express：Node.js Web应用程序框架
npm install express

     2.Express-session：处理会话（Session）的中间件

npm install express-session

     3.ejs：模版引擎

npm install ejs

     4.mysql： MySQL数据库进行交互的软件包

npm install mysql

     5.nodemon：热部署（无需手动重启服务器）

npm install nodemon

下载成功后，你会发现在项目目录下出现了一个名为 node_modules 的文件夹和一个名为 package-lock.json 的文件。

​

 3.1.3 创建项目结构目录

在项目的根目录下创建以下目录文件夹:

  1. public 文件夹: 用于存放静态资源文件，例如 CSS、JavaScript 和图像文件。

     2.routes 文件夹: 用于存放路由文件。在 Express 中，路由用于定义不同 URL 路径的处理逻辑。

  3.utils 文件夹：用于存放实用工具函数或模块。

    4.views 文件夹：用于存放视图文件，通常是使用模板引擎生成动态 HTML 页面的模板文件。

 ​

3.2 编写后端代码

3.2.1 创建入口文件 app.js

在您的项目的根目录下，创建一个名为app.js的文件。

​

3.2.1.1 引入模块
  1. const express = require("express");
  2. const bodyParser = require("body-parser");
  3. const session = require("express-session");
  4. const path = require("path");

​

3.2.1.2 创建express应用程序

express() 函数是 Express 框架的顶级函数，调用它会返回一个 Express 应用程序实例。

const app = express();

​

3.2.1.3 注册解析请求体

body-parser 中间件来解析 POST 请求的请求体，并将解析后的数据添加到 req.body 对象中。

app.use(bodyParser.urlencoded({ extended: false }));

​

3.2.1.4 注册会话

session 方法接受一个对象作为参数，其中 secret 是用于对会话数据进行加密的密钥，resave 和 saveUninitialized 分别指定是否在每次请求中重新保存会话和是否自动初始化未经过初始化的会话。

app.use(session({ secret: "secret", resave: false, saveUninitialized: true }));

​

3.2.1.5 注册静态资源目录

所有放置在名为 "public" 的文件夹中的静态文件（例如 CSS、JavaScript 和图像）可以通过相对路径直接从客户端浏览器访问。

app.use(express.static("public"));

​

3.2.1.5 设置ejs模版引擎

当我们在路由中使用 res.render 方法来渲染页面时，Express 将使用 EJS 引擎来编译和渲染模板文件。

app.set("view engine", "ejs");

​

3.2.1.6 指定视图文件夹路径

将模板文件夹设置为应用程序所在的根目录下的 views 文件夹。

app.set("views", path.join(__dirname, "views"));

​

 3.2.1.7 配置项目监听端口

app.listen() 用于启动 HTTP 服务器的方法。

  1. app.listen(8080, () => {
  2.   console.log("http://127.0.0.1:8080");
  3. });

​

3.2.1.8 简单测试

在终端中输入以下命令来启动项目

nodemon app.js

​

3.3 创建数据库工具

为了与数据库进行交互，我们需要在应用程序中使用相应的数据库驱动程序，并编写代码来处理与数据库的连接等操作。

在utils目录文件夹下创建 “db.js”文件，并编写以下内容:

  1. const mysql = require("mysql");
  2. // 创建数据库连接
  3. const connection = mysql.createConnection({
  4.   host: "localhost",
  5.   user: "你的数据库用户名",
  6.   password: "你的数据库密码",
  7.   database: "book_library",
  8. });
  9.  
  10. // 连接数据库
  11. connection.connect();
  12.  
  13. module.exports = connection;

我们将要将数据库的user和password替换成你的数据库用户名与密码。

user: "你的数据库用户名",
password: "你的数据库密码",

在utils目录文件夹下创建 “formattedDate.js”文件，主要用于生成格式化日期，并编写一下内容：

  1. const currentDate = new Date();
  2. const year = currentDate.getFullYear();
  3. const month = String(currentDate.getMonth() + 1).padStart(2, '0');
  4. const day = String(currentDate.getDate()).padStart(2, '0');
  5.  
  6. const formattedDate = `${year}-${month}-${day}`;
  7.  
  8. module.exports = formattedDate;

 ​

3.4 创建路由

3.4.1 创建页面路由文件

本路由模块用于定义不同路径的处理函数。

在routes目录文件夹下创建一个名为 “pageRoutes.js” 文件。

路由模块使用了 express.Router() 方法实例化一个路由器对象

  1. const express = require("express");
  2. const router = express.Router();

 因为接口中有数据库查询引入了 db.js工具

const db = require('../utils/db');

当客户端访问根路径时，res.redirect()函数是 重定向到登录页面。

  1. router.get("/", (req, res) => {
  2.   res.redirect("/login");
  3. });

当客户端访问登录页面时，渲染包含登录表单的视图, login是我们的login.ejs页面，在后面将会编写。。

  1. router.get("/login", (req, res) => {
  2.     res.render("login");
  3. });

当客户端访问添加用户界面时，渲染包含用户信息表单的视图。

  1. router.get("/page_user", (req, res) => {
  2.   res.render("add_user");
  3. });

当客户端访问添加图书界面时，渲染包含图书信息表单的视图。

  1. router.get("/page_book", (req, res) => {
  2.   res.render("add_book");
  3. });

当客户端访问借阅图书界面时，从数据库中获取所有用户和图书的信息，并将其传递到包含借阅记录表单的视图中进行渲染。

这里用到了两个sql查询语句：

查询全部用户的id和username

SELECT id, username FROM users

 查询全部图书的id和title

SELECT id, title FROM books

 usersResult 是从数据库中查询到的用户信息数组，每个用户信息对象包含了 id 和 username 两个属性。然后，通过 map() 方法对 usersResult 数组进行遍历，返回一个新的对象数组。、

usersResult.map(user => ({ id: user.id, name: user.username }));

这段代码的作用是将一个名为 add_record 的模板文件渲染成 HTML，并将数据 users 和 books 注入到模板中。

res.render('add_record', { users, books });
  1. router.get('/page_record', (req, res) => {
  2.   const sqlUsers = 'SELECT id, username FROM users';
  3.   const sqlBooks = 'SELECT id, title FROM books';
  4.   db.query(sqlUsers, (err, usersResult) => {
  5.     if (err) throw err;
  6.     const users = usersResult.map(user => ({ id: user.id, name: user.username }));
  7.     db.query(sqlBooks, (err, booksResult) => {
  8.       if (err) throw err;
  9.       const books = booksResult.map(book => ({ id: book.id, title: book.title }));
  10.       res.render('add_record', { users, books });
  11.     });
  12.   });
  13. });
module.exports = router;
pageRoutes.js 文件整体代码:
  1. const express = require("express");
  2. const router = express.Router();
  3. const db = require('../utils/db');
  4.  
  5. router.get("/", (req, res) => {
  6.   res.redirect("/login");
  7. });
  8.  
  9. router.get("/login", (req, res) => {
  10.     res.render("login");
  11. });
  12.  
  13. /**
  14.  * 添加用户界面
  15.  */
  16. router.get("/page_user", (req, res) => {
  17.   res.render("add_user");
  18. });
  19.  
  20. /**
  21.  * 添加图书界面
  22.  */
  23. router.get("/page_book", (req, res) => {
  24.   res.render("add_book");
  25. });
  26.  
  27. /**
  28.  * 借阅图书界面
  29.  */
  30. router.get('/page_record', (req, res) => {
  31.   const sqlUsers = 'SELECT id, username FROM users';
  32.   const sqlBooks = 'SELECT id, title FROM books';
  33.   db.query(sqlUsers, (err, usersResult) => {
  34.     if (err) throw err;
  35.     const users = usersResult.map(user => ({ id: user.id, name: user.username }));
  36.     db.query(sqlBooks, (err, booksResult) => {
  37.       if (err) throw err;
  38.       const books = booksResult.map(book => ({ id: book.id, title: book.title }));
  39.       res.render('add_record', { users, books });
  40.     });
  41.   });
  42. });
  43.  
  44. module.exports = router;

​

3.4.2 创建登录和退出路由文件

本路由模块用于实现用户登录和退出登录的处理函数。

在routes目录文件夹下创建一个名为 “loginRoutes.js” 文件。

引入模块

  1. const express = require("express");
  2. const router = express.Router();
  3. const connection = require("../utils/db");

用户登录函数：当用户提交登录表单时，Express 会将表单数据封装在 req.body 中，其中包括用户名和密码。

const { username, password } = req.body;

查询用户名和密码是否相同的用户

SELECT * FROM admin WHERE username = '' AND password = ''

使用了 connection.query 方法来执行 SQL 查询。如果查询成功，则将用户信息保存在 req.session.user 中，然后重定向到 /users 路由；

  1. router.post("/", (req, res) => {
  2.   const { username, password } = req.body;
  3.   connection.query(
  4.     "SELECT * FROM admin WHERE username = ? AND password = ?",
  5.     [username, password],
  6.     (error, results) => {
  7.       if (error) throw error;
  8.       if (results.length > 0) {
  9.         req.session.user = results;
  10.         res.redirect("/users");
  11.       } else {
  12.         res.status(401).json({ message: "账户或密码错误" });
  13.       }
  14.     }
  15.   );
  16. });

用户退出函数： 当用户访问 /logout 路由时，会清除 req.session 中保存的用户信息，并重定向到 /login 路由。

  1. /**
  2.  * 退出登录接口
  3.  * @route GET /api/logout
  4.  * @returns {object} 退出登录结果
  5.  */
  6. router.get("/logout", (req, res) => {
  7.   // 清除session
  8.   req.session.destroy();
  9.   res.redirect("/login");
  10. });
loginRoutes.js 整体代码
  1. const express = require("express");
  2. const router = express.Router();
  3. const connection = require("../utils/db");
  4.  
  5. // 用户登录
  6. router.post("/", (req, res) => {
  7.   const { username, password } = req.body;
  8.   connection.query(
  9.     "SELECT * FROM admin WHERE username = ? AND password = ?",
  10.     [username, password],
  11.     (error, results) => {
  12.       if (error) throw error;
  13.       if (results.length > 0) {
  14.         req.session.user = results;
  15.         res.redirect("/users");
  16.       } else {
  17.         res.status(401).json({ message: "账户或密码错误" });
  18.       }
  19.     }
  20.   );
  21. });
  22.  
  23. /**
  24.  * 退出登录接口
  25.  * @route GET /api/logout
  26.  * @returns {object} 退出登录结果
  27.  */
  28. router.get("/logout", (req, res) => {
  29.   // 清除session
  30.   req.session.destroy();
  31.   res.redirect("/login");
  32. });
  33.  
  34. module.exports = router;

​

3.4.3 创建用户路由文件

在routes下创建“userRoutes.js”文件， 这个文件是用来实现用户管理的增、删、改、查函数的。

查询用户

当访问 "/users" 路径时，会执行查询所有用户的 SQL 语句，并将查询结果传递给名为 "users" 的模板进行渲染，并在浏览器中显示。

  1. router.get("/", (req, res) => {
  2.   connection.query("SELECT * FROM users", (error, results) => {
  3.     if (error) throw error;
  4.     res.render("users", { users: results }); // 渲染users.ejs模板，并传入查询结果
  5.   });
  6. });

添加用户

当通过 POST 请求访问 "/users/add" 路径时，会从请求正文中获取用户名和密码，并将它们插入到数据库中。然后重定向到用户列表页面 "/users"。

  1. router.post("/add", (req, res) => {
  2.   const { username, password } = req.body;
  3.  
  4.   console.log(username, password);
  5.   connection.query(
  6.     "INSERT INTO users (username, password) VALUES (?, ?)",
  7.     [username, password],
  8.     (error, result) => {
  9.       if (error) throw error;
  10.       res.redirect("/users");
  11.     }
  12.   );
  13. });

通过用户id查询用户信息

当访问 "/users/:id" 路径时，会根据路径参数中提供的用户 id，执行查询特定用户的 SQL 语句，并将查询结果传递给一个名为 "update_user" 的模板进行渲染，并在浏览器中显示。

  1. router.get("/:id", (req, res) => {
  2.   const userId = req.params.id;
  3.   connection.query(
  4.     "select * from users WHERE id = ?",
  5.     userId,
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       console.log(result);
  9.       res.render("update_user", { user: result });
  10.     }
  11.   );
  12. });

修改用户

当通过 POST 请求访问 "/users/update" 路径时，会从请求正文中获取用户名、密码和用户ID，并执行更新特定用户的 SQL 语句。之后重定向到用户列表页面 "/users"。

  1. router.post("/update", (req, res) => {
  2.   const { id, username, password } = req.body;
  3.   connection.query(
  4.     "UPDATE users SET username = ?, password = ? WHERE id = ?",
  5.     [username, password, id],
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       res.redirect("/users");
  9.     }
  10.   );
  11. });

删除用户

当通过 GET 请求访问 "/users/del/:id" 路径时，会根据路径参数中提供的用户 id，执行删除特定用户的 SQL 语句。然后重定向到用户列表页面 "/users"。

  1. router.get("/del/:id", (req, res) => {
  2.   const userId = req.params.id;
  3.   connection.query(
  4.     "DELETE FROM users WHERE id = ?",
  5.     [userId],
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       res.redirect("/users");
  9.     }
  10.   );
  11. });
userRoutes.js 整体代码
  1. const express = require("express");
  2. const router = express.Router();
  3. const connection = require("../utils/db");
  4.  
  5. // 查询用户
  6. router.get("/", (req, res) => {
  7.   connection.query("SELECT * FROM users", (error, results) => {
  8.     if (error) throw error;
  9.     res.render("users", { users: results }); // 渲染users.ejs模板，并传入查询结果
  10.   });
  11. });
  12.  
  13. // 添加用户
  14. router.post("/add", (req, res) => {
  15.   const { username, password } = req.body;
  16.  
  17.   console.log(username, password);
  18.   connection.query(
  19.     "INSERT INTO users (username, password) VALUES (?, ?)",
  20.     [username, password],
  21.     (error, result) => {
  22.       if (error) throw error;
  23.       res.redirect("/users");
  24.     }
  25.   );
  26. });
  27.  
  28. // 通过用户id查询用户信息
  29. router.get("/:id", (req, res) => {
  30.   const userId = req.params.id;
  31.   connection.query(
  32.     "select * from users WHERE id = ?",
  33.     userId,
  34.     (error, result) => {
  35.       if (error) throw error;
  36.       console.log(result);
  37.       res.render("update_user", { user: result });
  38.     }
  39.   );
  40. });
  41.  
  42. // 修改用户
  43. router.post("/update", (req, res) => {
  44.   const { id, username, password } = req.body;
  45.   connection.query(
  46.     "UPDATE users SET username = ?, password = ? WHERE id = ?",
  47.     [username, password, id],
  48.     (error, result) => {
  49.       if (error) throw error;
  50.       res.redirect("/users");
  51.     }
  52.   );
  53. });
  54.  
  55. // 删除用户
  56. router.get("/del/:id", (req, res) => {
  57.   const userId = req.params.id;
  58.   connection.query(
  59.     "DELETE FROM users WHERE id = ?",
  60.     [userId],
  61.     (error, result) => {
  62.       if (error) throw error;
  63.       res.redirect("/users");
  64.     }
  65.   );
  66. });
  67.  
  68. module.exports = router;

​

3.4.5 创建图书路由文件

在routes目录文件夹下创建 “bookRoutes.js” 文件，这个文件是用来实现图书的增、删、改、查函数的。

查询图书

当访问 "/books" 路径时，会执行查询所有图书的 SQL 语句，并将查询结果传递给名为 "books" 的模板进行渲染，并在浏览器中显示。

  1. router.get("/", (req, res) => {
  2.   connection.query("SELECT * FROM books", (error, results) => {
  3.     if (error) throw error;
  4.     res.render("books", { books: results }); // 渲染books.ejs模板，并传入查询结果
  5.   });
  6. });

添加图书

当通过 POST 请求访问 "/books/add" 路径时，会从请求正文中获取图书的标题、作者和出版商，并将它们插入到数据库中。然后重定向到图书列表页面 "/books"。

  1. router.post("/add", (req, res) => {
  2.   const { title, author, publisher } = req.body;
  3.   connection.query(
  4.     "INSERT INTO books (title, author, publisher) VALUES (?, ?, ?)",
  5.     [title, author, publisher],
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       res.redirect("/books");
  9.     }
  10.   );
  11. });

修改图书

当通过 POST 请求访问 "/books/update" 路径时，会从请求正文中获取图书的 ID、标题、作者和出版商，并执行更新特定图书的 SQL 语句。之后重定向到图书列表页面 "/books"。

  1. router.post("/update", (req, res) => {
  2.   const { bookId, title, author, publisher } = req.body;
  3.   connection.query(
  4.     "UPDATE books SET title = ?, author = ?, publisher = ? WHERE id = ?",
  5.     [title, author, publisher, bookId],
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       res.redirect("/books")
  9.     }
  10.   );
  11. });

通过图书id查询图书信息

当访问 "/books/:id" 路径时，会根据路径参数中提供的图书 id，执行查询特定图书的 SQL 语句，并将查询结果传递给一个名为 "update_book" 的模板进行渲染，并在浏览器中显示。

  1. router.get("/:id", (req, res) => {
  2.   const userId = req.params.id;
  3.   connection.query(
  4.     "select * from books WHERE id = ?",
  5.     userId,
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       res.render("update_book", { book: result });
  9.     }
  10.   );
  11. });

删除图书

当通过 GET 请求访问 "/books/del/:id" 路径时，会根据路径参数中提供的图书 id，执行删除特定图书的 SQL 语句。然后重定向到图书列表页面 "/books"。

  1. router.get("/del/:id", (req, res) => {
  2.   const bookId = req.params.id;
  3.   connection.query(
  4.     "DELETE FROM books WHERE id = ?",
  5.     [bookId],
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       res.redirect("/books");
  9.     }
  10.   );
  11. });
bookRoutes.js 整体代码
  1. const express = require("express");
  2. const router = express.Router();
  3. const connection = require("../utils/db");
  4.  
  5. // 查询图书
  6. router.get("/", (req, res) => {
  7.   connection.query("SELECT * FROM books", (error, results) => {
  8.     if (error) throw error;
  9.     res.render("books", { books: results }); // 渲染books.ejs模板，并传入查询结果
  10.   });
  11. });
  12.  
  13. // 添加图书
  14. router.post("/add", (req, res) => {
  15.   const { title, author, publisher } = req.body;
  16.   connection.query(
  17.     "INSERT INTO books (title, author, publisher) VALUES (?, ?, ?)",
  18.     [title, author, publisher],
  19.     (error, result) => {
  20.       if (error) throw error;
  21.       res.redirect("/books");
  22.     }
  23.   );
  24. });
  25.  
  26. // 修改图书
  27. router.post("/update", (req, res) => {
  28.   const { bookId, title, author, publisher } = req.body;
  29.   connection.query(
  30.     "UPDATE books SET title = ?, author = ?, publisher = ? WHERE id = ?",
  31.     [title, author, publisher, bookId],
  32.     (error, result) => {
  33.       if (error) throw error;
  34.       res.redirect("/books")
  35.     }
  36.   );
  37. });
  38.  
  39. // 通过图书id查询图书信息
  40. router.get("/:id", (req, res) => {
  41.   const userId = req.params.id;
  42.   connection.query(
  43.     "select * from books WHERE id = ?",
  44.     userId,
  45.     (error, result) => {
  46.       if (error) throw error;
  47.       res.render("update_book", { book: result });
  48.     }
  49.   );
  50. });
  51.  
  52. // 删除图书
  53. router.get("/del/:id", (req, res) => {
  54.   const bookId = req.params.id;
  55.   connection.query(
  56.     "DELETE FROM books WHERE id = ?",
  57.     [bookId],
  58.     (error, result) => {
  59.       if (error) throw error;
  60.       res.redirect("/books");
  61.     }
  62.   );
  63. });
  64.  
  65.  
  66. module.exports = router;

​

3.4.6 创建借阅路由文件

在routes目录文件夹下创建“recordRoutes.js”文件，这个文件主要是对借阅图书管理的增、删、改、查的函数。

查询借阅记录

当用户访问 /records 路由时，会执行 SQL 查询语句，并将查询结果渲染到名为 "records" 的 EJS 模板中。查询结果包括借阅记录的 ID、用户名、图书标题、借阅日期和归还日期。

  1. router.get("/", (req, res) => {
  2.  
  3.   const sql = `
  4.     SELECT borrow_records.id, users.username, books.title, DATE_FORMAT(borrow_records.borrow_date, '%Y-%m-%d') AS borrow_date, DATE_FORMAT(borrow_records.return_date, '%Y-%m-%d') AS return_date
  5.     FROM borrow_records
  6.     JOIN users ON borrow_records.user_id = users.id
  7.     JOIN books ON borrow_records.book_id = books.id`;
  8.  
  9.   connection.query(sql, (error, results) => {
  10.     if (error) throw error;
  11.     res.render("records", { records: results }); // 渲染borrow-records.ejs模板，并传入查询结果
  12.   });
  13. });

 借阅图书

 当用户提交借阅图书的表单时，Express 会将表单数据封装在 req.body 中，包括用户 ID 和图书 ID。然后，使用 connection.query 方法向数据库中的 borrow_records 表插入一条新的借阅记录，并将当前日期作为借阅日期。插入成功后，重定向到 /records 路由。

  1. router.post("/add", (req, res) => {
  2.   const { userId, bookId } = req.body;
  3.   connection.query(
  4.     "INSERT INTO borrow_records (user_id, book_id, borrow_date) VALUES (?, ?, ?)",
  5.     [userId, bookId, formattedDate],
  6.     (error, result) => {
  7.       if (error) throw error;
  8.       res.redirect("/records");
  9.     }
  10.   );
  11. });

 归还图书

当用户访问 /records/update/:id 路由时，会将 URL 中的 id 参数提取出来，并将当前日期作为归还日期。然后，使用 connection.query 方法更新数据库中的 borrow_records 表中对应记录的归还日期。更新成功后，重定向到 /records 路由。

  1. router.get("/update/:id", (req, res) => {
  2.   const recordId = req.params.id;
  3.   const return_date = new Date().toISOString().slice(0, 10); // 当前日期作为归还日期
  4.   connection.query(
  5.     "UPDATE borrow_records SET return_date = ? WHERE id = ?",
  6.     [return_date, recordId],
  7.     (error, result) => {
  8.       if (error) throw error;
  9.       res.redirect("/records");
  10.     }
  11.   );
  12. });
 recordRoutes.js 整体代码
  1. const express = require("express");
  2. const router = express.Router();
  3. const connection = require("../utils/db");
  4. const formattedDate = require("../utils/formattedDate");
  5.  
  6. // 查询借阅记录
  7. router.get("/", (req, res) => {
  8.  
  9.   const sql = `SELECT borrow_records.id, users.username, books.title, DATE_FORMAT(borrow_records.borrow_date, '%Y-%m-%d') AS borrow_date, DATE_FORMAT(borrow_records.return_date, '%Y-%m-%d') AS return_date
  10.   FROM borrow_records
  11.   JOIN users ON borrow_records.user_id = users.id
  12.   JOIN books ON borrow_records.book_id = books.id`;
  13.  
  14.   connection.query(sql, (error, results) => {
  15.     if (error) throw error;
  16.     res.render("records", { records: results }); // 渲染borrow-records.ejs模板，并传入查询结果
  17.   });
  18. });
  19.  
  20. // 借阅图书
  21. router.post("/add", (req, res) => {
  22.   const { userId, bookId } = req.body;
  23.   connection.query(
  24.     "INSERT INTO borrow_records (user_id, book_id, borrow_date) VALUES (?, ?, ?)",
  25.     [userId, bookId, formattedDate],
  26.     (error, result) => {
  27.       if (error) throw error;
  28.       res.redirect("/records");
  29.     }
  30.   );
  31. });
  32.  
  33. // 归还图书
  34. router.get("/update/:id", (req, res) => {
  35.   const recordId = req.params.id;
  36.   const return_date = new Date().toISOString().slice(0, 10); // 当前日期作为归还日期
  37.   connection.query(
  38.     "UPDATE borrow_records SET return_date = ? WHERE id = ?",
  39.     [return_date, recordId],
  40.     (error, result) => {
  41.       if (error) throw error;
  42.       res.redirect("/records");
  43.     }
  44.   );
  45. });
  46.  
  47. module.exports = router;

​

3.5 注册路由

在根目录下的app.js文件中对路由进行注册

 引入路由

  1. const pageRoutes = require("./routes/pageRoutes");
  2. const userRoutes = require("./routes/userRoutes");
  3. const bookRoutes = require("./routes/bookRoutes");
  4. const recordRoutes = require("./routes/recordRoutes");
  5. const loginRoutes = require("./routes/loginRoutes");

 注册路由

  1. app.use("/", pageRoutes);
  2. app.use("/users", userRoutes);
  3. app.use("/books", bookRoutes);
  4. app.use("/records", recordRoutes);
  5. app.use("/login", loginRoutes);
app.js 整体代码
  1. const express = require("express");
  2. const bodyParser = require("body-parser");
  3. const session = require("express-session");
  4. const path = require("path");
  5. const pageRoutes = require("./routes/pageRoutes");
  6. const userRoutes = require("./routes/userRoutes");
  7. const bookRoutes = require("./routes/bookRoutes");
  8. const recordRoutes = require("./routes/recordRoutes");
  9. const loginRoutes = require("./routes/loginRoutes");
  10.  
  11. const app = express();
  12. app.use(bodyParser.urlencoded({ extended: false }));
  13. app.use(
  14.   session({
  15.     secret: "secret",
  16.     resave: false,
  17.     saveUninitialized: true,
  18.   })
  19. );
  20. app.use(express.static("public"));
  21. // 设置ejs模板引擎
  22. app.set("view engine", "ejs");
  23. app.set("views", path.join(__dirname, "views")); // 指定视图文件夹路径
  24. app.use("/", pageRoutes);
  25. app.use("/users", userRoutes);
  26. app.use("/books", bookRoutes);
  27. app.use("/records", recordRoutes);
  28. app.use("/login", loginRoutes);
  29.  
  30. app.listen(8080, () => {
  31.   console.log("http://127.0.0.1:8080");
  32. });

​

四、前端页面的编写

4.1 创建资源文件

在public目录文件夹下创建两个目录 “css”用来存放css样式、“imgs”用来存放图片

​

css目录下创建两个文件

login.css

  1. body {
  2.   font-family: Arial, sans-serif;
  3.   background-image: url("../imgs/bg.jpg");
  4.   background-size: cover;
  5.   background-position: center;
  6.   background-attachment: fixed;
  7. }
  8.  
  9. .container {
  10.   margin-top: 200px;
  11.   max-width: 400px;
  12.   padding: 20px;
  13.   background-color: #fff;
  14.   border: 1px solid #ccc;
  15.   border-radius: 4px;
  16.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  17.   margin: 200px auto;
  18. }
  19.  
  20. h2 {
  21.   color: #333;
  22.   text-align: center;
  23.   margin-bottom: 30px;
  24. }
  25.  
  26. .form-group {
  27.   width: 94%;
  28.   margin-bottom: 20px;
  29. }
  30.  
  31. label {
  32.   font-weight: bold;
  33. }
  34.  
  35. input[type="text"],
  36. input[type="password"] {
  37.   width: 100%;
  38.   padding: 10px;
  39.   border: 1px solid #ccc;
  40.   border-radius: 4px;
  41. }
  42.  
  43. button[type="submit"] {
  44.   width: 100%;
  45.   padding: 10px;
  46.   background-color: #007bff;
  47.   border: none;
  48.   color: #fff;
  49.   border-radius: 4px;
  50.   cursor: pointer;
  51. }
  52.  
  53. button[type="submit"]:hover {
  54.   background-color: #0056b3;
  55. }

main.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5.  
  6. body {
  7.   background-color: #f8f8f8;
  8.   font-family: Arial, sans-serif;
  9. }
  10.  
  11. a {
  12.   text-decoration: none;
  13.   display: block;
  14.   padding: 10px;
  15.   color: #fff;
  16.   font-weight: bold;
  17.   transition: 0.3s;
  18. }
  19.  
  20. nav {
  21.   background-color: #2a384b;
  22.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  23. }
  24.  
  25. ul {
  26.   list-style: none;
  27.   margin: 0;
  28.   padding: 0;
  29.   display: flex;
  30.   justify-content: center;
  31.   align-items: center;
  32.   height: 50px;
  33. }
  34.  
  35. li {
  36.   margin-right: 20px;
  37. }
  38.  
  39. a:hover {
  40.   color: #007bff;
  41.   border-radius: 4px;
  42. }
  43.  
  44. .container {
  45.   padding: 20px;
  46.   margin-top: 50px;
  47. }
  48.  
  49. h2 {
  50.   color: #333;
  51.   text-align: center;
  52.   margin-bottom: 30px;
  53. }
  54.  
  55. .table {
  56.   border-collapse: collapse;
  57.   width: 100%;
  58.   background-color: #fff;
  59.   border: 1px solid #fafafa;
  60.   border-radius: 4px;
  61.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  62.   justify-content: center;
  63.   margin-top: 15px;
  64. }
  65.  
  66. .table th,
  67. .table td {
  68.   padding: 10px;
  69.   text-align: center; /* 修改此处 */
  70.   border-bottom: 1px solid #ccc;
  71. }
  72.  
  73. .table th {
  74.   background-color: #f7f7f8;
  75.   font-weight: bold;
  76.   color: #5d5062;
  77. }
  78.  
  79. .table td {
  80.   color: #656475;
  81. }
  82.  
  83. .btns {
  84.   display: flex;
  85.   justify-content: center;
  86. }
  87.  
  88. /* 这里是按钮代码块 */
  89. .btn {
  90.   display: block;
  91.   width: 80px;
  92.   height: 20px;
  93.   border: none;
  94.   border-radius: 4px;
  95.   color: #fff;
  96.   font-size: 16px;
  97.   cursor: pointer;
  98.   text-align: center;
  99.   margin-right: 10px;
  100. }
  101.  
  102. .btn-primary {
  103.   background-color: #007bff;
  104. }
  105.  
  106. .btn-edit {
  107.   background-color: cadetblue;
  108. }
  109.  
  110. .btn-danger {
  111.   background-color: crimson;
  112. }
  113.  
  114. .btn-primary:hover {
  115.   background-color: #0056b3;
  116. }
  117.  
  118. .btn-edit:hover {
  119.   background-color: rgb(98, 129, 130);
  120. }
  121.  
  122. .btn-danger:hover {
  123.   background-color: rgb(165, 28, 55);
  124. }
  125.  
  126. /* 表单样式 */
  127. .form-group {
  128.   margin-bottom: 15px;
  129. }
  130.  
  131. label {
  132.   font-weight: bold;
  133. }
  134.  
  135. input[type="text"],
  136. select {
  137.   width: 100%;
  138.   height: 35px;
  139.   padding: 5px 10px;
  140.   border-radius: 3px;
  141.   border: 1px solid #ccc;
  142.   box-sizing: border-box;
  143. }
  144.  
  145. input[type="submit"] {
  146.   width: 100px;
  147.   height: 40px;
  148.   background-color: #007bff;
  149. }
  150.  
  151. .btn-return {
  152.   background-color: #888;
  153. }
  154.  
  155. /* 提交按钮样式 */
  156. .btn-primary {
  157.   background-color: #007bff;
  158.   color: #fff;
  159.   border: none;
  160.   padding: 8px 16px;
  161.   border-radius: 3px;
  162.   cursor: pointer;
  163. }
  164.  
  165. .btn-primary:hover {
  166.   background-color: #0069d9;
  167. }

​

在imgs目录文件夹下存放以下两张图片 ​

 ​

 具体静态资源图片，可以在文章顶部进行下载。

​

4.2 创建导航栏页面

点击我了解什么是ejs模版

在views目录文件夹下创建 “navbar.ejs” 文件，编写以下内容：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>图书管理系统</title>
  5.     <link rel="stylesheet" href="/css/main.css" />
  6.     <link rel="icon" href="imgs/icon.png" type="image/png" />
  7.   </head>
  8.   <body>
  9.     <nav>
  10.       <ul>
  11.         <li><a href="#">首页</a></li>
  12.         <li><a href="/users">用户管理</a></li>
  13.         <li><a href="/books">图书管理</a></li>
  14.         <li><a href="/records">借阅图书管理</a></li>
  15.         <li><a href="/login/logout">退出登录</a></li>
  16.       </ul>
  17.     </nav>
  18.   </body>
  19. </html>

4.3 创建登录

在views目录文件夹下创建 “login.ejs” 文件，编写以下内容：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>图书管理系统</title>
  5.     <link rel="stylesheet" href="css/login.css" />
  6.     <link rel="icon" href="imgs/icon.png">
  7.   </head>
  8.   <body>
  9.     <div class="container">
  10.       <h2>后台登录</h2>
  11.       <form method="post" action="/login">
  12.         <div class="form-group">
  13.           <label for="username">用户名:</label>
  14.           <input
  15.             type="text"
  16.             class="form-control"
  17.             id="username"
  18.             name="username"
  19.             placeholder="请输入用户名"
  20.           />
  21.         </div>
  22.         <div class="form-group">
  23.           <label for="password">密码:</label>
  24.           <input
  25.             type="password"
  26.             class="form-control"
  27.             id="password"
  28.             name="password"
  29.             placeholder="请输入密码"
  30.           />
  31.         </div>
  32.         <button type="submit" class="btn btn-primary">登录</button>
  33.       </form>
  34.     </div>
  35.   </body>
  36. </html>

4.4 创建用户管理页面

在views目录文件夹下创建 “users.ejs” 文件，编写以下内容：

  1.     <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>用户管理</h2>
  4.       <a class="btn btn-primary" href="/page_user">添加用户</a>
  5.       <table class="table">
  6.         <thead>
  7.           <tr>
  8.             <th>ID</th>
  9.             <th>用户名</th>
  10.             <th>密码</th>
  11.             <th>操作</th>
  12.           </tr>
  13.         </thead>
  14.         <tbody id="userTable">
  15.           <% users.forEach(function(user) { %>
  16.           <tr>
  17.             <td><%= user.id %></td>
  18.             <td><%= user.username %></td>
  19.             <td><%= user.password %></td>
  20.             <td>
  21.               <div class="btns">
  22.                 <a class="btn btn-edit" href="/users/<%= user.id %>">修改</a>
  23.                 <a class="btn btn-danger" href="/users/del/<%= user.id %>">删除</a>
  24.               </div>
  25.             </td>
  26.           </tr>
  27.           <% }); %>
  28.         </tbody>
  29.       </table>
  30.     </div>
  31.   </body>
  32. </html>

4.5 创建添加用户界面

在views目录文件夹下创建 “add_user.ejs” 文件，编写以下内容：

  1.     <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>用户添加</h2>
  4.       <form id="editUserForm" action="/users/add" method="post">
  5.         <div class="form-group">
  6.           <label for="editUserName">用户名</label>
  7.           <input
  8.             type="text"
  9.             class="form-control"
  10.             id="editUserName"
  11.             name="username"
  12.             required
  13.           />
  14.         </div>
  15.         <div class="form-group">
  16.           <label for="editUserPhone">密码</label>
  17.           <input
  18.             type="text"
  19.             class="form-control"
  20.             id="editUserPhone"
  21.             name="password"
  22.             required
  23.           />
  24.         </div>
  25.         <div class="btns">
  26.           <input class="btn btn-add" type="submit" value="确定" />
  27.           <a class="btn btn-return" href="/users">返回</a>
  28.         </div>
  29.       </form>
  30.     </div>
  31.   </body>
  32. </html>

4.6 创建修改用户界面

在views目录文件夹下创建 “update_user.ejs” 文件，编写以下内容：

  1.     <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>用户修改</h2>
  4.       <form id="editUserForm" action="/users/update" method="post">
  5.         <input type="hidden" name="id" id="editUserId" value="<%= user[0].id %>"/>
  6.         <div class="form-group">
  7.           <label for="editUserName">用户名</label>
  8.           <input
  9.             type="text"
  10.             class="form-control"
  11.             id="editUserName"
  12.             name="username"
  13.             value="<%= user[0].username%>"
  14.             required
  15.           />
  16.         </div>
  17.         <div class="form-group">
  18.           <label for="editUserPhone">密码</label>
  19.           <input
  20.             type="text"
  21.             class="form-control"
  22.             id="editUserPhone"
  23.             name="password"
  24.             value="<%= user[0].password%>"
  25.             required
  26.           />
  27.         </div>
  28.         <div class="btns">
  29.           <input class="btn btn-add" type="submit" value="确定" />
  30.           <a class="btn btn-return" href="/users">返回</a>
  31.         </div>
  32.     </div>
  33.   </body>
  34. </html>

4.7 创建图书界面

在views目录文件夹下创建 “books.ejs” 文件，编写以下内容：

  1.    <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>图书管理</h2>
  4.       <a class="btn btn-primary" href="/page_book">添加图书</a>
  5.       <table class="table">
  6.         <thead>
  7.           <tr>
  8.             <th>ID</th>
  9.             <th>图书名称</th>
  10.             <th>作者名称</th>
  11.             <th>出版社名称</th>
  12.             <th>操作</th>
  13.           </tr>
  14.         </thead>
  15.         <tbody id="userTable">
  16.           <% books.forEach(function(book, index) { %>
  17.           <tr>
  18.             <td><%= index+1 %></td>
  19.             <td><%= book.title %></td>
  20.             <td><%= book.author %></td>
  21.             <td><%= book.publisher %></td>
  22.             <td>
  23.               <div class="btns">
  24.                 <a class="btn btn-edit" href="/books/<%= book.id %>">修改</a>
  25.                 <a class="btn btn-danger" href="/books/del/<%= book.id %>">删除</a>
  26.               </div>
  27.             </td>
  28.           </tr>
  29.           <% }); %>
  30.         </tbody>
  31.       </table>
  32.     </div>
  33.   </body>
  34. </html>

4.8 创建添加图书界面

在views目录文件夹下创建 “add_book.ejs” 文件，编写以下内容： 

  1.     <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>添加图书</h2>
  4.       <form id="editUserForm" action="/books/add" method="post">
  5.         <div class="form-group">
  6.           <label for="editUserName">图书名称</label>
  7.           <input
  8.             type="text"
  9.             class="form-control"
  10.             id="editUserName"
  11.             name="title"
  12.             required
  13.           />
  14.         </div>
  15.         <div class="form-group">
  16.           <label for="editUserPhone">作者名</label>
  17.           <input
  18.             type="text"
  19.             class="form-control"
  20.             id="editUserPhone"
  21.             name="author"
  22.             required
  23.           />
  24.         </div>
  25.         <div class="form-group">
  26.           <label for="editUserPhone">出版社名称</label>
  27.           <input
  28.             type="text"
  29.             class="form-control"
  30.             id="editUserPhone"
  31.             name="publisher"
  32.             required
  33.           />
  34.         </div>
  35.         <div class="btns">
  36.           <input class="btn btn-add" type="submit" value="确定" />
  37.           <a class="btn btn-return" href="/books">返回</a>
  38.         </div>
  39.       </form>
  40.     </div>
  41.   </body>
  42. </html>

 4.9 创建修改图书界面

在views目录文件夹下创建 “update_book.ejs” 文件，编写以下内容： 

  1.     <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>图书修改</h2>
  4.       <form id="editUserForm" action="/books/update" method="post">
  5.         <input type="hidden" name="bookId" id="editUserId" value="<%= book[0].id %>"/>
  6.         <div class="form-group">
  7.           <label for="editUserName">图书名称</label>
  8.           <input
  9.             type="text"
  10.             class="form-control"
  11.             id="editUserName"
  12.             name="title"
  13.             value="<%= book[0].title %>"
  14.             required
  15.           />
  16.         </div>
  17.         <div class="form-group">
  18.           <label for="editUserPhone">作者名</label>
  19.           <input
  20.             type="text"
  21.             class="form-control"
  22.             id="editUserPhone"
  23.             name="author"
  24.             value="<%= book[0].author %>"
  25.             required
  26.           />
  27.         </div>
  28.         <div class="form-group">
  29.           <label for="editUserPhone">出版社名称</label>
  30.           <input
  31.             type="text"
  32.             class="form-control"
  33.             id="editUserPhone"
  34.             name="publisher"
  35.             value="<%= book[0].publisher %>"
  36.             required
  37.           />
  38.         </div>
  39.         <div class="btns">
  40.           <input class="btn btn-add" type="submit" value="确定" />
  41.           <a class="btn btn-return" href="/users">返回</a>
  42.         </div>
  43.     </div>
  44.   </body>
  45. </html>

 4.10 创建借阅图书界面

在views目录文件夹下创建 “records.ejs” 文件，编写以下内容： 

  1.     <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>借阅图书管理</h2>
  4.       <a class="btn btn-primary" href="/page_record">添加借阅</a>
  5.       <table class="table">
  6.         <thead>
  7.           <tr>
  8.             <th>ID</th>
  9.             <th>用户名称</th>
  10.             <th>图书名称</th>
  11.             <th>借阅时间</th>
  12.             <th>归还时间</th>
  13.             <th>操作</th>
  14.           </tr>
  15.         </thead>
  16.         <tbody id="userTable">
  17.           <% records.forEach(function(record, index) { %>
  18.           <tr>
  19.             <td><%= index+1 %></td>
  20.             <td><%= record.username %></td>
  21.             <td><%= record.title %></td>
  22.             <td><%= record.borrow_date %></td>
  23.             <td><%= record.return_date %></td>
  24.             <td>
  25.               <div class="btns">
  26.                 <% if (!record.return_date) { %>
  27.                   <a class="btn btn-edit" href="/records/update/<%= record.id %>">归还</a>
  28.                 <% } %>
  29.               </div>
  30.             </td>
  31.           </tr>
  32.           <% }); %>
  33.         </tbody>
  34.       </table>
  35.     </div>
  36.   </body>
  37. </html>

 4.11 创建添加借阅图书界面

在views目录文件夹下创建 “add_record.ejs” 文件，编写以下内容： 

  1.     <%- include('navbar') %>
  2.     <div class="container">
  3.       <h2>添加借阅</h2>
  4.       <form id="editUserForm" action="/records/add" method="post">
  5.         <div class="form-group">
  6.           <label for="editUserName">用户名称</label>
  7.           <select name="userId">
  8.             <% users.forEach(function(user) { %>
  9.               <option value="<%= user.id %>"><%= user.name %></option>
  10.               <% }); %>
  11.           </select>
  12.         </div>
  13.         <div class="form-group">
  14.           <label for="editUserPhone">图书名称</label>
  15.           <select name="bookId">
  16.             <% books.forEach(function(book) { %>
  17.               <option value="<%= book.id %>"><%= book.title %></option>
  18.               <% }); %>
  19.           </select>
  20.         </div>
  21.         <div class="btns">
  22.           <input class="btn btn-add" type="submit" value="借阅" />
  23.           <a class="btn btn-return" href="/records">返回</a>
  24.         </div>
  25.       </form>
  26.     </div>
  27.   </body>
  28. </html>

​

五、运行测试项目

我们现在就可以去浏览器当中输入地址 http://127.0.0.1:8080 来访问我们的项目。

账号密码
rootroot

​

恭喜你，图书管理系统已经做好。 

其他文章推荐：

1分钟学会使用Express+MySQL实现注册功能

在1分钟内，使用 Express 快速编写一个简单的登录功能。

Express EJS渲染技术详解

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/神奇cpp/article/detail/808228
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号