JavaWeb项目【源码】——图书项目1.0：Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步

小鱼儿 2023-10-12 21:27 12阅读 0赞

#### 目录 ####

*  项目简介
 *  项目结构和配置
 *  项目功能拆解
 *   *  1.用户相关操作
     *   *  （1）用户注册
         *  （2）用户登陆
         *  （3）用户信息修改
         *  （4）退出登陆
     *  2.图书管理--类型管理
     *  3.图书列表1.0——全部显示
     *  4.图书列表——分页显示
     *  5.图书列表——权限+美化
     *  6.图书的增删改
     *   *  （1）添加一本书
         *  （2）修改图书信息
         *  （3）删除一本书
     *  7.数据统计分析初步
 *  思考 & 改进
 *   *  1.Jsp都是同步请求---->改成异步
     *  2.前端用Jsp技术落后----->用Vue框架
     *  3.架构问题：配置数据和Java代码耦合；SQL语句和Java代码耦合
     *  4.架构问题：servlet只能处理一个请求

--------------------

## 项目简介 ##

本项目是一个简单的图书管理系统，本博客在tomcat中采用servlet 和 jsp技术实现如下功能：

*  用户登陆，输入用户名，密码，登陆成功后保存到session中，跳转到首页；
 *  用户注册，输入相关信息，以及验证码，注册成功到登陆页面；
 *  用户信息修改，昵称修改，密码修改；
 *  图书信息页面：展示所有信息，到数据分页显示，到分页展示+模糊查询+只看自己的书；
 *  新增图书信息，新增一条图书信息，类型下拉框选择，书名，简介输入，session中获取用户名和id，数据插入数据库中，再回到图书信息页面；
 *  删除图书信息：只能删除自己的书，删除成功再回到图书信息页面；
 *  修改图书信息：原有的信息进行回显，修改成功后再回到图书信息页面；

![在这里插入图片描述][1e56fd77ad014139b8d7ff45452f350e.png]

此外，引入的bootstrap，JavaScript初步，采用异步的Ajax请求实现了异步登陆和注册功能。

*  登陆，进入登陆页面，输入信息，点击登陆，发送ajax请求，后端servlet处理，返回响应到登陆页面，正确，则跳转到首页；
 *  注册，进入注册页面，输入信息，点击注册，发送ajax请求，后端servlet处理，返回响应到注册页面，成功，则跳转到登陆页面；

![在这里插入图片描述][7c55af90a042436a8ab1a8a8138f70fa.png]

数据库有3张表，图书详细信息表，类型信息表，用户信息表；其中图书详细信息表中保存类型id，通过和类型信息表联查，获得类型的名字；作者id和用户进行表联查，获得用户的username；

图书详细信息表：  
![在这里插入图片描述][173c4c057c6143b38f83b823dc498dd2.png]

类型信息表：  
![在这里插入图片描述][cc60a5480bdf4bd1921de96ca43ea9c3.png]

## 项目结构和配置 ##

![在这里插入图片描述][5804d6b434f2478fbff2c072af89a62e.png]

## 项目功能拆解 ##

![在这里插入图片描述][172ce8d2e72644928de7f03ed4489baa.png]

### 1.用户相关操作 ###

#### （1）用户注册 ####

输入下面信息进行注册

*  判断用户名是否存在等
 *  注册成功跳转到登陆页面  
    ![在这里插入图片描述][38fb49fee2df4b61881e0c935afa8f22.png]  
    ![在这里插入图片描述][4a8e659f4f0d4223a8e8637f3a70b925.png]

#### （2）用户登陆 ####

用户输入用户名和密码，点击登陆

*  后端验证用户名，密码是否正确
 *  登陆成功后跳转到index页面；

![在这里插入图片描述][77b04632af0e434ea82d252d8b400be6.png]

#### （3）用户信息修改 ####

修改昵称：

*  显示原有昵称，输入新的昵称后修改
 *  修改完成后需要把session中的user更新一下
 *  再跳转回到index页面

![在这里插入图片描述][3799f26bb33c4dd1a92fbfc8565587d7.png]  
密码修改：

*  输入原密码，新密码，确认新密码
 *  修改成功后，回到登陆页面；
 *  再重新登陆一下

![在这里插入图片描述][301accfb46ea4d6287a44cad940e9f02.png]

#### （4）退出登陆 ####

点击退出按钮，清理session中数据，然后返回登陆页面

session.invalidate(); // 清理session

![在这里插入图片描述][73921cc790cf4c008dc18ef924d7a5ce.png]  
退出后回到登陆页面

![在这里插入图片描述][9c36ab638b394a9da6944ec02f256f87.png]

### 2.图书管理–类型管理 ###

