10分钟学习如何使用 Express+Mysql开发图书管理系统-FreeNAS中文网

admin 管理员组

文章数量: 887021

阅读前必读

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）:

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(50) NOT NULL
);

创建图书表（books）:

CREATE TABLE books (
  id INT AUTO_INCREMENT PRIMARY KEY,
  title VARCHAR(100) NOT NULL,
  author VARCHAR(50),
  publisher VARCHAR(50)
);

创建管理员表（admin）:

CREATE TABLE admin (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(50) NOT NULL,
  nick_name VARCHAR(50) NOT NULL
);

插入管理员数据：

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

创建借阅记录表（borrow_records）:

CREATE TABLE borrow_records (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_id INT NOT NULL,
  book_id INT NOT NULL,
  borrow_date DATE NOT NULL,
  return_date DATE
);

三、后端接口的开发

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 安装框架包

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

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 创建项目结构目录

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 引入模块

const express = require("express");
const bodyParser = require("body-parser");
const session = require("express-session");
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 服务器的方法。

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

3.2.1.8 简单测试

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

nodemon app.js

3.3 创建数据库工具

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

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

const mysql = require("mysql");
// 创建数据库连接
const connection = mysql.createConnection({
  host: "localhost",
  user: "你的数据库用户名",
  password: "你的数据库密码",
  database: "book_library",
});

// 连接数据库
connection.connect();

module.exports = connection;

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

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

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

const currentDate = new Date();
const year = currentDate.getFullYear();
const month = String(currentDate.getMonth() + 1).padStart(2, '0');
const day = String(currentDate.getDate()).padStart(2, '0');

const formattedDate = `${year}-${month}-${day}`;

module.exports = formattedDate;

3.4 创建路由

3.4.1 创建页面路由文件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

这里用到了两个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 });

router.get('/page_record', (req, res) => {
  const sqlUsers = 'SELECT id, username FROM users';
  const sqlBooks = 'SELECT id, title FROM books';
  db.query(sqlUsers, (err, usersResult) => {
    if (err) throw err;
    const users = usersResult.map(user => ({ id: user.id, name: user.username }));
    db.query(sqlBooks, (err, booksResult) => {
      if (err) throw err;
      const books = booksResult.map(book => ({ id: book.id, title: book.title }));
      res.render('add_record', { users, books });
    });
  });
});

module.exports = router;

pageRoutes.js 文件整体代码:

const express = require("express");
const router = express.Router();
const db = require('../utils/db');

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

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

/**
 * 添加用户界面
 */
router.get("/page_user", (req, res) => {
  res.render("add_user");
});

/**
 * 添加图书界面
 */
router.get("/page_book", (req, res) => {
  res.render("add_book");
});

/**
 * 借阅图书界面
 */
router.get('/page_record', (req, res) => {
  const sqlUsers = 'SELECT id, username FROM users';
  const sqlBooks = 'SELECT id, title FROM books';
  db.query(sqlUsers, (err, usersResult) => {
    if (err) throw err;
    const users = usersResult.map(user => ({ id: user.id, name: user.username }));
    db.query(sqlBooks, (err, booksResult) => {
      if (err) throw err;
      const books = booksResult.map(book => ({ id: book.id, title: book.title }));
      res.render('add_record', { users, books });
    });
  });
});

module.exports = router;

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

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

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

引入模块

const express = require("express");
const router = express.Router();
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 路由；

router.post("/", (req, res) => {
  const { username, password } = req.body;
  connection.query(
    "SELECT * FROM admin WHERE username = ? AND password = ?",
    [username, password],
    (error, results) => {
      if (error) throw error;
      if (results.length > 0) {
        req.session.user = results;
        res.redirect("/users");
      } else {
        res.status(401).json({ message: "账户或密码错误" });
      }
    }
  );
});

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

/**
 * 退出登录接口
 * @route GET /api/logout
 * @returns {object} 退出登录结果
 */
