javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

2022-09-15 19:23:33

0 概述

	做一个jiavaweb 的练手项目，做完可以把javaweb的知识点在项目中应用，还能锻炼功能实现的逻辑思路，下面看一下效果图

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

	项目分上下两集，上集主要是完成学生管理这边的功能，后面的下集主要完成定义权限的功能

1 准备工作

材料准备

链接：https://pan.baidu.com/s/1il4X8OlVtkB1mzaAH4Fz_Q
提取码：kpt7

 这边呢，我把完成项目所有需要(前端)+(后端)代码以及数据库都放在网盘里面，放在github里面可能网络不好什么的比较麻烦
 下图 前端里面有 html 和 jsp ,我们javaweb里面用jsp
 	 lib是一些要用到的依赖包，mysql依赖要根据自己的版本来，
 	 连接池用德鲁伊，数据库的SQL文件都备好了

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

技能栈和工具栈

1.数据库
2.JDBC
3.html
4.servlet
5.JSP+EL+JSTL
6.AJAX
7.多表操作

需要的工具
1.idea
2.Navicat
3.Tomcat
4.mysql

数据库数据准备

你可以直接运行我给的SQL文件在Navicat里面运行，然后添加自己额外想添加的数据
这边分析一下，登录身份一张表，学生两张表

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

idea创建项目后类准备

src 建立5个包
web 把上面材料准备里面的jsp 文件夹里面的东西放在web里面
	把lib里面的放在WEB_INF 里面比较好

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

这边得根据数据流来编写类，一层一层下去

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

类里面的内容具体看源代码备份hjg01,注意里面 int --> Ingiter 会比较好

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

lib 包依赖导入

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

Tomcat 设置

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

2 登录退出功能（代码hjg01）

【登录】

先修改login.jsp

添加 <form>和“/login”

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

修改里面的两个input 用于接收前端页面输入的 用户名和密码

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

接着添加 两个web层类 LoginSerlet 登入Logout退出

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

LoginSerlet 通过@WebServlet(urlPatterns = "/login")链接 login.jsp

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

LoginSerlet 重写 service ，承接3个任务

@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    //1.  接收参数
    //2.  调取servlet 业务层
    //3.  跳转页面
}

接收前端两个参数

//1.     接收参数
String username = req.getParameter("username");
String password = req.getParameter("password");

业务层中转

//2.  调取servlet 业务层
UsersService usersService = new UsersServiceImpl();
Users users = usersService.login(username, password);

这边就需要 一层一层下去编写 web service dao

先是抽象类 添加 login 方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

实现类实现方法-- 尴尬的是service业务层要从dao 层拿数据，

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

所以还得添加dao 抽象类，dao 实现类实现方法，从而编写德鲁伊链接数据库

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

这边注意DBUtils 的resultSet 用protected修饰

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

回来web层编写跳转页面

数据库查无此人则以弹窗提醒

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

用户验证成功的话，设置一个u1进行全局访问

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

结果给前端

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

启动Tomcat运行项目

输入数据库没有用户测试，弹窗提醒
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

登录成功进入下一次页面，保存数据并前端展示
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

在这里如果我们点击退出按钮是没有反应会报错的，下来我们做退出功能

【退出】

和登录类似，我们先修改前端

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

编写 web层的logout类

这里我们采用的前端是有框架的，箭头所指的top直接退出到最外层

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

3 学员列表展示(代码hjg02)

<1> 修改 list.jsp

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<2> 添加web类 GetStudentServlet

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<3> service层 和 dao层 添加对应的提取学生信息的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<4> 编写servlet层代码

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<5>修改前端展示代码用于展示

注意：：性别 男女得从 0 1 转化为 字符

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<6> 运行查看结果

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

4 模糊查询实现(代码hjg03)

<1>修改list.jsp 页面，接收数据，展示已经保存的数据

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<2>方法添加参数

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<3>对应的修改 service层 和 dao层 添加对应的提取学生信息的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<4>运行出结果（都是女）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

思考

模糊查除了上面的模糊还可以设置成 3个条件，2 个条件，1 个条件，主要也是调整SQL语句，这边可以自己扩展

5 设置分页功能(代码hjg04)

<1>显示最后编写好的的list.jsp，里面添加的东西后面会一个一个用到

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<2> 添加参数

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<3>对应的修改 service层 和 dao层 添加对应的提取学生信息的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<4> 存储分页数据，添加上一页下一页

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

这边注意解决页数越界的限定条件方法，下一步需要用到总页数，所以我们还得编写取出总页数的代码

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<5> 获得总页数

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<6> 对应的修改 service层 和 dao层 添加对应的提取学生信息的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

不要忘记存储值给前端

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

也不要忘记在分页按钮里面添加模糊查参数

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<7>运行结果

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

6 新增学生(代码hjg05)

<1>修改 list 添加类和方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<2>对应的修改 service层 和 dao层 添加对应的查询年级列表的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<3>修改add.jsp 展示数据

这时候如果在数据库里面更改年级数据，浏览器里面刷新后可以马上看到结果

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<4>修改add.jsp

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

一个个修改对应的属性命，这里只是一部分

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<5>添加对应 add 的 servlet 类

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<6>对应的 service层 和 dao层 添加对应的insertStu调取的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<7>运行结果

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

7 主键查询(代码hjg06)

在要进行修改更新和删除数据之前我们的先完成从数据库那特定某个人的数据的主键查询功能

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<1> 修改 list

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<2>添加 FindByIdServlet 类

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<3> 对应的 service层 和 dao层 添加对应的《主键查询》的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<4> 编写 servlet 协调 edit.jsp

edit.jsp 里面先调节每个属性的储存值，接收来自后端的数据并展示，这边只是部分

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

下来的注意班级的获取

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<5>效果展示

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

8 修改更新数据代码（hjg07）

<1>修改前端edit

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<2> 创建类 编写代码

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<3> 对应的 service层 和 dao层 添加对应的《修改学生》的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<4>运行看结果（点击修改）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

9 删除学生数据（假删除）（hjg08）

<1>枚举值保存学生状态（在读，休学。。。）

前面在添加操作这边不知道你有没有发现这个枚举操作，这个在删除中也要用到

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

删除

<2>修改list

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<3> 对应的 service层 和 dao层 添加对应的《删除学生》的方法

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<4>查询的时候转态state进行限定

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

<5> 运行查看

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

10 使用filter处理乱码 （hjg09）

在新增 和 修改 里面 容易出现乱码，我们每次都得添加         req.setCharacterEncoding("utf-8");  

有点儿麻烦，我们可以使用过滤器，新建包 新建类 修改配置文件

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

11 多请求走同一个servlet

后端

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

前端

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

记得运行看看

12 分页工具类

javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）
javaWeb项目＞__＜《和我一起做项目》（超级详细——上集）

13 还可以完善的地方

<1>新增-学号不能重复（用AJAX 解决）

<2>学生管理在没有登录的时候也可以进入（得加一下限制）前面没加是为了快速跑功能

<3>出bug 要有耐心

上一篇：简述 SSH 的概念以及中主要的设计思想？


下一篇：MyBatis基础