java三层开发图书管理系统_学所 前端 | Node.js+MongoDB开发图书管理系统

N

O

D

E

2020  /  10  /  29 

01

 关于Node 

   Node不是一门语言，也不是一个库或者框架，它只是一个运行js的环境——一个开源与跨平台的 JavaScript 运行环境。

    在前端，通常使用Node.js的核心模块来开启前端与数据库交互的服务器和数据渲染。是前端工程师向全栈工程师发展的必备技能点。

更多解释：

http://nodejs.cn/learn

02

 MongoDB 

    MongoDB 是由C++语言编写的，是一个基于分布式文件存储的开源数据库系统。在高负载的情况下，添加更多的节点，可以保证服务器性能。

MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。

文字来源：

https://www.runoob.com/mongodb/mongodb-intro.html

03

 Node + MongoDB 

    我们这次的项目实战是初次涉及前后端的综合性项目，要完成的是一个简易的《图书管理系统》，具体需要完成前端页面对后台数据的基本增删改查以及登录功能。

    先说明一下我们这一组的完成情况：增删改查功能都已具备，但是覆盖不全面；用户登录信息的存储和传递面狭窄，没办法灵活运用；操作日志和加盖时间戳判断已借阅的书籍是否逾期这两大亮点没有完成。虽然倒数是倒数了(一共五个组，我们大概是第四，哈哈哈)，但是收获也是真的多，没做项目之前，我觉得我对这一块知识压根就是不懂的，那接下来就带着读者看看我们这次完成的项目。

    以下是我们完成的页面效果：

            登录界面

用户页——学生、教师页

用户页——查询图书信息页

管理员页——教师信息页

管理员页——修改教师信息页

修改后的教师信息页

删除后的教师信息页

管理员页——学生管理页

管理员页——图书管理页

添加图书信息页

添加后的新图书

超级管理员——管理管理员页

04

 一个小小的踩坑集合 

    (一) 数据库数据的流通

    分配好工作内容之后，我们最先开始的就是页面的搭建、数据库的设计以及搭建。而面临的第一个数据如何在团队中流通共享的问题，有两种办法：

    1、将数据写在Json文件中，通过将Json文件引入本地数据库的方式拿到与组中与其他成员一样的数据。

    2、比较明智的做法，是在其中的某一台电脑录入完整的数据，再把这台电脑当做组内的服务器，让其他组员访问这台电脑的数据，达到数据共享的的目的。

    (二) 数据库的对应关系

    我们小组使用的是第二种办法，即将Json文件导入本地数据库，然后也顺利地踩了个雷。

    第一天上午，在修改好项目的页面之后，我就开始尝试去调取数据库的数据。将其他成员写好的Json文件引入到我的电脑的方法如下：

1、找到Json文件的所在目录(绝对路径)；

2、在命令行输入以下命令。

mongoimport -d library -c books --file C:\

说明：

-d/-db，-d为缩写，空格之后写上数据库的名称；

-c/-collection，-c为缩写，空格之后写上集合名称；

--file/--f，空格之后写上Json文件的绝对路径(包含文件名)

注意：

    该命令不能保证百分百成功，如果出现错误，应该首先检查拼写，其次可以切换缩写或全写进行多次尝试！

显示connected to db 之后表示引入数据成功，这时候查看数据库：

    确认数据引入成功，接下来开始尝试去使用这些数据。

    尝试之后发现我的前端页面其实并没有获取到数据，好吧，老老实实排查问题：

可能性1：读取数据的语法有误？

    语法错误是应该第一时间排查的，检查一遍，语法没有问题，进行下一步排查。

