当前位置：极客教程 > Node.js > Node.js 精品文章 > Node.js 如何构建图书管理系统

Node.js 如何构建图书管理系统

Node.js 如何构建图书管理系统

在本文中，我们将创建一个图书管理系统。图书管理系统主要用于管理图书馆的图书记录，图书管理员可以查看所有可用图书，添加新图书，删除图书，借出图书和归还图书。

功能： 图书管理员可以使用此图书管理系统执行以下操作：

  • 显示可用图书
  • 添加新图书
  • 删除图书
  • 借出图书
  • 归还图书

方法： 我们将使用Body Parser来从表单中捕获用户输入值（如图书名称，作者，页数和价格）并将其存储在一个集合中。然后，我们将使用EJS将图书的数据发送到网页。EJS是一个中间件，可以方便地将数据从服务器文件（app.js或server.js）发送到网页。我们还将创建删除图书的Delete Route，借出图书的Issue Route和归还图书的Return Route。

实施： 以下是以上方法的逐步实施。

步骤1：项目设置：

初始化NPM： 创建并定位到项目文件夹，然后在终端中键入以下命令：

npm init -y

它初始化我们的节点应用程序，并创建一个package.json文件。

安装依赖项： 在终端中定位您的根项目目录，并键入命令

npm install express ejs body-parser

安装Express、EJS和Body Parser作为项目的依赖项

创建服务器文件： 在”app.js”中创建一个文件，该文件需要Express模块，并创建一个常量”app”以创建Express模块的实例，然后将EJS设置为默认视图引擎。

const express = require('express');

const app = express();
app.set('view engine', 'ejs');

重新排列目录: 要在HTML文件中使用EJS，需要使用“.ejs”作为扩展名，而不是“.html”。然后，您需要将每个“.ejs”文件移到根目录下的views目录中。EJS默认在views文件夹内查找“.ejs”文件。

使用EJS变量： 在您更新的.ejs文件中，您需要使用EJS变量从服务器文件接收值。您可以像这样在EJS中声明变量

<%= variableName %>

<!DOCTYPE html> 
<html> 
   
<head> 
    <title>Page Title</title> 
</head> 
   
<body> 
    <%= variableName %> 
</body> 
  
</html>

将数据发送给变量： 在你的服务器文件（app.js或index.js）中，你可以使用render方法发送一个EJS文件以及一些数据。

app.get("/", (req, res) => {
    res.render("home", { variableName: "Hello Geeks!" })
})

const express = require('express') 
const app = express() 
app.set('view engine', 'ejs') 
  
app.get("/", (req, res) => { 
     res.render("home", { variableName: "Hello Geeks!" }) 
}) 
  
app.listen(3000, (req, res) => { 
     console.log("App is running on port 3000") 
})

从表单中获取数据到app.js： 要接收表单的输入值，我们必须使用一个名为body-parser的node包。

安装body-parser：

npm install body-parser

需要 body-parser 模块：

const bodyParser = require('body-parser')

然后:

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

然后我们可以使用request对象处理表单数据。

步骤2：获取可用的书籍： 我们有一个具有不同属性的书籍数组。让我们将该数组发送到我们的网页。在上一步中，我们只是向变量发送了一个值，现在我们发送整个数组。

const express = require('express') 
const bodyParser = require('body-parser') 
const books = [{ 
        bookName: "Rudest Book Ever", 
        bookAuthor: "Shwetabh Gangwar", 
        bookPages: 200, 
        bookPrice: 240, 
        bookState: "Available"
    }, 
    { 
        bookName: "Do Epic Shit", 
        bookAuthor: "Ankur Wariko", 
        bookPages: 200, 
        bookPrice: 240, 
        bookState: "Available"
    } 
] 
  
const app = express() 
  
app.set('view engine', 'ejs') 
  
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true
})) 
  