没啥东西，就是显示一下全部的类型信息

*  后面图书添加，修改都需要用到类型信息

![在这里插入图片描述][6869892f399f4da0a2fea5fb9cdd6406.png]

### 3.图书列表1.0——全部显示 ###

后端把数据全部查询出来，给前端进行显示

*  存在问题，后端查询压力大
 *  前端显示数量太多；

解决方案：分页显示

![在这里插入图片描述][0b6a56a35949432dae5b6d911ff8726d.png]

### 4.图书列表——分页显示 ###

针对上面的问题，定义PageInfo实体类，专门用来做分页的查询

*  存在问题：太丑了，前端需要美化一下
 *  此外，需要实现权限的控制，就是登陆的用户只能查看自己的书
 *  扩展：增加搜索框

![在这里插入图片描述][0c0785b25dcc4375a6962782a99e65c3.png]

### 5.图书列表——权限+美化 ###

如何做到登陆的人只能查看自己的图书

*  用户登陆后，把登陆的user对象存到session中
 *  每次查询时从session中获取用户的id
 *  用上面获取的用户id再查询数据库中的数据

用bootstrap进行前端样式的美化  
主要美化代码：

*  表格快速美化

*  把a标签弄成类似按钮样式

![在这里插入图片描述][234976b117384aaab6ecfa2ff3b5d165.png]  
可以优化的地方

*  再加几个搜索框，丰富搜索功能

### 6.图书的增删改 ###

#### （1）添加一本书 ####

新增图书时，需要获取类型信息

*  后端查询类型，共享值，转发给jsp；
 *  用户填写信息，给后端传书名，简介，类型id；
 *  添加成功再回到图书列表页面；

![在这里插入图片描述][eb0f89ff98bc4a8680262c21fc98cc57.png]

#### （2）修改图书信息 ####

修改图书时，先在列表页面点击修改，需要

*  点击修改，把要修改的图书的id给后端；
 *  后端根据id查询出该图书原有的数据，并且也要查询类型数据；
 *  判断要修改的图书数据中用户id是否和当前session中用户id一致；
 *  把原有的数据+类型数据共享值，转发到Jsp修改页面；
 *  在修改页面进行修改，把修改的id隐藏框，以及书名，简介，类型传给后端；
 *  后端执行修改，修改成功，再活到图书列表页面；

![在这里插入图片描述][5d7fd9e23538432a843d2910686a5a7f.png]

#### （3）删除一本书 ####

在列表页面点击删除按钮

*  删除的id发送给后端；
 *  后端根据id查询出一条数据来，获得要删除的数据；
 *  在要删除的数据中查出这条数据用户id；
 *  从session中获取用户id，和上面的用户id进行对比；
 *  如果一致，才允许删除这条数据，权限控制；
 *  从而保证登陆的人只能删除自己名下的书；

![在这里插入图片描述][1d367a3e462241d39ef59a693678e86e.png]

### 7.数据统计分析初步 ###

统计一下所有类型下图书的数量，如果数量为0要显示数量=0；  
本质是SQL

-- 1.统计总的数量，如果数量为0，也要显示0
    SELECT t_types.id,t_types.name ,COUNT(t_opus.typeId) AS countSum FROM t_types 
    LEFT JOIN t_opus ON t_types.id = t_opus.typeId
    GROUP BY t_types.id
    ORDER BY COUNT(t_opus.typeId) DESC

![在这里插入图片描述][6a760ede668f4728aa0571c1f9e62f0b.png]

## 思考 & 改进 ##

### 1.Jsp都是同步请求---->改成异步 ###

![在这里插入图片描述][5b7869b5011547acb974bd4d0267b96a.png]

[Java网络开发（Asynchronous异步）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求][Java_Asynchronous_ _ Jsp _ Ajax _ axios _ vue _ _ _]

### 2.前端用Jsp技术落后----->用Vue框架 ###

![在这里插入图片描述][7745163fa3314aeb9e635694cfed1585.png]

[前端基础（JavaScript）——基础语法（变量，分支…）& Json对象【重要】& 函数定义 & 事件][JavaScript_ Json_ _ _]

[前端基础（Vue）——基础语法（\{ \{\}\}, v-model, :src=“imagSrc“, v-for）& 事件@click & 属性和方法（this.add() + this.name）][Vue_ _ v-model_ _src_imagSrc_ v-for_ _click _ _this.add_ _ this.name]

### 3.架构问题：配置数据和Java代码耦合；SQL语句和Java代码耦合 ###

![在这里插入图片描述][b67844cffdd04b3e83164ed24a934c6b.png]

### 4.架构问题：servlet只能处理一个请求 ###