可能性2：读取数据位置有误？

    读取不到数据，也可能是我读取数据位置不正确，所以我开始着重检查这一部分的代码，果然发现了一点问题：在连接MongoDB的js文件中，mongoose.connect()决定了前端页面要连接的数据库，这段代码说明我连接的是本地的library数据库，挂载在模型上并且要暴露出去的就是mongoose.model中叫Book的这个表，这个表在MongoDB中也被称作集合。

    接下来阐述问题的关键：在Book这个位置，我们容易理解为这是library库中一个叫Book的表，所以就去这个Book表中获取数据，这就产生了“错位”。因为在js文件中写的Book表名，对应的数据库中的表名是books，而不是Book，发现这个问题之后，我重新将Json文件导入到library库中的books表(集合)中，并且在代码中手动写入了一条数据，发现这条手动添加的数据与导入的Json文件的数据都存在与books这个表中了，

    啊，终于！还没有结束……

    (三) Json文件中数据的格式

    即使这些数据存在于我所使用的数据表中，但我依旧获取不到Json文件中的数据，逐渐开始头秃……

    接下来就是一顿熟悉又迅猛的百度搜索操作……这时候第二天的上午已经快要没了。而当我以为一无所获的时候，打开的众多网页标签中，有这么一篇文章突然又吸引到了我的注意，我认真的留意了其中的一些细节，意识到了可能存在的问题。

    仔细观察下面两份Json文件的数据格式：

相信都看出来区别了，果然错误就出在了这个地方。

    第一个数据格式通常是在我们不使用数据库，但是又需要模拟一些数据操作时会使用到；而当需要引入数据库时，则需要换成第二种格式，这样引入的Json文件才能被数据库读取到其中的一条条数据，而在数据库引入第一种数据格式的时候，数据库会把这一整个Json文件当做一条数据，即第一种格式中最外层的黄色大括号中的内容被视为了一条数据。

 啊……心真累……

 修改好Json文件的格式后，再使用mongoimport将文件引入本地数据库，完成后再读取数据，数据完美呈现！

 此时半个项目周期过去了……

05

 功能实现 

    查询图书(根据图书名称和分类查询)

    数据都修正好之后，我开始研究学生页查询图书的功能。先了解一下功能需求：学生查询图书，应该是可以通过图书的名称、图书的作者、图书的出版社乃至图书的编号来查询的。这些查询条件都可以返回多条查询结果，与此同时，我们都希望能够达到模糊查询的效果，即当我只输入某些关键词时，可以返回包含这个关键词的所有结果。说到模糊查询，可能很多人都会最先想到使用正则表达式来进行验证，然而这个方法并不是很好用。下面是具体的阐述。

    如果想用正则表达式来验证，我们首先需要获取得到用户的输入，如下：通过表单元素的name值将当前表单元素的触发信号传递到服务器，服务器通过req.query.name的方式获取到前端页面中用户输入的内容。

    获取到用户输入内容之后进行正则判断，按照一般的验证思路，我们首先可以定义一个正则验证表达式reg，之后使用该表达式去与用户的输入内容匹配：reg.test(req.query.name)，然而这并没有起作用。我猜测是我的判断语句有问题，便去掉了if判断，直接测试正则是否起作用，便写成这个样子：Books.find({Bname:{$regex:reg}})，意思是在Books这个表中查找Bname(图书名称)符合reg这个正则要求的数据，写好之后返回页面查看查询结果，正则起效。

    接下来我开始研究怎么组合语法让其达到模糊查询的功能，但是思路有限，在复盘的此刻，我隐约感觉到这个思路很可能并不正确，可能我一开始就走进了一个误区里，这就留着日后顿悟吧。另外我查找到，在MongoDB中使用的正则规则是PCRE，一个我不知道是啥的玩意儿。这就先搁着吧。

    第三天。我决定只完成图书名称查询和图书分类查询两个小功能，之后增添了一个修改密码的前端验证，验证可以拿到用户的原密码，并限制新密码长度及需要二次确认等，但是最后修改的密码并没能写入数据库，其实这就是一个代码块的问题，但是我们最后没能完美写出，有点可惜。

    之后我开始着手整合，大体还算顺利，但是由于跟登录界面整合的时候有一个问题始终解决不掉，而在别的电脑上可以正常使用，最终就决定将项目整合到另一边。估计是第一次整合，负责整合的新同学重蹈了很多我整合的过程中碰到的问题(其实是不必要的)，又花费了很多的时间。

    一个小小的总结

学习知识的时候一定要扎实一定要扎实一定要扎实！

一定要会用一定要会用一定要会用，光记得没有用！

写项目的时候逻辑一定要清晰一定要清晰一定要清晰！

项目的开发文档规范一定要遵守一定要遵守一定要遵守！

写完项目之后的我，回血回了好几天……

--END--

扫码关注

编辑 | Seongyeom

封面 | 来源百度图片