基于Node.js和Bootstrap的圖書(shū)管理系統(tǒng)設(shè)計(jì)與研究

陳明雪 趙勇 周小麗 鄧思風(fēng)

摘 ?要：隨著高職院校的持續(xù)擴(kuò)招，圖書(shū)館藏書(shū)數(shù)量不斷增加，這對(duì)圖書(shū)的管理提出了越來(lái)越高的要求。通過(guò)圖書(shū)管理設(shè)計(jì)系統(tǒng)，可以提高圖書(shū)管理水平，實(shí)現(xiàn)圖書(shū)的添加、刪除、修改等功能。文章采用Node.js技術(shù)中的模塊化思想完成圖書(shū)管理系統(tǒng)的功能設(shè)計(jì)，應(yīng)用Bootstrap框架完成頁(yè)面設(shè)計(jì)，并從技術(shù)介紹、環(huán)境搭建、系統(tǒng)功能、數(shù)據(jù)庫(kù)設(shè)計(jì)等幾個(gè)方面對(duì)圖書(shū)管理系統(tǒng)進(jìn)行設(shè)計(jì)與研究。

關(guān)鍵詞：圖書(shū)管理系統(tǒng);Node.js;Bootstrap

中圖分類號(hào)：TP311 ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：2096-4706（2021）24-0012-04

Abstract： With the durative expansion of higher vocational colleges and ever-increasing number of library books， the management requirements of books are getting higher and higher. Through the book management system，， we can improve the level of book management and realize the functions of adding， deleting and modifying books. This paper adopts the modular idea in Node.js technology to complete the functional design of the book management system， applies the Bootstrap framework to complete the page design， and designs and researches the book management system from the aspects of technology introduction， environment construction， system function and database design.

Keywords： book management system; Node.js; Bootstrap

0 ?引 ?言

近年來(lái)，隨著各大高校學(xué)生的擴(kuò)招，學(xué)校的圖書(shū)館規(guī)模擴(kuò)大，圖書(shū)管理存在越來(lái)越多的問(wèn)題，如學(xué)生借閱過(guò)程中不知道藏書(shū)是否存在，在圖書(shū)館中進(jìn)行尋找是比較麻煩的;或者需要獲取一些電子版的圖書(shū)相關(guān)資料時(shí)，圖書(shū)館卻沒(méi)有。這時(shí)可以設(shè)計(jì)一款圖書(shū)管理系統(tǒng)對(duì)圖書(shū)進(jìn)行管理。本文采用Node.js技術(shù)和Bootstrap框架設(shè)計(jì)圖書(shū)管理系統(tǒng)，在瀏覽器端可對(duì)圖書(shū)管理系統(tǒng)進(jìn)行登錄、注冊(cè)、添加、刪除、修改、查詢、上傳、下載操作。

1 ?設(shè)計(jì)過(guò)程

1.1 ?相關(guān)技術(shù)介紹

在國(guó)內(nèi)開(kāi)發(fā)者大多數(shù)采用JavaWeb、JavaEE、PHP、C++等技術(shù)來(lái)進(jìn)行圖書(shū)管理系統(tǒng)的開(kāi)發(fā)，以JavaEE為例，現(xiàn)從采用的框架或模塊、安裝環(huán)境、數(shù)據(jù)庫(kù)連接、學(xué)習(xí)興趣、應(yīng)用優(yōu)勢(shì)等幾個(gè)方面與Node.js技術(shù)進(jìn)行對(duì)比闡述，如表1所示。

