新增用户信息页面显示功能:jsp和servlet整合案例

该博客介绍了一个新增用户信息展示功能的案例,通过整合jsp和servlet来实现。详细步骤包括创建用户信息界面(userList.jsp),在DataServlet中获取并传递用户信息到请求作用域,最后在userList.jsp页面上展示用户数据。实现过程中涉及DAO层、service层以及在userList.jsp中遍历并显示User信息的难点。

新增功能:
查询用户信息:我们点击查询用户信息菜单,然后在网站的iframe中显示所有用户信息
功能实现:
1.创建用户信息界面(userList.jsp)
2.查询用户信息请求发送DataServlet
3.在DataServlet中索取所有用户信息
4.将用户信息储存进Request作用域对象中,请求转发给userList.jsp
5.userLIst.jsp获取在userServlet中流转过来的数据,显示给浏览器
具体实现:
1.userList.jsp,设置用户信息页面

<%@ page language="java" import="java.util.*,com.facai.pojo.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> 

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="renderer" content="webkit">
<title></title>
<link rel="stylesheet" href="css/pintuer.css">
<link rel="stylesheet" href="css/admin.css">
<script src="js/jquery.js"></script>
<script src="js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel">
  <div class="panel-head"><strong class="icon-reorder"> 用户信息列表</strong></div>
  <table class="table table-hover text-center">
    <tr>
      <th width="5%">ID</th>
      <th width="15%">用户名</th>
      <th width="10%">密码</th>
      <th width="10%">性别</th>
      <th width="10%">年龄</th>
      <th width="10%">出生日期</th>
    </tr>
    <%
    //获取作用域中的用户数据
    ArrayList<User> lu=(ArrayList<User>)request.getAttribute("lu");
    //遍历数组中的用户数据
    for(int i=0;i<lu.size();i++){
    %>
    <tr>
      <td width="5%"><%=lu.get(i).getUid() %></td>
      <td width="15%"><%=lu.get(i).getUname() %></td>
      <td width="10%"><%=lu.get(i).getPwd() %></td>
      <td width="10%"><%=lu.get(i).getAge() %></td>
      <td width="10%"><%=lu.get(i).getSex() %></td>
      <td width="10%"><%=lu.get(i).getBirthday() %></td>
<td><div class="button-group"> <a class="button border-main" href="cateedit.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,2)"><span class="icon-trash-o"></span> 删除</a> </div></td>  
    </tr>
    <%
    }
    %>
  </table>
</div>
<script type="text/javascript">
function del(id,mid){
	if(confirm("您确定要删除吗?")){			
		
	}
}
</script>
</body>
</html>

2.在DataServlet中创建返回用户信息的方法

	//查询用户信息
	public <user> void selUserInfo(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
		//获取请求信息
		//处理请求信息
			//创建业务层对象
		UserService us=new UserServiceImpl();
			//调用业务层方法处理请求
		List<User> lu=us.selUserInfoService();
		//响应处理结果
			//将结果存储到request作用域中
		req.setAttribute("lu", lu);
			//请求转发
		req.getRequestDispatcher("/user/userList.jsp").forward(req, resp);
		return;
		
	}

3.userServiceImpl

	//获取所有的用户信息
	@Override
	public List<User> selUserInfoService() {
		// 处理用户信息
		return ud.selUserInfoDao();
	}

4.dao层

//查询用户信息
	@Override
	public List<User> selUserInfoDao() {
		// 声明jdbc对象
		Connection conn=null;
		PreparedStatement ps=null;
		ResultSet rs=null;
		//声明变量
		List<User> lu=null;
		try {
			//创建连接
			conn=DBUtil.getConnection();
			//创建SQL语句
			String sql="select * from t_user";
			//创建SQL语句对象
			ps=conn.prepareStatement(sql);
			//执行SQL命令
			rs=ps.executeQuery();
			//给集合赋值
			lu=new ArrayList<>();
			//遍历
			while(rs.next()){
				User u=new User();
				u.setUid(rs.getInt("uid"));
				u.setUname(rs.getString("uname"));
				u.setPwd(rs.getString("pwd"));
				u.setSex(rs.getString("sex"));
				u.setAge(rs.getInt("age"));
				u.setBirthday(rs.getString("birthday"));
				lu.add(u);
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		}finally{
			//关闭资源
			DBUtil.closeAll(rs,ps, conn);
		}
		//返回结果
		return lu;
	}

5.难点:如何在UserList中遍历出User信息

<div class="panel admin-panel">
  <div class="panel-head"><strong class="icon-reorder"> 用户信息列表</strong></div>
  <table class="table table-hover text-center">
    <tr>
      <th width="5%">ID</th>
      <th width="15%">用户名</th>
      <th width="10%">密码</th>
      <th width="10%">性别</th>
      <th width="10%">年龄</th>
      <th width="10%">出生日期</th>
    </tr>
    <%
    //获取作用域中的用户数据
    ArrayList<User> lu=(ArrayList<User>)request.getAttribute("lu");
    //遍历数组中的用户数据
    for(int i=0;i<lu.size();i++){
    %>
    <tr>
      <td width="5%"><%=lu.get(i).getUid() %></td>
      <td width="15%"><%=lu.get(i).getUname() %></td>
      <td width="10%"><%=lu.get(i).getPwd() %></td>
      <td width="10%"><%=lu.get(i).getAge() %></td>
      <td width="10%"><%=lu.get(i).getSex() %></td>
      <td width="10%"><%=lu.get(i).getBirthday() %></td>
<td><div class="button-group"> <a class="button border-main" href="cateedit.html"><span class="icon-edit"></span> 修改</a> <a class="button border-red" href="javascript:void(0)" onclick="return del(1,2)"><span class="icon-trash-o"></span> 删除</a> </div></td>  
    </tr>
    <%
    }
    %>
  </table>
</div>

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值