app.get("/", function (req, res) { 
    res.render("home", { 
        data: books 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

由于我们的数组内有很多元素，而且我们需要打印每个元素，所以我们必须使用For Each循环来遍历我们集合中的每个元素并显示其详细信息。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>ChatRoom</title> 
</head> 
<style> 
    table { 
        font-family: arial, sans-serif; 
        border-collapse: collapse; 
        width: 100%; 
    } 
  
    td, 
    th { 
        border: 1px solid #dddddd; 
        text-align: left; 
        padding: 8px; 
    } 
  
    tr:nth-child(even) { 
        background-color: #dddddd; 
    } 
</style> 
  
<body> 
    <h1>All Books</h1> 
    <table> 
        <tr> 
            <th>Book Name</th> 
            <th>Book Author</th> 
            <th>Book Pages</th> 
            <th>Book Price</th> 
            <th>Book Availability</th> 
            <th>Issue</th> 
            <th>Return</th> 
            <th>Delete</th> 
        </tr> 
        <% data.forEach(element=> { %> 
            <tr> 
                <td> 
                    <%= element.bookName %> 
                </td> 
                <td> 
                    <%= element.bookAuthor %> 
                </td> 
                <td> 
                    <%= element.bookPages %> 
                </td> 
                <td> 
                    <%= element.bookPrice %> 
                </td> 
                <td> 
                    <%= element.bookState %> 
                </td> 
            </tr> 
            <% }) %> 
  
    </table> 
  
</body> 
  
</html>

步骤3：将书籍添加到列表中： 为此，我们需要创建一个表单，并在我们的’app.js’文件中使用Body Parser处理表单数据。

<form action="/" method="post">
        <input type="text" placeholder="Book Name" 
                name="bookName">
        <input type="text" placeholder="Book Author" 
                name="bookAuthor">
        <input type="text" placeholder="Book Pages" 
                name="bookPages">
        <input type="text" placeholder="Book Price" 
                name="bookPrice">
        <button type="submit">Add</button>
</form>

在‘app.js’中处理表单数据： 我们需要使用req.body.valueName从表单中获取值，然后像对象一样整理它，并将其推送到我们的书籍数组中。

app.post("/", (req, res) => {
   const inputBookName = req.body.bookName
   const inputBookAuthor = req.body.bookAuthor
   const inputBookPages = req.body.bookPages
   const inputBookPrice = req.body.bookPrice

   books.push({
       bookName: inputBookName,
       bookAuthor: inputBookAuthor,
       bookPages: inputBookPages,
       bookPrice: inputBookPrice,
       bookState: "Available"
   })

   res.render("home", {
       data: books
   })
})

步骤4：借书： 更新网页，提供借书选项：我们必须创建一个表单，将我们想要借阅的书名发送到服务器文件’app.js’。

<form action="/issue" method="post">
     <input type="text" style="display: none;" 
             name="bookName" value="<%= element.bookName %>">
     <button type="submit">Issue</button>
</form>

要发布一本书，我们必须创建一个发布路线，在这个路线中，我们将获取请求的书名并搜索具有相同书名的元素，然后将该元素的状态属性更改为 已发布 。

app.post('/issue', (req, res) => {
   var requestedBookName = req.body.bookName;
   books.forEach(book => {
       if (book.bookName == requestedBookName) {
           book.bookState = "Issued";
       }
   })
   res.render("home", {
       data: books
   })
})

步骤5：归还书籍： 更新网页，提供归还选项：我们需要创建一个表单，将要归还的书籍名称发送到服务器文件’app.js’。

<form action="/return" method="post">
           <input type="text" style="display: none;" 
                   name="bookName" value="<%= element.bookName %>">
           <button type="submit">Return</button>
</form>

为了归还一本书，我们需要创建一个归还路径，在这条路径上我们将获取被请求的书籍名称并搜索具有相同书名的元素，然后将该元素的状态属性更改为“可用”。

app.post('/return', (req, res) => {
   var requestedBookName = req.body.bookName;
   books.forEach(book => {
       if (book.bookName == requestedBookName) {
           book.bookState = "Available";
       }
   })
   res.render("home", {
       data: books
   })
})

步骤6：删除图书： 更新网页并提供删除选项：我们必须创建一个表单，将我们想要删除的图书名称发送到服务器文件’app.js’。

<form action="/delete" method="post">
      <input type="text" style="display: none;" 
              name="bookName" value="<%= element.bookName %>">
      <button type="submit">Delete</button>
</form>

删除书籍，我们需要创建一个删除路由，在该路由中，我们将获取请求的书籍名称，并搜索具有相同书籍名称的元素，然后删除该元素。

app.post('/delete', (req, res) => {
   var requestedBookName = req.body.bookName;
   var j = 0;

   books.forEach(book => {
       j = j + 1;
       if (book.bookName == requestedBookName) {
           books.splice((j - 1), 1)
       }
   })

   res.render("home", {
       data: books
   })
})

示例： 下面是使用Node.js构建图书管理系统的完整代码：

app.js

const express = require('express') 
const bodyParser = require('body-parser') 
const books = [{ 
        bookName: "Rudest Book Ever", 
        bookAuthor: "Shwetabh Gangwar", 
        bookPages: 200, 
        bookPrice: 240, 
        bookState: "Available"
    }, 
    { 
        bookName: "Do Epic Shit", 
        bookAuthor: "Ankur Wariko", 
        bookPages: 200, 
        bookPrice: 240, 
        bookState: "Available"
    } 
] 
  
const app = express() 
  
app.set('view engine', 'ejs') 
  
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({ 
    extended: true
})) 
  
app.get("/", function (req, res) { 
    res.render("home", { 
        data: books 
    }) 
}) 
  
app.post("/", (req, res) => { 
    const inputBookName = req.body.bookName 
    const inputBookAuthor = req.body.bookAuthor 
    const inputBookPages = req.body.bookPages 
    const inputBookPrice = req.body.bookPrice 
  
    books.push({ 
        bookName: inputBookName, 
        bookAuthor: inputBookAuthor, 
        bookPages: inputBookPages, 
        bookPrice: inputBookPrice, 
        bookState: "Available"
    }) 
  
    res.render("home", { 
        data: books 
    }) 
}) 
  
app.post('/issue', (req, res) => { 
    var requestedBookName = req.body.bookName; 
    books.forEach(book => { 
        if (book.bookName == requestedBookName) { 
            book.bookState = "Issued"; 
        } 
    }) 
    res.render("home", { 
        data: books 
    }) 
}) 
  
app.post('/return', (req, res) => { 
    var requestedBookName = req.body.bookName; 
    books.forEach(book => { 
        if (book.bookName == requestedBookName) { 
            book.bookState = "Available"; 
        } 
    }) 
    res.render("home", { 
        data: books 
    }) 
}) 
  
app.post('/delete', (req, res) => { 
    var requestedBookName = req.body.bookName; 
    var j = 0; 
    books.forEach(book => { 
        j = j + 1; 
        if (book.bookName == requestedBookName) { 
            books.splice((j - 1), 1) 
        } 
    }) 
    res.render("home", { 
        data: books 
    }) 
}) 
  
app.listen(3000, (req, res) => { 
    console.log("App is running on port 3000") 
})

home.ejs

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>LMS</title> 
</head> 
<style> 
    table { 
        font-family: arial, sans-serif; 
        border-collapse: collapse; 
        width: 100%; 
    } 
  
    td, 
    th { 
        border: 1px solid #dddddd; 
        text-align: left; 
        padding: 8px; 
    } 
  
    tr:nth-child(even) { 
        background-color: #dddddd; 
    } 
</style> 
  
<body> 
    <h1>All Books</h1> 
    <table> 
        <tr> 
            <th>Book Name</th> 
            <th>Book Author</th> 
            <th>Book Pages</th> 
            <th>Book Price</th> 
            <th>Book Availability</th> 
            <th>Issue</th> 
            <th>Return</th> 
            <th>Delete</th> 
        </tr> 
        <% data.forEach(element=> { %> 
            <tr> 
                <td> 
                    <%= element.bookName %> 
                </td> 
                <td> 
                    <%= element.bookAuthor %> 
                </td> 
                <td> 
                    <%= element.bookPages %> 
                </td> 
                <td> 
                    <%= element.bookPrice %> 
                </td> 
                <td> 
                    <%= element.bookState %> 
                </td> 
                <td> 
                    0 <form action="/issue" method="post"> 
                        <input type="text" style="display: none;" 
                               name="bookName" 
                               value="<%= element.bookName %>"> 
                        <button type="submit">Issue</button> 
                    </form> 
                </td> 
                <td> 
                    <form action="/return" method="post"> 
                        <input type="text" style="display: none;" 
                               name="bookName" 
                               value="<%= element.bookName %>"> 
                        <button type="submit">Return</button> 
                    </form> 
                </td> 
                <td> 
                    <form action="/delete" method="post"> 
                        <input type="text" style="display: none;" 
                               name="bookName" 
                               value="<%= element.bookName %>"> 
                        <button type="submit">Delete</button> 
                    </form> 
                </td> 
            </tr> 
            <% }) %> 
    </table> 
  
    <h1>Add Book</h1> 
  
    <form action="/" method="post"> 
        <input type="text" placeholder="Book Name" 
               name="bookName"> 
        <input type="text" placeholder="Book Author" 
               name="bookAuthor"> 
        <input type="text" placeholder="Book Pages" 
               name="bookPages"> 
        <input type="text" placeholder="Book Price" 
               name="bookPrice"> 
        <button type="submit">Add</button> 
    </form> 
</body> 
  
</html>

输出：

Node.js 如何构建图书管理系统

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

Node.js 精品教程