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

---

项目简介

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

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

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

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

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

图书详细信息表：

类型信息表：

项目结构和配置

项目功能拆解

1.用户相关操作

（1）用户注册

输入下面信息进行注册

• 判断用户名是否存在等
• 注册成功跳转到登陆页面
  
  

（2）用户登陆

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

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

（3）用户信息修改

修改昵称：

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

密码修改：

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

（4）退出登陆

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

session.invalidate(); // 清理session

退出后回到登陆页面

2.图书管理–类型管理

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

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

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

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

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

解决方案：分页显示

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

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

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

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

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

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

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

• 表格快速美化

<table class="table-condensed table-hover table-striped table-responsive table-cell table-row-cell table-view table-bordered">

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

<a href="/day06/opus/remove?id=${opus.id}" 
class="btn btn-warning btn-sm">删除</a>

可以优化的地方

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

6.图书的增删改

（1）添加一本书

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

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

（2）修改图书信息

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

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

（3）删除一本书

在列表页面点击删除按钮

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

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

思考 & 改进

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

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

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

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

前端基础（Vue）——基础语法（{{}}, v-model, :src=“imagSrc“, v-for）& 事件@click & 属性和方法（this.add() + this.name）

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

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