![在这里插入图片描述][ee94fbaa2afd49e581b266b207ac755f.png]

[1e56fd77ad014139b8d7ff45452f350e.png]: https://img-blog.csdnimg.cn/1e56fd77ad014139b8d7ff45452f350e.png
[7c55af90a042436a8ab1a8a8138f70fa.png]: https://img-blog.csdnimg.cn/7c55af90a042436a8ab1a8a8138f70fa.png
[173c4c057c6143b38f83b823dc498dd2.png]: https://img-blog.csdnimg.cn/173c4c057c6143b38f83b823dc498dd2.png
[cc60a5480bdf4bd1921de96ca43ea9c3.png]: https://img-blog.csdnimg.cn/cc60a5480bdf4bd1921de96ca43ea9c3.png
[5804d6b434f2478fbff2c072af89a62e.png]: https://img-blog.csdnimg.cn/5804d6b434f2478fbff2c072af89a62e.png
[172ce8d2e72644928de7f03ed4489baa.png]: https://img-blog.csdnimg.cn/172ce8d2e72644928de7f03ed4489baa.png
[38fb49fee2df4b61881e0c935afa8f22.png]: https://img-blog.csdnimg.cn/38fb49fee2df4b61881e0c935afa8f22.png
[4a8e659f4f0d4223a8e8637f3a70b925.png]: https://img-blog.csdnimg.cn/4a8e659f4f0d4223a8e8637f3a70b925.png
[77b04632af0e434ea82d252d8b400be6.png]: https://img-blog.csdnimg.cn/77b04632af0e434ea82d252d8b400be6.png
[3799f26bb33c4dd1a92fbfc8565587d7.png]: https://img-blog.csdnimg.cn/3799f26bb33c4dd1a92fbfc8565587d7.png
[301accfb46ea4d6287a44cad940e9f02.png]: https://img-blog.csdnimg.cn/301accfb46ea4d6287a44cad940e9f02.png
[73921cc790cf4c008dc18ef924d7a5ce.png]: https://img-blog.csdnimg.cn/73921cc790cf4c008dc18ef924d7a5ce.png
[9c36ab638b394a9da6944ec02f256f87.png]: https://img-blog.csdnimg.cn/9c36ab638b394a9da6944ec02f256f87.png
[6869892f399f4da0a2fea5fb9cdd6406.png]: https://img-blog.csdnimg.cn/6869892f399f4da0a2fea5fb9cdd6406.png
[0b6a56a35949432dae5b6d911ff8726d.png]: https://img-blog.csdnimg.cn/0b6a56a35949432dae5b6d911ff8726d.png
[0c0785b25dcc4375a6962782a99e65c3.png]: https://img-blog.csdnimg.cn/0c0785b25dcc4375a6962782a99e65c3.png
[234976b117384aaab6ecfa2ff3b5d165.png]: https://img-blog.csdnimg.cn/234976b117384aaab6ecfa2ff3b5d165.png
[eb0f89ff98bc4a8680262c21fc98cc57.png]: https://img-blog.csdnimg.cn/eb0f89ff98bc4a8680262c21fc98cc57.png
[5d7fd9e23538432a843d2910686a5a7f.png]: https://img-blog.csdnimg.cn/5d7fd9e23538432a843d2910686a5a7f.png
[1d367a3e462241d39ef59a693678e86e.png]: https://img-blog.csdnimg.cn/1d367a3e462241d39ef59a693678e86e.png
[6a760ede668f4728aa0571c1f9e62f0b.png]: https://img-blog.csdnimg.cn/6a760ede668f4728aa0571c1f9e62f0b.png
[5b7869b5011547acb974bd4d0267b96a.png]: https://img-blog.csdnimg.cn/5b7869b5011547acb974bd4d0267b96a.png
[Java_Asynchronous_ _ Jsp _ Ajax _ axios _ vue _ _ _]: https://blog.csdn.net/Pireley/article/details/131142137
[7745163fa3314aeb9e635694cfed1585.png]: https://img-blog.csdnimg.cn/7745163fa3314aeb9e635694cfed1585.png
[JavaScript_ Json_ _ _]: https://blog.csdn.net/Pireley/article/details/131074239
[Vue_ _ v-model_ _src_imagSrc_ v-for_ _click _ _this.add_ _ this.name]: https://blog.csdn.net/Pireley/article/details/131125600
[b67844cffdd04b3e83164ed24a934c6b.png]: https://img-blog.csdnimg.cn/b67844cffdd04b3e83164ed24a934c6b.png
[ee94fbaa2afd49e581b266b207ac755f.png]: https://img-blog.csdnimg.cn/ee94fbaa2afd49e581b266b207ac755f.png