router.get("/logout", (req, res) => {
  // 清除session
  req.session.destroy();
  res.redirect("/login");
});

loginRoutes.js 整体代码

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

// 用户登录
router.post("/", (req, res) => {
  const { username, password } = req.body;
  connection.query(
    "SELECT * FROM admin WHERE username = ? AND password = ?",
    [username, password],
    (error, results) => {
      if (error) throw error;
      if (results.length > 0) {
        req.session.user = results;
        res.redirect("/users");
      } else {
        res.status(401).json({ message: "账户或密码错误" });
      }
    }
  );
});

/**
 * 退出登录接口
 * @route GET /api/logout
 * @returns {object} 退出登录结果
 */
router.get("/logout", (req, res) => {
  // 清除session
  req.session.destroy();
  res.redirect("/login");
});

module.exports = router;

3.4.3 创建用户路由文件

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

查询用户

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

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

添加用户

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

router.post("/add", (req, res) => {
  const { username, password } = req.body;

  console.log(username, password);
  connection.query(
    "INSERT INTO users (username, password) VALUES (?, ?)",
    [username, password],
    (error, result) => {
      if (error) throw error;
      res.redirect("/users");
    }
  );
});

通过用户id查询用户信息

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

router.get("/:id", (req, res) => {
  const userId = req.params.id;
  connection.query(
    "select * from users WHERE id = ?",
    userId,
    (error, result) => {
      if (error) throw error;
      console.log(result);
      res.render("update_user", { user: result });
    }
  );
});

修改用户

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

router.post("/update", (req, res) => {
  const { id, username, password } = req.body;
  connection.query(
    "UPDATE users SET username = ?, password = ? WHERE id = ?",
    [username, password, id],
    (error, result) => {
      if (error) throw error;
      res.redirect("/users");
    }
  );
});

删除用户

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

router.get("/del/:id", (req, res) => {
  const userId = req.params.id;
  connection.query(
    "DELETE FROM users WHERE id = ?",
    [userId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/users");
    }
  );
});

userRoutes.js 整体代码

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

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

// 添加用户
router.post("/add", (req, res) => {
  const { username, password } = req.body;

  console.log(username, password);
  connection.query(
    "INSERT INTO users (username, password) VALUES (?, ?)",
    [username, password],
    (error, result) => {
      if (error) throw error;
      res.redirect("/users");
    }
  );
});

// 通过用户id查询用户信息
router.get("/:id", (req, res) => {
  const userId = req.params.id;
  connection.query(
    "select * from users WHERE id = ?",
    userId,
    (error, result) => {
      if (error) throw error;
      console.log(result);
      res.render("update_user", { user: result });
    }
  );
});

// 修改用户
router.post("/update", (req, res) => {
  const { id, username, password } = req.body;
  connection.query(
    "UPDATE users SET username = ?, password = ? WHERE id = ?",
    [username, password, id],
    (error, result) => {
      if (error) throw error;
      res.redirect("/users");
    }
  );
});

// 删除用户
router.get("/del/:id", (req, res) => {
  const userId = req.params.id;
  connection.query(
    "DELETE FROM users WHERE id = ?",
    [userId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/users");
    }
  );
});

module.exports = router;

3.4.5 创建图书路由文件

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

查询图书

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

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

添加图书

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

router.post("/add", (req, res) => {
  const { title, author, publisher } = req.body;
  connection.query(
    "INSERT INTO books (title, author, publisher) VALUES (?, ?, ?)",
    [title, author, publisher],
    (error, result) => {
      if (error) throw error;
      res.redirect("/books");
    }
  );
});

修改图书

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

router.post("/update", (req, res) => {
  const { bookId, title, author, publisher } = req.body;
  connection.query(
    "UPDATE books SET title = ?, author = ?, publisher = ? WHERE id = ?",
    [title, author, publisher, bookId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/books")
    }
  );
});

通过图书id查询图书信息

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

