用户信息列表展示项目详细开发过程

我就是我 2022-01-21 05:23 246阅读 0赞

# 用户信息列表展示项目详细开发过程 #

1.需求：可以在界面上对用户信息进行增删改查等操作  
2.设计  
1.技术选型：  
Servlet+JSP+MySQL+JDBCTempleat+Duird+BeanUtilS+tomcat  
2.数据库的设计  
create database njtech; --这个语句是用来创建数据库的sql语句  
use njtech; --使用njtech这个数据库  
create table user( – 创建表  
id int primary key auto\_increment,  
name varchar(20) not null,  
gender varchar(5),  
age int,  
address varchar(32),  
qq varchar(20),  
email varchar(50)  
);  
3. 开发：  
1. 环境搭建  
（1）创建数据库环境  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70]

（2）创建项目，导入需要的jar包  
①打开IDEA,新建项目，命名为njtech。并且配置服务器环境，具体过程如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 1]

②在项目的web文件夹下面新建WEB-INF文件夹，在WEB-INF下面新建lib文件夹，lib用来存放项目的依赖包，把我提供的jar导入lib文件夹中，并且add library(选择模块依赖)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 3]

③把提供的前端页面以及相应的文件放在web文件夹的根目录  
![在这里插入图片描述][20190608121734472.png]

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

④先把项目运行，提前看一下前端页面的效果，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 4]

点击进去！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 5]

基本的效果是这样，但是看起来很丑。后面再完善！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 6]

⑤正式编码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 7]

基本流程阐述：将项目运行以后，在浏览器上首先是展现了“查询所有列表”这个选项，这个选项是一个超链接。当用户去点击这个超链接的话，系统就会把所有的用户信息给展现出来。其实，每一条用户信息都是一个已经封装好信息的用户对象，所有的用户信息本质上就是用户的一个集合展示，所以调用了findAll()方法以后系统就会直接返回List。其次，将list集合存入request域后，就可以通过request对象获取相应的值，并且可以实现转发的功能。  
（2）而findAll()方法是在UserService中，而UserService接口的具体实现是UserServiceImpl,也就是说findAll()功能的具体实现是在UserServiceImpl中。  
（3）dao层直接和数据库打交道，用来从数据库中获取数据。UserDaoImpl中有具体的获取数据的方法（jdbc操作数据库），业务逻辑层为了能够获取到数据，那么业务逻辑层必须是要调用UserDaoImpl中具体获取数据的方法，项目中比如findAll()方法。而表现层为了能够知道业务逻辑层是否已经拿到数据，那么在表现层那里肯定有业务逻辑层的一个对象，要不然表现层就无法跨越障碍获取从数据库中传过来的数据。  
（4）因为用户信息被封装在request域，那么我们可以通过JSTL+EL表达式获取用户信息的集合，最后request把结果返回给客户端（浏览器）

⑥新建对应的文件夹，并且创建实体类（实体类要与表中的字段一一对应）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 8]

⑦改造index.jsp，因为当用户点击“查询所有用户信息”这个超链接以后，跳转到了是servlet页面。并且创建userlistServlet、UserService接口

所以把：  
![在这里插入图片描述][20190608121951206.png]

改成

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

⑧添加druid.properties(位于src目录下)、并且导入JDBCUtlis。

⑨编辑list.jsp，并且通过JSTL+EL表达式获取用户数据  
<c:forEach items=" u s e r s " v a r = " u s e r " v a r S t a t u s = " s " > < t r > < t d > \{users\}" var="user" varStatus="s"> <tr> <td> users"var="user"varStatus="s"><tr><td>\{s.count\}  
 u s e r . n a m e < / t d > < t d > \{user.name\}</td> <td> user.name</td><td>\{user.gender\}  
 u s e r . a g e < / t d > < t d > \{user.age\}</td> <td> user.age</td><td>\{user.address\}  
 u s e r . q q < / t d > < t d > \{user.qq\}</td> <td> user.qq</td><td>\{user.email\}  
修改 删除

</c:forEach>

⑩注意：如果页面上采用的是jsp技术的话，那么项目中的html页面就是前端开发工程师编写的静态化页面数据，其实把html页面变成jsp页面是非常简单的，只需要把HTML页面上的代码复制到对应的jsp页面，并且在第一行上添加：

<%@ page contentType=“text/html;charset=UTF-8” language=“java” %>

即可

4.测试

1.  项目的部署

结果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 9]

**总结**：这个项目比较简单，也比较丑，合适刚入门的开发者学习。后面我会把源码更新在博客中。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70]: /images/20220121/ee38583e7fd347dc8544ea72d2b92630.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 1]: /images/20220121/884f4121f0ca441a8cd5f06bc07ccb0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190608121708383.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 3]: /images/20220121/729b612650f04034b80b8915d0c8c668.png
[20190608121734472.png]: /images/20220121/8eabddf3d4ec4657a4ffccaf91e81e07.png
[20190608121742745.png]: /images/20220121/b159c1f49315461c9726e79191c79c62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 4]: /images/20220121/c6f24260ab6043eabeb33c9d6ec9c7ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 5]: /images/20220121/4c113d5d947a4db2b12bd1f16e122d56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 6]: /images/20220121/dcc1a289e8214f749af236c6df108a1b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 7]: /images/20220121/95058bc4f8774711ac260dd4733cabec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 8]: /images/20220121/68c4a3e4a10f4a0f9ba1e4f52c61ca06.png
[20190608121951206.png]: /images/20220121/9798b9026d3641d6921fb97b667f80a2.png
[20190608121957755.png]: /images/20220121/ecc95fba4d984e3db2ea905f5d856220.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NjA2OTAx_size_16_color_FFFFFF_t_70 9]: /images/20220121/7be863d6f60846b88c03cbb197608865.png