本文采用Node.js技術(shù)和Bootstrap框架設(shè)計(jì)圖書(shū)管理系統(tǒng)，在瀏覽器端對(duì)圖書(shū)管理系統(tǒng)進(jìn)行登錄、注冊(cè)、添加、刪除、修改、查詢、上傳、下載操作，將發(fā)生改變的數(shù)據(jù)發(fā)送給服務(wù)器端，再由服務(wù)端反饋給數(shù)據(jù)庫(kù)。首先使用Node.js模塊化思想進(jìn)行開(kāi)發(fā)，把一個(gè)圖書(shū)管理系統(tǒng)具體到某一個(gè)具體功能點(diǎn)（如添加功能點(diǎn)或者刪除功能點(diǎn)），把每一個(gè)功能點(diǎn)看做一個(gè)模塊，然后通過(guò)相應(yīng)的規(guī)則把這些小的模塊組合到一起，構(gòu)成模塊化系統(tǒng);這種思想的優(yōu)勢(shì)之處在于，當(dāng)某一個(gè)功能模塊發(fā)生改變或者出現(xiàn)問(wèn)題時(shí)不影響其他模塊的使用，可實(shí)現(xiàn)高效開(kāi)發(fā)、低成本維護(hù)。其次采用Node.js中的http模塊實(shí)現(xiàn)瀏覽器客戶端和服務(wù)器之間的連接，通過(guò)http模塊提供的listening方法可以對(duì)客戶端瀏覽器進(jìn)行監(jiān)聽(tīng)，客戶端瀏覽器和服務(wù)端之間可以相互發(fā)送數(shù)據(jù)，一旦操作客戶端瀏覽器發(fā)生數(shù)據(jù)改變，這些數(shù)據(jù)就會(huì)傳遞給服務(wù)端，服務(wù)端再將數(shù)據(jù)反饋給數(shù)據(jù)庫(kù)，使用http模塊提供的request方法可以獲取客戶端發(fā)送的數(shù)據(jù)。其次使用Express框架、fs模塊、path模塊、art-template模塊、formidable模塊、url模塊可實(shí)現(xiàn)登錄、注冊(cè)、添加、刪除、修改、查詢、上傳、下載功能。

而B(niǎo)ootstrap框架提供了一些CSS布局、組件（如按鈕、下拉菜單、導(dǎo)航、Flex布局）、Javascript插件（如輪播圖、滾動(dòng)監(jiān)聽(tīng)、模態(tài)框），便于圖書(shū)管理系統(tǒng)的前端頁(yè)面設(shè)計(jì)。

1.2 ?環(huán)境搭建

采用JavaEE需要服務(wù)器Tomcat8.0、Eclipse開(kāi)發(fā)環(huán)境、數(shù)據(jù)庫(kù)Mysql5.5以上版本、谷歌或者火狐瀏覽器，系統(tǒng)環(huán)境搭建中需要準(zhǔn)備Spring、SpringMVC、Mybatis的jar包和數(shù)據(jù)庫(kù)連接的jar包等，簡(jiǎn)言之整個(gè)系統(tǒng)準(zhǔn)備的jar包較多。

而Node.js和Bootstrap安裝環(huán)境較為簡(jiǎn)單，只需要Node.js最新穩(wěn)定版安裝包、Bootstrap版本4安裝包，Node.js中所用到的Express框架、formidable模塊、art-template模塊、http模塊、fs模塊、url模塊中前面三個(gè)需要使用前安裝，后面幾個(gè)在安裝好Node.js環(huán)境后可以直接使用，安裝時(shí)間很快但需要網(wǎng)絡(luò)情況較好。

1.3 ?數(shù)據(jù)庫(kù)設(shè)計(jì)

圖書(shū)管理系統(tǒng)主要設(shè)計(jì)的功能是登錄、注冊(cè)、添加、刪除、修改、查詢、上傳、下載，在此過(guò)程中涉及用戶信息表、圖書(shū)管理表。用戶信息表包含用戶名和密碼字段如表2所示;圖書(shū)管理表包含id、書(shū)名、主編、圖書(shū)相關(guān)資料、圖書(shū)封面等字段如表3所示。

1.4 ?系統(tǒng)功能

該圖書(shū)管理系統(tǒng)主要實(shí)現(xiàn)用戶的圖書(shū)登錄、注冊(cè)、添加、刪除、修改、查詢、上傳、下載功能。

用戶可以在該系統(tǒng)中進(jìn)行賬號(hào)注冊(cè)、使用賬號(hào)進(jìn)行登錄;當(dāng)用戶需要尋找書(shū)籍時(shí)可以在該系統(tǒng)中進(jìn)行查詢，在查詢圖書(shū)信息后也可下載該圖書(shū)的相關(guān)電子版資料;當(dāng)圖書(shū)館購(gòu)置新書(shū)時(shí)可將新書(shū)信息添加在該系統(tǒng)中以供查詢，在添加圖書(shū)信息時(shí)也可將圖書(shū)相關(guān)的電子版資料進(jìn)行上傳;當(dāng)書(shū)籍信息發(fā)生改變時(shí)，如有外借或者其他情況需要修改信息，可在該系統(tǒng)中進(jìn)行修改;當(dāng)圖書(shū)不在館中時(shí)可以將圖書(shū)信息刪除。

下面以圖書(shū)管理系統(tǒng)的添加模塊為例進(jìn)行詳細(xì)的敘述。

1.4.1 ?添加功能實(shí)現(xiàn)流程