router.get("/:id", (req, res) => {
  const userId = req.params.id;
  connection.query(
    "select * from books WHERE id = ?",
    userId,
    (error, result) => {
      if (error) throw error;
      res.render("update_book", { book: result });
    }
  );
});

删除图书

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

router.get("/del/:id", (req, res) => {
  const bookId = req.params.id;
  connection.query(
    "DELETE FROM books WHERE id = ?",
    [bookId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/books");
    }
  );
});

bookRoutes.js 整体代码

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

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

// 添加图书
router.post("/add", (req, res) => {
  const { title, author, publisher } = req.body;
  connection.query(
    "INSERT INTO books (title, author, publisher) VALUES (?, ?, ?)",
    [title, author, publisher],
    (error, result) => {
      if (error) throw error;
      res.redirect("/books");
    }
  );
});

// 修改图书
router.post("/update", (req, res) => {
  const { bookId, title, author, publisher } = req.body;
  connection.query(
    "UPDATE books SET title = ?, author = ?, publisher = ? WHERE id = ?",
    [title, author, publisher, bookId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/books")
    }
  );
});

// 通过图书id查询图书信息
router.get("/:id", (req, res) => {
  const userId = req.params.id;
  connection.query(
    "select * from books WHERE id = ?",
    userId,
    (error, result) => {
      if (error) throw error;
      res.render("update_book", { book: result });
    }
  );
});

// 删除图书
router.get("/del/:id", (req, res) => {
  const bookId = req.params.id;
  connection.query(
    "DELETE FROM books WHERE id = ?",
    [bookId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/books");
    }
  );
});


module.exports = router;

3.4.6 创建借阅路由文件

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

查询借阅记录

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

router.get("/", (req, res) => {

  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
    FROM borrow_records
    JOIN users ON borrow_records.user_id = users.id
    JOIN books ON borrow_records.book_id = books.id`;

  connection.query(sql, (error, results) => {
    if (error) throw error;
    res.render("records", { records: results }); // 渲染borrow-records.ejs模板，并传入查询结果
  });
});

借阅图书

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

router.post("/add", (req, res) => {
  const { userId, bookId } = req.body;
  connection.query(
    "INSERT INTO borrow_records (user_id, book_id, borrow_date) VALUES (?, ?, ?)",
    [userId, bookId, formattedDate],
    (error, result) => {
      if (error) throw error;
      res.redirect("/records");
    }
  );
});

归还图书

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

router.get("/update/:id", (req, res) => {
  const recordId = req.params.id;
  const return_date = new Date().toISOString().slice(0, 10); // 当前日期作为归还日期
  connection.query(
    "UPDATE borrow_records SET return_date = ? WHERE id = ?",
    [return_date, recordId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/records");
    }
  );
});

recordRoutes.js 整体代码

const express = require("express");
const router = express.Router();
const connection = require("../utils/db");
const formattedDate = require("../utils/formattedDate");

// 查询借阅记录
router.get("/", (req, res) => {

  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
  FROM borrow_records
  JOIN users ON borrow_records.user_id = users.id
  JOIN books ON borrow_records.book_id = books.id`;

  connection.query(sql, (error, results) => {
    if (error) throw error;
    res.render("records", { records: results }); // 渲染borrow-records.ejs模板，并传入查询结果
  });
});

// 借阅图书
router.post("/add", (req, res) => {
  const { userId, bookId } = req.body;
  connection.query(
    "INSERT INTO borrow_records (user_id, book_id, borrow_date) VALUES (?, ?, ?)",
    [userId, bookId, formattedDate],
    (error, result) => {
      if (error) throw error;
      res.redirect("/records");
    }
  );
});

// 归还图书
router.get("/update/:id", (req, res) => {
  const recordId = req.params.id;
  const return_date = new Date().toISOString().slice(0, 10); // 当前日期作为归还日期
  connection.query(
    "UPDATE borrow_records SET return_date = ? WHERE id = ?",
    [return_date, recordId],
    (error, result) => {
      if (error) throw error;
      res.redirect("/records");
    }
  );
});

