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

  • Post author:
  • Post category:其他




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

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)创建数据库环境

在这里插入图片描述

(2)创建项目,导入需要的jar包

①打开IDEA,新建项目,命名为njtech。并且配置服务器环境,具体过程如下图:

在这里插入图片描述

②在项目的web文件夹下面新建WEB-INF文件夹,在WEB-INF下面新建lib文件夹,lib用来存放项目的依赖包,把我提供的jar导入lib文件夹中,并且add library(选择模块依赖)

在这里插入图片描述
在这里插入图片描述

③把提供的前端页面以及相应的文件放在web文件夹的根目录

在这里插入图片描述

在这里插入图片描述

④先把项目运行,提前看一下前端页面的效果,如下图:

在这里插入图片描述

点击进去!

在这里插入图片描述

基本的效果是这样,但是看起来很丑。后面再完善!

在这里插入图片描述

⑤正式编码

在这里插入图片描述

基本流程阐述:将项目运行以后,在浏览器上首先是展现了“查询所有列表”这个选项,这个选项是一个超链接。当用户去点击这个超链接的话,系统就会把所有的用户信息给展现出来。其实,每一条用户信息都是一个已经封装好信息的用户对象,所有的用户信息本质上就是用户的一个集合展示,所以调用了findAll()方法以后系统就会直接返回List。其次,将list集合存入request域后,就可以通过request对象获取相应的值,并且可以实现转发的功能。

(2)而findAll()方法是在UserService中,而UserService接口的具体实现是UserServiceImpl,也就是说findAll()功能的具体实现是在UserServiceImpl中。

(3)dao层直接和数据库打交道,用来从数据库中获取数据。UserDaoImpl中有具体的获取数据的方法(jdbc操作数据库),业务逻辑层为了能够获取到数据,那么业务逻辑层必须是要调用UserDaoImpl中具体获取数据的方法,项目中比如findAll()方法。而表现层为了能够知道业务逻辑层是否已经拿到数据,那么在表现层那里肯定有业务逻辑层的一个对象,要不然表现层就无法跨越障碍获取从数据库中传过来的数据。

(4)因为用户信息被封装在request域,那么我们可以通过JSTL+EL表达式获取用户信息的集合,最后request把结果返回给客户端(浏览器)

⑥新建对应的文件夹,并且创建实体类(实体类要与表中的字段一一对应)

在这里插入图片描述

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

所以把:

在这里插入图片描述

改成

在这里插入图片描述

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

⑨编辑list.jsp,并且通过JSTL+EL表达式获取用户数据

<c:forEach items=”



u

s

e

r

s

&quot;

v

a

r

=

&quot;

u

s

e

r

&quot;

v

a

r

S

t

a

t

u

s

=

&quot;

s

&quot;

&gt;

&lt;

t

r

&gt;

&lt;

t

d

&gt;

{users}&quot; var=&quot;user&quot; varStatus=&quot;s&quot;&gt; &lt;tr&gt; &lt;td&gt;







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




>





{s.count}




u

s

e

r

.

n

a

m

e

&lt;

/

t

d

&gt;

&lt;

t

d

&gt;

{user.name}&lt;/td&gt; &lt;td&gt;







u


s


e


r


.


n


a


m


e





<








/


t


d




>






<








t


d




>





{user.gender}




u

s

e

r

.

a

g

e

&lt;

/

t

d

&gt;

&lt;

t

d

&gt;

{user.age}&lt;/td&gt; &lt;td&gt;







u


s


e


r


.


a


g


e





<








/


t


d




>






<








t


d




>





{user.address}




u

s

e

r

.

q

q

&lt;

/

t

d

&gt;

&lt;

t

d

&gt;

{user.qq}&lt;/td&gt; &lt;td&gt;







u


s


e


r


.


q


q





<








/


t


d




>






<








t


d




>





{user.email}


修改


删除

</c:forEach>

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

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

即可

4.测试

  1. 项目的部署

结果展示:

在这里插入图片描述


总结

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



版权声明:本文为qq_37606901原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。