在圖書(shū)管理系統(tǒng)首頁(yè)中點(diǎn)擊添加圖書(shū)按鈕，進(jìn)入添加頁(yè)面，添加頁(yè)面中可以添加書(shū)名、主編等圖書(shū)信息，同時(shí)可以上傳圖書(shū)相關(guān)學(xué)習(xí)資料、圖書(shū)封面信息，點(diǎn)擊提交按鈕，添加數(shù)據(jù)會(huì)發(fā)送到服務(wù)器，服務(wù)器將數(shù)據(jù)存放在數(shù)據(jù)庫(kù)進(jìn)行保存，具體流程如圖1所示。

1.4.2 ?首頁(yè)頁(yè)面和添加頁(yè)面部分展示

首頁(yè)頁(yè)面的添加功能按鈕展示如圖2所示，在首頁(yè)頁(yè)面中通過(guò)點(diǎn)擊添加圖書(shū)信息按鈕進(jìn)入到添加頁(yè)面。圖3為圖書(shū)管理系統(tǒng)添加頁(yè)面，添加頁(yè)面中可實(shí)現(xiàn)添加圖書(shū)字段信息，包含書(shū)名、主編信息、上傳圖書(shū)相關(guān)學(xué)習(xí)資料、上傳添加圖書(shū)封面信息，信息添加點(diǎn)擊提交，數(shù)據(jù)會(huì)保存在數(shù)據(jù)庫(kù)，在查詢功能中可查到該圖書(shū)信息。

1.4.3 ?實(shí)現(xiàn)首頁(yè)和添加頁(yè)面的部分展示代碼

下述代碼主要是實(shí)現(xiàn)首頁(yè)中的排版，包含Bootstrap框架的Flex布局、表單樣式、按鈕、文字樣式。同理添加頁(yè)面、修改頁(yè)面也按照Boootstrap框架提供的組件、CSS樣式、Javascript插件進(jìn)行設(shè)計(jì)。

添加圖書(shū)信息 ?//btn btn-success綠色按鈕樣式

1.4.4 ?實(shí)現(xiàn)添加功能的部分展示代碼

以下為部分代碼，module.exports.showAdd_POST 表示向外開(kāi)放方法showAdd_POST，該方法為自定義方法，該方法中使用Node.js提供的formidable模塊實(shí)現(xiàn)添加功能、并將上傳的文件信息保存在數(shù)據(jù)庫(kù)，form.parse（request， function（err， fields， files）中使用fields保存瀏覽器客戶端發(fā)送的字段信息，files表示保存瀏覽器客戶端發(fā)送的文件信息。

module.exports.showAdd_POST = function（request， response） {

var form = new formidable.IncomingForm（）;

form.uploadDir = “./upload”;

form.parse（request， function（err， fields， files） {

var id = 0

music.forEach（function（item） {

if （item.id > id） {

id = item.id

}

}）

music.push（{

id： id + 1，

title： fields.title，

singer： fields.singer，

musicN： files.file.originalFilename，

poster： files.picture.originalFilename，

}）

index（request， response）

}）

}

1.5 ?軟件測(cè)試

在圖書(shū)管理系統(tǒng)設(shè)計(jì)完成后需進(jìn)行測(cè)試，測(cè)試各功能模塊是否能夠運(yùn)行，注冊(cè)中，用戶名不超過(guò)8個(gè)字符，密碼不能為純數(shù)字;注冊(cè)后測(cè)試賬號(hào)是否能夠正常登錄。登錄成功進(jìn)入首頁(yè)后測(cè)試查詢、添加、刪除、修改功能是否能夠正常使用，在首頁(yè)中測(cè)試添加圖書(shū)按鈕是否會(huì)進(jìn)行添加頁(yè)面，測(cè)試刪除能夠是否正常，點(diǎn)擊修改按鈕是否能進(jìn)入修改頁(yè)面。同時(shí)在首頁(yè)中測(cè)試是否能夠正常下載文件資料，在添加和修改頁(yè)面中測(cè)試是否能夠上傳資料。根據(jù)不斷地測(cè)試和不斷的修改最終成功實(shí)現(xiàn)圖書(shū)管理系統(tǒng)的各部分功模塊，符合用戶的需求，可以正常使用。

在測(cè)試過(guò)程中也發(fā)現(xiàn)一些問(wèn)題，如在查詢頁(yè)面點(diǎn)擊添加圖書(shū)按鈕無(wú)法進(jìn)入到添加頁(yè)面，這是由于在對(duì)客戶端瀏覽器進(jìn)行數(shù)據(jù)反饋判斷時(shí)，對(duì)url地址判斷錯(cuò)誤或者h(yuǎn)ttp請(qǐng)求方式判斷錯(cuò)誤，正確的代碼應(yīng)該是if （request.url === “/add”&& request.method == “GET”）。