module.exports = router;

3.5 注册路由

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

引入路由

const pageRoutes = require("./routes/pageRoutes");
const userRoutes = require("./routes/userRoutes");
const bookRoutes = require("./routes/bookRoutes");
const recordRoutes = require("./routes/recordRoutes");
const loginRoutes = require("./routes/loginRoutes");

注册路由

app.use("/", pageRoutes);
app.use("/users", userRoutes);
app.use("/books", bookRoutes);
app.use("/records", recordRoutes);
app.use("/login", loginRoutes);

app.js 整体代码

const express = require("express");
const bodyParser = require("body-parser");
const session = require("express-session");
const path = require("path");
const pageRoutes = require("./routes/pageRoutes");
const userRoutes = require("./routes/userRoutes");
const bookRoutes = require("./routes/bookRoutes");
const recordRoutes = require("./routes/recordRoutes");
const loginRoutes = require("./routes/loginRoutes");

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(
  session({
    secret: "secret",
    resave: false,
    saveUninitialized: true,
  })
);
app.use(express.static("public"));
// 设置ejs模板引擎
app.set("view engine", "ejs");
app.set("views", path.join(__dirname, "views")); // 指定视图文件夹路径
app.use("/", pageRoutes);
app.use("/users", userRoutes);
app.use("/books", bookRoutes);
app.use("/records", recordRoutes);
app.use("/login", loginRoutes);

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

四、前端页面的编写

4.1 创建资源文件

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

css目录下创建两个文件

