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

目录

  • 项目简介
  • 项目结构和配置
  • 项目功能拆解
    • 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,数据插入数据库中,再回到图书信息页面;
  • 删除图书信息:只能删除自己的书,删除成功再回到图书信息页面;
  • 修改图书信息:原有的信息进行回显,修改成功后再回到图书信息页面;

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第1张图片

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

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第2张图片

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

图书详细信息表:
JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第3张图片

类型信息表:
JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第4张图片

项目结构和配置

在这里插入图片描述

项目功能拆解

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第5张图片

1.用户相关操作

(1)用户注册

输入下面信息进行注册

  • 判断用户名是否存在等
  • 注册成功跳转到登陆页面
    JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第6张图片
    JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第7张图片

(2)用户登陆

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

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第8张图片

(3)用户信息修改

修改昵称:

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第9张图片
密码修改:

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第10张图片

(4)退出登陆

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

session.invalidate(); // 清理session

在这里插入图片描述
退出后回到登陆页面

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第11张图片

2.图书管理–类型管理

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

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第12张图片

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

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

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

解决方案:分页显示

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第13张图片

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

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

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第14张图片

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;
  • 添加成功再回到图书列表页面;

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第15张图片

(2)修改图书信息

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

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第16张图片

(3)删除一本书

在列表页面点击删除按钮

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第17张图片

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

JavaWeb项目【源码】——图书项目1.0:Tomcat版本 + Servlet + Filter + Jsp + bootstrap & JavaScript初步 + Ajax初步_第18张图片

思考 & 改进

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只能处理一个请求

在这里插入图片描述

你可能感兴趣的:(Java,java,tomcat,bootstrap,sql,servlet)