2 ?結(jié)果分析

使用Node.js的Express框架、formidable模塊、art-template模塊等可成功的實(shí)現(xiàn)圖書(shū)管理系統(tǒng)的登錄、注冊(cè)、添加、刪除、修改、查詢、上傳、下載等功能;在環(huán)境搭建過(guò)程中配置Node.js環(huán)境需注意要為Node.js配置環(huán)境變量;就各個(gè)實(shí)現(xiàn)功能而言，注冊(cè)功能實(shí)現(xiàn)了用戶名長(zhǎng)度不超過(guò)7位，密碼不能為純數(shù)字;查詢功能中，成功的完成了對(duì)書(shū)名的查詢，在查詢功能中成功地實(shí)現(xiàn)了下載圖書(shū)的相關(guān)資料;添加功能中，成功實(shí)現(xiàn)了圖書(shū)信息的添加以及圖書(shū)資料的上傳;修改功能中，成功地實(shí)現(xiàn)了對(duì)圖書(shū)信息的修改;刪除功能中，成功實(shí)現(xiàn)了對(duì)圖書(shū)信息的刪除。

3 ?結(jié) ?論

本文主要講述基于Node.js和Bootstrap兩種技術(shù)設(shè)計(jì)圖書(shū)管理系統(tǒng)，采用Node.js技術(shù)中的模塊化思想、Express框架、formidable模塊、fs模塊、Path模塊等完成設(shè)計(jì)，同時(shí)應(yīng)用Bootstrap框架技術(shù)完成圖書(shū)管理系統(tǒng)的頁(yè)面設(shè)計(jì)。詳細(xì)介紹使用Node.js和Bootstrap進(jìn)行設(shè)計(jì)的步驟，主要包含環(huán)境搭建、系統(tǒng)功能、數(shù)據(jù)庫(kù)設(shè)計(jì)，以及選擇其中一個(gè)添加功能模塊進(jìn)行詳細(xì)敘述，同時(shí)將現(xiàn)有的一些技術(shù)如JavaEE與Node.js進(jìn)行對(duì)比發(fā)現(xiàn)，對(duì)于學(xué)生來(lái)說(shuō)，Node.js技術(shù)學(xué)習(xí)難度較低，安裝的環(huán)境也較為簡(jiǎn)單，當(dāng)頁(yè)面請(qǐng)求數(shù)據(jù)較大時(shí)，Node.js依然能夠輕松實(shí)現(xiàn);而JavaEE技術(shù)引用的jar包較多，安裝環(huán)境較為復(fù)雜，很多時(shí)候由于安裝環(huán)境的問(wèn)題導(dǎo)致即使代碼沒(méi)有問(wèn)題依然無(wú)法運(yùn)行，所以學(xué)生學(xué)習(xí)Node.js技術(shù)相對(duì)簡(jiǎn)單，成就感較高，興趣較大。

參考文獻(xiàn)：

[1] 張慧娥.基于SPC與Bootstrap方法的高校教學(xué)質(zhì)量評(píng)價(jià)的研究 [D].西安：西安電子科技大學(xué)，2011.

[2] 王訔杰，袁露，金托弟，等.基于vuejs和nodejs的換書(shū)軟件設(shè)計(jì)與實(shí)現(xiàn) [J].電腦迷，2018（33）：115.

[3] 李博洋.基于Node.js的分布式數(shù)字資源開(kāi)放服務(wù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) [D].北京：北京郵電大學(xué)，2014.

[4] 黃揚(yáng)子.基于NodeJS平臺(tái)搭建REST風(fēng)格Web服務(wù) [J].無(wú)線互聯(lián)科技，2015（16）：57-59.

[5] 戎玫，張廣泉，劉艷.基于軟件體系結(jié)構(gòu)和UML的圖書(shū)管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)科學(xué)，2005（6）：224-227.

[6] 王立萍.基于B/S的圖書(shū)管理系統(tǒng)的設(shè)計(jì)與開(kāi)發(fā) [J].承德民族師專學(xué)報(bào)，2004（2）：27-28.

作者簡(jiǎn)介：陳明雪（1991—），女，漢族，四川成都人，電子計(jì)算機(jī)工程師，助教，碩士研究生，研究方向：計(jì)算機(jī)技術(shù)。