body {
  font-family: Arial, sans-serif;
  background-image: url("../imgs/bg.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.container {
  margin-top: 200px;
  max-width: 400px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  margin: 200px auto;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.form-group {
  width: 94%;
  margin-bottom: 20px;
}

label {
  font-weight: bold;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button[type="submit"] {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}

main.css

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;
}

a {
  text-decoration: none;
  display: block;
  padding: 10px;
  color: #fff;
  font-weight: bold;
  transition: 0.3s;
}

nav {
  background-color: #2a384b;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

li {
  margin-right: 20px;
}

a:hover {
  color: #007bff;
  border-radius: 4px;
}

.container {
  padding: 20px;
  margin-top: 50px;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.table {
  border-collapse: collapse;
  width: 100%;
  background-color: #fff;
  border: 1px solid #fafafa;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  justify-content: center;
  margin-top: 15px;
}

.table th,
.table td {
  padding: 10px;
  text-align: center; /* 修改此处 */
  border-bottom: 1px solid #ccc;
}

.table th {
  background-color: #f7f7f8;
  font-weight: bold;
  color: #5d5062;
}

.table td {
  color: #656475;
}

.btns {
  display: flex;
  justify-content: center;
}

/* 这里是按钮代码块 */
.btn {
  display: block;
  width: 80px;
  height: 20px;
  border: none;
  border-radius: 4px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  margin-right: 10px;
}

.btn-primary {
  background-color: #007bff;
}

.btn-edit {
  background-color: cadetblue;
}

.btn-danger {
  background-color: crimson;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-edit:hover {
  background-color: rgb(98, 129, 130);
}

.btn-danger:hover {
  background-color: rgb(165, 28, 55);
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
}

label {
  font-weight: bold;
}

input[type="text"],
select {
  width: 100%;
  height: 35px;
  padding: 5px 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

input[type="submit"] {
  width: 100px;
  height: 40px;
  background-color: #007bff;
}

.btn-return {
  background-color: #888;
}

/* 提交按钮样式 */
.btn-primary {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 3px;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: #0069d9;
}

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

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

4.2 创建导航栏页面

点击我了解什么是ejs模版

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

<!DOCTYPE html>
<html>
  <head>
    <title>图书管理系统</title>
    <link rel="stylesheet" href="/css/main.css" />
    <link rel="icon" href="imgs/icon.png" type="image/png" />
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="/users">用户管理</a></li>
        <li><a href="/books">图书管理</a></li>
        <li><a href="/records">借阅图书管理</a></li>
        <li><a href="/login/logout">退出登录</a></li>
      </ul>
    </nav>
  </body>
</html>

4.3 创建登录

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

<!DOCTYPE html>
<html>
  <head>
    <title>图书管理系统</title>
    <link rel="stylesheet" href="css/login.css" />
    <link rel="icon" href="imgs/icon.png">
  </head>
  <body>
    <div class="container">
      <h2>后台登录</h2>
      <form method="post" action="/login">
        <div class="form-group">
          <label for="username">用户名:</label>
          <input
            type="text"
            class="form-control"
            id="username"
            name="username"
            placeholder="请输入用户名"
          />
        </div>
        <div class="form-group">
          <label for="password">密码:</label>
          <input
            type="password"
            class="form-control"
            id="password"
            name="password"
            placeholder="请输入密码"
          />
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
      </form>
    </div>
  </body>
</html>

4.4 创建用户管理页面

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

    <%- include('navbar') %>
    <div class="container">
      <h2>用户管理</h2>
      <a class="btn btn-primary" href="/page_user">添加用户</a>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>密码</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="userTable">
          <% users.forEach(function(user) { %>
          <tr>
            <td><%= user.id %></td>
            <td><%= user.username %></td>
            <td><%= user.password %></td>
            <td>
              <div class="btns">
                <a class="btn btn-edit" href="/users/<%= user.id %>">修改</a>
                <a class="btn btn-danger" href="/users/del/<%= user.id %>">删除</a>
              </div>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </body>
</html>

4.5 创建添加用户界面

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

    <%- include('navbar') %>
    <div class="container">
      <h2>用户添加</h2>
      <form id="editUserForm" action="/users/add" method="post">
        <div class="form-group">
          <label for="editUserName">用户名</label>
          <input
            type="text"
            class="form-control"
            id="editUserName"
            name="username"
            required
          />
        </div>
        <div class="form-group">
          <label for="editUserPhone">密码</label>
          <input
            type="text"
            class="form-control"
            id="editUserPhone"
            name="password"
            required
          />
        </div>
        <div class="btns">
          <input class="btn btn-add" type="submit" value="确定" />
          <a class="btn btn-return" href="/users">返回</a>
        </div>
      </form>
    </div>
  </body>
</html>

4.6 创建修改用户界面

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

    <%- include('navbar') %>
    <div class="container">
      <h2>用户修改</h2>
      <form id="editUserForm" action="/users/update" method="post">
        <input type="hidden" name="id" id="editUserId" value="<%= user[0].id %>"/>
        <div class="form-group">
          <label for="editUserName">用户名</label>
          <input
            type="text"
            class="form-control"
            id="editUserName"
            name="username"
            value="<%= user[0].username%>"
            required
          />
        </div>
        <div class="form-group">
          <label for="editUserPhone">密码</label>
          <input
            type="text"
            class="form-control"
            id="editUserPhone"
            name="password"
            value="<%= user[0].password%>"
            required
          />
        </div>
        <div class="btns">
          <input class="btn btn-add" type="submit" value="确定" />
          <a class="btn btn-return" href="/users">返回</a>
        </div>
    </div>
  </body>
</html>

4.7 创建图书界面

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

   <%- include('navbar') %>
    <div class="container">
      <h2>图书管理</h2>
      <a class="btn btn-primary" href="/page_book">添加图书</a>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>图书名称</th>
            <th>作者名称</th>
            <th>出版社名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="userTable">
          <% books.forEach(function(book, index) { %>
          <tr>
            <td><%= index+1 %></td>
            <td><%= book.title %></td>
            <td><%= book.author %></td>
            <td><%= book.publisher %></td>
            <td>
              <div class="btns">
                <a class="btn btn-edit" href="/books/<%= book.id %>">修改</a>
                <a class="btn btn-danger" href="/books/del/<%= book.id %>">删除</a>
              </div>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </body>
</html>

4.8 创建添加图书界面

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

    <%- include('navbar') %>
    <div class="container">
      <h2>添加图书</h2>
      <form id="editUserForm" action="/books/add" method="post">
        <div class="form-group">
          <label for="editUserName">图书名称</label>
          <input
            type="text"
            class="form-control"
            id="editUserName"
            name="title"
            required
          />
        </div>
        <div class="form-group">
          <label for="editUserPhone">作者名</label>
          <input
            type="text"
            class="form-control"
            id="editUserPhone"
            name="author"
            required
          />
        </div>
        <div class="form-group">
          <label for="editUserPhone">出版社名称</label>
          <input
            type="text"
            class="form-control"
            id="editUserPhone"
            name="publisher"
            required
          />
        </div>
        <div class="btns">
          <input class="btn btn-add" type="submit" value="确定" />
          <a class="btn btn-return" href="/books">返回</a>
        </div>
      </form>
    </div>
  </body>
</html>

4.9 创建修改图书界面

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

    <%- include('navbar') %>
    <div class="container">
      <h2>图书修改</h2>
      <form id="editUserForm" action="/books/update" method="post">
        <input type="hidden" name="bookId" id="editUserId" value="<%= book[0].id %>"/>
        <div class="form-group">
          <label for="editUserName">图书名称</label>
          <input
            type="text"
            class="form-control"
            id="editUserName"
            name="title"
            value="<%= book[0].title %>"
            required
          />
        </div>
        <div class="form-group">
          <label for="editUserPhone">作者名</label>
          <input
            type="text"
            class="form-control"
            id="editUserPhone"
            name="author"
            value="<%= book[0].author %>"
            required
          />
        </div>
        <div class="form-group">
          <label for="editUserPhone">出版社名称</label>
          <input
            type="text"
            class="form-control"
            id="editUserPhone"
            name="publisher"
            value="<%= book[0].publisher %>"
            required
          />
        </div>
        <div class="btns">
          <input class="btn btn-add" type="submit" value="确定" />
          <a class="btn btn-return" href="/users">返回</a>
        </div>
    </div>
  </body>
</html>

4.10 创建借阅图书界面

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

    <%- include('navbar') %>
    <div class="container">
      <h2>借阅图书管理</h2>
      <a class="btn btn-primary" href="/page_record">添加借阅</a>
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名称</th>
            <th>图书名称</th>
            <th>借阅时间</th>
            <th>归还时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="userTable">
          <% records.forEach(function(record, index) { %>
          <tr>
            <td><%= index+1 %></td>
            <td><%= record.username %></td>
            <td><%= record.title %></td>
            <td><%= record.borrow_date %></td>
            <td><%= record.return_date %></td>
            <td>
              <div class="btns">
                <% if (!record.return_date) { %>
                  <a class="btn btn-edit" href="/records/update/<%= record.id %>">归还</a>
                <% } %>
              </div>
            </td>
          </tr>
          <% }); %>
        </tbody>
      </table>
    </div>
  </body>
</html>

4.11 创建添加借阅图书界面

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

    <%- include('navbar') %>
    <div class="container">
      <h2>添加借阅</h2>
      <form id="editUserForm" action="/records/add" method="post">
        <div class="form-group">
          <label for="editUserName">用户名称</label>
          <select name="userId">
            <% users.forEach(function(user) { %>
              <option value="<%= user.id %>"><%= user.name %></option>
              <% }); %>
          </select>
        </div>
        <div class="form-group">
          <label for="editUserPhone">图书名称</label>
          <select name="bookId">
            <% books.forEach(function(book) { %>
              <option value="<%= book.id %>"><%= book.title %></option>
              <% }); %>
          </select>
        </div>
        <div class="btns">
          <input class="btn btn-add" type="submit" value="借阅" />
          <a class="btn btn-return" href="/records">返回</a>
        </div>
      </form>
    </div>
  </body>
</html>

五、运行测试项目

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

账号	密码
root	root

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

其他文章推荐：

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

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

Express EJS渲染技术详解

本文标签：如何使用图书管理系统 MySQL Express

版权声明：本文标题：10分钟学习如何使用 Express+Mysql开发图书管理系统内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726801953h1031120.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

技术交流 – FreeNAS中文网

10分钟学习如何使用 Express+Mysql开发图书管理系统

阅读前必读

摘要

一、需求分析

二、数据库设计

2.1 数据表设计

2.2 数据表创建

三、后端接口的开发

3.1 项目准备工作

3.1.1 创建项目目录

3.1.2 打开项目目录

3.1.2 初始化项目

3.1.3 安装框架包

3.1.3 创建项目结构目录

3.2 编写后端代码

3.2.1 创建入口文件 app.js

3.2.1.1 引入模块

3.2.1.2 创建express应用程序

3.2.1.3 注册解析请求体

3.2.1.4 注册会话

3.2.1.5 注册静态资源目录

3.2.1.5 设置ejs模版引擎

3.2.1.6 指定视图文件夹路径

3.2.1.7 配置项目监听端口

3.2.1.8 简单测试

3.3 创建数据库工具

3.4 创建路由

3.4.1 创建页面路由文件

pageRoutes.js 文件整体代码:

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

loginRoutes.js 整体代码

3.4.3 创建用户路由文件

userRoutes.js 整体代码

3.4.5 创建图书路由文件

bookRoutes.js 整体代码

3.4.6 创建借阅路由文件

recordRoutes.js 整体代码

3.5 注册路由

app.js 整体代码

四、前端页面的编写

4.1 创建资源文件

4.2 创建导航栏页面

4.3 创建登录

4.4 创建用户管理页面

4.5 创建添加用户界面

4.6 创建修改用户界面

4.7 创建图书界面

4.8 创建添加图书界面

4.9 创建修改图书界面

4.10 创建借阅图书界面

4.11 创建添加借阅图书界面

五、运行测试项目

其他文章推荐：

更多相关文章

浏览器翻译功能在哪里，如何使用浏览器翻译网页

MAC下MySQL初始密码忘记怎么办

windows系统开启mysql的binlog

如何使用ChatGPT-Midjourney：一键搭建你的智能网页服务平台

如何使用Win7系统自带备份还原

如何使用u盘装win7 u盘装win7系统图文教程

Win10安装express

【物联网全栈-1】：技能树 ESP32+SpringBoot+BootStrap+Mysql+Mqtt

Mysql+Win10(64)安装教程

Hadoop集群（第10期）_MySQL关系数据库

如何使用VMware安装并激活windows 10（保姆级图文教程）

shell打开文件夹命令_如何使用Windows的Shell命令打开隐藏的系统文件夹

Win7系统一键重装功能如何使用(Win7系统一键重装功能怎么使用)

windows 7 下安装mysql压缩包版

Windows 安装 MySQL 5.7详细步骤

Windows 7 64位搭建 PHP+apache+mysql环境

windows7系统下mysql的安装（windows10同理）[]

MySQL 8.0.27 下载、安装与配置 超详细教程（Windows64位）

android自定义rc文件,如何使用android init.rc(vendor.rc)读取文件中的值

Windows 7 下，mysql的数据库文件默认路径

发表评论

推荐文章

jsp+ssm计算机毕业设计 停车场管理系统【附源码】

WIN7无法更新解决方案汇总-错误代码80072efe

服务器CPU天梯图（2024年12月），EPYC 9005Xeon 6900P洋垃圾E3及E5

MySQL 8.0.27 下载、安装与配置超详细教程（Windows64位）

jsp+ssm计算机毕业设计停车场管理系统【附源码】

（Windows系统）详细介绍Windows系统含有英文版