前言

一、用户信息列表综合案列

二、项目结构

三、功能实现

1.简单功能

1.列表查询

2.登录

3. 添加

4. 删除

5. 修改

2.复杂功能

1. 删除选中

2. 分页查询与复杂条件查询

总结

list.jsp:

优化

前言

通过学习JavaWeb阶段的静态网页、JavaScript、servlet等后端相关知识以及cookie和EL&JSTL的相关知识点，进行了案例综合的相关操作和知识点的运用，采用MVC开发模式与三层架构让我们充分的掌握相关的知识！

一、用户信息列表综合案列

用户信息综合列表是我们对前面所学的知识的一种体现，案例要求我们完成相关的功能！

二、项目结构

1.后端项目结构

2.前端项目结构

3.数据库；

表user

CREATE DATABASE day17; -- 创建数据库
USE day17;             -- 使用数据库
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)
);

同理创建表loginuser

三、功能实现

1.简单功能

1.列表查询

逻辑结构

实现：index.jsp网页点击进入虚拟路径http://localhost:8080/userListServlet即可查看所有用户信息的列表。

如上图所示：可以看到所有用户的相关信息。

代码实现：

前端代码：index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>首页</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><script type="text/javascript"></script>
</head>
<body><div align="center"><%--点击按钮就调转到userListServlet处理--%><ahref="${pageContext.request.contextPath }/userListServlet" style="text-decoration:none;font-size:33px">查询所有用户信息</a>
</div></body>
</html>

后端代码：UserListServlet

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;@WebServlet("/userListServlet")
public class UserListServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.调用UserService完成查询UserService service = new UserServiceImpl();List<User> users = service.findAll();//2.将list存入request域中request.setAttribute("users",users);//3.转发到list.jsprequest.getRequestDispatcher("/list.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

service层：

  /*** 查询所有用户* @return*/public List<User> findAll();

   //查询所有用户@Overridepublic List<User> findAll() {//调用Daoreturn dao.findAll();}

dao层：

    /*** 查询所有用户信息* @return*/public List<User> findAll();

   //查询所有用户信息@Overridepublic List<User> findAll() {//使用JDBC操作数据库、//1、定义sqlString sql = "select * from user";List<User> users = template.query(sql, new BeanPropertyRowMapper<User>(User.class));return users;}

2.登录

实现界面：

代码实现：

前端代码：login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>管理员登录</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><script type="text/javascript">//切换验证码function refreshCode(){img=document.getElementById("vcode"); //获取验证码图片对象var time=new Date().getTime();  //时间戳img.src="${pageContext.request.contextPath }/checkcode?"+time;}</script>
</head>
<body>
<div class="container" style="width: 400px;"><h3 style="text-align: center;">管理员登录</h3><form action="${pageContext.request.contextPath}/checklogin" method="post"><div class="form-group"><label for="user">用户名：</label><input type="text" name="userName" class="form-control" id="user" placeholder="请输入用户名"/></div><div class="form-group"><label for="password">密码：</label><input type="password" name="password" class="form-control" id="password" placeholder="请输入密码"/></div><div class="form-inline"><label for="vcode">验证码：</label><input type="text" name="verifycode" class="form-control" id="verifycode" placeholder="请输入验证码" style="width: 120px;"/><a href="javascript:refreshCode()"><img src="${pageContext.request.contextPath }/checkcode" title="看不清点击刷新" id="vcode"/></a></div><div style="color: red;">${log_msg}</div><hr/><div class="form-group" style="text-align: center;"><input class="btn btn btn-primary" type="submit" value="登录"></div></form><!-- 出错显示的信息框 --><div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" ><span>&times;</span></button><strong>${log_msg}</strong></div>
</div>
</body>
</html>

后端代码：

验证码:

import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;@WebServlet("/checkcode")
public class Checkcode extends HttpServlet {private static final long serialVersionUID = 1L;protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {int imgwidth=100;int imgheight=40;//1.创建图片对象，在内存中图片（验证码图片对象）BufferedImage image=new BufferedImage(imgwidth,imgheight,BufferedImage.TYPE_INT_RGB);  //也可以指定读取image=imageIO.read(new file())//2.美化图片Graphics g=image.getGraphics(); //获得画笔对象//设置画笔颜色g.setColor(Color.pink);//在创建的图片对象大小中填充矩形，颜色为上面设置的颜色，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高g.fillRect(0, 0, imgwidth, imgheight);//重新设置画笔颜色g.setColor(Color.yellow);//画框边缘颜色//在image上画边框，第一,二个参数是起始点的x,y,第三，四个参数是有多宽，有多高，注意：边框占一个像素，所以需要宽和高-1才能覆盖全部g.drawRect(0, 0, imgwidth-1, imgheight-1);//随机设置验证码的值String str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890";Random random=new Random();StringBuilder sb=new StringBuilder();//随机在image中写字符串，第三，四个参数是画的位置for(int i=1;i<5;i++) {int index=random.nextInt(str.length());  //随机选取字母字符g.setFont(new Font("宋体", Font.PLAIN, 20));  //设置画笔大小sb.append(str.charAt(index));//将随机验证码置于stringbuilder中g.setColor(Color.blue);  //画笔颜色g.drawString(str.charAt(index)+"",imgwidth/5*i ,25);}//将验证码存储与session对象中,用于loginservlet中的验证码验证String session_code=sb.toString();request.getSession().setAttribute("session_code", session_code);//随机画干扰线,第一,二个参数是起始点的x,y,第三，四个参数是最后一个点的x,yint x1=0,y1=0,x2=0,y2=0;for(int i=0;i<=8;i++) {  //画8次线条x1=random.nextInt(imgwidth);y1=random.nextInt(imgheight);x2=random.nextInt(imgwidth);y2=random.nextInt(imgheight);g.setColor(Color.gray);g.drawLine(x1, y1, x2, y2);}//3.图片显示在页面上ImageIO.write(image, "jpg", response.getOutputStream());  //将图片写入指定文件(第三个参数是指定的位置Fileoutpotstream(new File(""))}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

登陆：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/checklogin")
public class Checklogin extends HttpServlet {private static final long serialVersionUID = 1L;protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.设置编码request.setCharacterEncoding("utf-8");//2.获取用户的请求LoginUser loginUser=new LoginUser();Map<String, String[]> pMap=request.getParameterMap();//3.使用BeanUtil封装对象try {try {BeanUtils.populate(loginUser, pMap);} catch (InvocationTargetException e) {e.printStackTrace();}} catch (IllegalAccessException e) {e.printStackTrace();}//4.现获取前端填写的验证码,比较验证码System.out.println(loginUser);String exc=request.getParameter("verifycode");//获取前端用户填写的验证码HttpSession htp=request.getSession();  //获取sessionString excode=(String) htp.getAttribute("session_code");  //获取后端checkcode随机验证码//为防止验证码重复使用，session中的session_code一旦获得，就必须删除htp.removeAttribute("session_code");if(excode!=null && excode.equalsIgnoreCase(exc)) {//忽略字母大小写，比较验证码//如果验证码正确，再比较用户的用户名和密码//验证码正确//5.创建userDao对象UserDaoImpl userDaoImpl=new UserDaoImpl();  //调用与数据库的函数LoginUser lu=userDaoImpl.checkLoginUser(loginUser);if(lu!=null) {//如果登录成功//保存数据，用户信息htp.setAttribute("user", lu);  //在session中保存用户的信息htp.setAttribute("username", lu.getUserName());//在session中存储用户名//重定向到success.jsp页面response.sendRedirect(request.getContextPath()+"/index.jsp");}else {//用户名或密码不正确request.setAttribute("log_msg", "用户名或密码错误");  //存储错误信息，用request域存储//请求转发，重新回到登录页面request.getRequestDispatcher("/login.jsp").forward(request,  response);}}else {//验证码不正确request.setAttribute("log_msg", "验证码错误");  //存储错误信息，用requestuest域存储request.getRequestDispatcher("/login.jsp").forward(request,  response);  //请求转发，重新回到登录页面}}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

dao层;

    /*** 管理员登录验证* @param loginUser* @return*/LoginUser checkLoginUser(LoginUser loginUser);

//管理员登录验证@Overridepublic LoginUser checkLoginUser(LoginUser loginUser) {//查询登录用户信息String sql = "select * from loginuser where username=? and password=?";//System.out.println("111"+loginUser);try {LoginUser lu = (LoginUser) template.queryForObject(sql, new BeanPropertyRowMapper<LoginUser>(LoginUser.class), loginUser.getUserName(), loginUser.getPassword());return lu;} catch (Exception e) {e.printStackTrace();return null;}}

3. 添加

逻辑结构

实现

提交后跳转回用户信息列表界面

代码实现；

前端代码；add.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!-- HTML5文档-->
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>添加用户</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><center><h3>添加联系人页面</h3></center><form action="${pageContext.request.contextPath}/addServlet" method="post"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名"></div><div class="form-group"><label>性别：</label><input type="radio" name="gender" value="男" checked="checked"/>男<input type="radio" name="gender" value="女"/>女</div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄"></div><div class="form-group"><label for="address">籍贯：</label><select name="address" class="form-control" id="address"><option value="武汉">武汉</option><option value="南京">南京</option><option value="上海">上海</option><option value="广州">广州</option><option value="青海">青海</option><option value="天津">天津</option></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" class="form-control" id="email" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button"  value="返回"  ></div></form>
</div>
</body>
</html>

后端代码;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/addServlet")
public class AddServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.设置编码request.setCharacterEncoding("utf-8");User user=new User();//2.使用beanutils封装用户传来的信息Map<String ,String[]> pMap=request.getParameterMap();try {BeanUtils.populate(user, pMap);} catch (IllegalAccessException | InvocationTargetException e) {e.printStackTrace();}//3.调用sercice层的方法UserService userservice=new UserServiceImpl();userservice.addUser(user);//4.跳转jsp页面response.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

server层

    /*** 添加用户* @param user*/void addUser(User user);

    //添加用户@Overridepublic void addUser(User user) {dao.adduser(user);}

dao层

    /*** 添加用户* @param user*/void adduser(User user);

    //添加用户@Overridepublic void adduser(User user) {String sql = "insert into user values(null,?,?,?,?,?,?)";template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail());}

4. 删除

逻辑结构;

实现：

代码实现；

后端代码：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/delUserServlet")
public class DelUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取idString id = request.getParameter("id");//2.调用service删除UserService service = new UserServiceImpl();service.deleteUser(id);//3.跳转到查询所有Servletresponse.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

service层

    /*** 删除单个用户* @param id*/void deleteUser(String id);

//删除单个用户
@Override
public void deleteUser(String id) {dao.delete(Integer.parseInt(id));
}

dao层

    /*** 删除用户* @param id*/void delete(int id);

    //删除用户@Overridepublic void delete(int id) {//1.定义sqlString sql = "delete from user where id = ?";//2.执行sqltemplate.update(sql, id);}

5. 修改

逻辑结构；

实现;

代码实现;

前端代码：update,jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>修改用户</title><link href="css/bootstrap.min.css" rel="stylesheet"><script src="js/jquery-2.1.0.min.js"></script><script src="js/bootstrap.min.js"></script></head>
<body>
<div class="container" style="width: 400px;"><h3 style="text-align: center;">修改联系人</h3><form action="${pageContext.request.contextPath}/updateUserServlet" method="post"><!--  隐藏域 提交id--><input type="hidden" name="id" value="${user.id}"><div class="form-group"><label for="name">姓名：</label><input type="text" class="form-control" id="name" name="name"  value="${user.name}" readonly="readonly" placeholder="请输入姓名" /></div><div class="form-group"><label>性别：</label><c:if test="${user.gender == '男'}"><input type="radio" name="gender" value="男" checked />男<input type="radio" name="gender" value="女"  />女</c:if><c:if test="${user.gender == '女'}"><input type="radio" name="gender" value="男"  />男<input type="radio" name="gender" value="女" checked  />女</c:if></div><div class="form-group"><label for="age">年龄：</label><input type="text" class="form-control" value="${user.age}" id="age"  name="age" placeholder="请输入年龄" /></div><div class="form-group"><label for="address">籍贯：</label><select name="address" id="address" class="form-control" ><c:if test="${user.address == '武汉'}"><option value="武汉" selected>武汉</option><option value="南京">南京</option><option value="上海">上海</option><option value="广州">广州</option><option value="青海">青海</option><option value="天津">天津</option></c:if><c:if test="${user.address == '南京'}"><option value="武汉">武汉</option><option value="南京" selected>南京</option><option value="上海">上海</option><option value="广州">广州</option><option value="青海">青海</option><option value="天津">天津</option></c:if><c:if test="${user.address == '上海'}"><option value="武汉">武汉</option><option value="南京">南京</option><option value="上海"selected>上海</option><option value="广州">广州</option><option value="青海">青海</option><option value="天津">天津</option></c:if><c:if test="${user.address == '广州'}"><option value="武汉">武汉</option><option value="南京">南京</option><option value="上海">上海</option><option value="广州" selected>广州</option><option value="青海">青海</option><option value="天津">天津</option></c:if><c:if test="${user.address == '青海'}"><option value="武汉">武汉</option><option value="南京">南京</option><option value="上海">上海</option><option value="广州">广州</option><option value="青海" selected>青海</option><option value="天津">天津</option></c:if><c:if test="${user.address == '天津'}"><option value="武汉">武汉</option><option value="南京">南京</option><option value="上海">上海</option><option value="广州">广州</option><option value="青海">青海</option><option value="天津" selected>天津</option></c:if></select></div><div class="form-group"><label for="qq">QQ：</label><input type="text" id="qq" class="form-control" value="${user.qq}" name="qq" placeholder="请输入QQ号码"/></div><div class="form-group"><label for="email">Email：</label><input type="text" id="email" class="form-control" value="${user.email}" name="email" placeholder="请输入邮箱地址"/></div><div class="form-group" style="text-align: center"><input class="btn btn-primary" type="submit" value="提交" /><input class="btn btn-default" type="reset" value="重置" /><input class="btn btn-default" type="button"  value="返回"   ></div></form>
</div>
</body>
</html>

后端代码：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取idString id = request.getParameter("id");//2.调用Service查询UserService service = new UserServiceImpl();User user = service.findUserById(id);//3.将user存入requestrequest.setAttribute("user",user);//4.转发到update.jsprequest.getRequestDispatcher("/update.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;@WebServlet("/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.设置编码request.setCharacterEncoding("utf-8");//2.获取mapMap<String, String[]> map = request.getParameterMap();//3.封装对象User user = new User();try {BeanUtils.populate(user,map);} catch (IllegalAccessException e) {e.printStackTrace();} catch (InvocationTargetException e) {e.printStackTrace();}//4.调用Service修改UserService service = new UserServiceImpl();service.updateUser(user);//5.跳转到查询所有Servletresponse.sendRedirect(request.getContextPath()+"/userListServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

service层

  /*** 根据id查询* @param id* @return*/User findUserById(String id);/*** 修改用户信息* @param user*/void updateUser(User user);

   //根据id查询@Overridepublic User findUserById(String id) {return dao.findById(Integer.parseInt(id));}//修改用户信息@Overridepublic void updateUser(User user) {dao.update(user);}

dao层

/*** 根据id查询* @param id* @return*/User findUserById(String id);/*** 修改用户信息* @param user*/void updateUser(User user);

   //根据id查询@Overridepublic User findById(int id) {String sql = "select * from user where id = ?";return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);}//修改用户信息@Overridepublic void update(User user) {String sql = "update user set name = ?,gender = ? ,age = ? , address = ? , qq = ?, email = ? where id = ?";template.update(sql, user.getName(), user.getGender(), user.getAge(), user.getAddress(), user.getQq(), user.getEmail(), user.getId());}

2.复杂功能

1. 删除选中

逻辑结构：

实现：

代码实现：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/delSelectedServlet")
public class DelSelectedServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1.获取所有idString[] ids = request.getParameterValues("uid");//2.调用service删除UserService service = new UserServiceImpl();service.delSelectedUser(ids);//3.跳转查询所有Servletresponse.sendRedirect(request.getContextPath()+"/findUserByPageServlet");}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

service层

    /*** 批量删除用户* @param ids*/void delSelectedUser(String[] ids);

   //批量删除用户@Overridepublic void delSelectedUser(String[] ids) {if (ids != null && ids.length > 0) {//1.遍历数组for (String id : ids) {//2.调用dao删除dao.delete(Integer.parseInt(id));}}}

dao层同用简单功能的删除的dao层

2. 分页查询与复杂条件查询

逻辑结构：

实现：

代码实现：

前端代码：部分list.jsp

 <div><nav aria-label="Page navigation"><ul class="pagination"><c:if test="${pb.currentPage == 1}"><li class="disabled"></c:if><c:if test="${pb.currentPage != 1}"><li></c:if><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><c:forEach begin="1" end="${pb.totalPage}" var="i"><c:if test="${pb.currentPage ==i}"><li class="active"><ahref="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if><c:if test="${pb.currentPage !=i}"><li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if></c:forEach><c:if test="${pb.currentPage >= pb.totalPage}"><%--为了逻辑更严谨，当页码为最后一页时无法进入下一页--%><li class="disabled">  <%--禁用--%><%--当前页面不+1--%><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></c:if><c:if test="${pb.currentPage < pb.totalPage}"><%--当页码不为为最后一页时可以进入一页--%><li><%--当前页码+1--%><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></c:if></li><span style="font-size: 25px;margin-left: 5px;">共${pb.totalCount}条记录，共${pb.totalPage}页</span></ul></nav></div>

<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2"></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3"></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2"></div><button type="submit" class="btn btn-default">查询</button></form></div>

后端代码：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");//1.获取参数String currentPage = request.getParameter("currentPage");//当前页码String rows = request.getParameter("rows");//每页显示条数if(currentPage == null || "".equals(currentPage)){currentPage = "1";}if(rows == null || "".equals(rows)){rows = "5";}//获取条件查询参数Map<String, String[]> condition = request.getParameterMap();//2.调用service查询UserService service = new UserServiceImpl();PageBean<User> pb = service.findUserByPage(currentPage,rows,condition);System.out.println(pb);//3.将PageBean存入requestrequest.setAttribute("pb",pb);request.setAttribute("condition",condition);//将查询条件存入request//4.转发到list.jsprequest.getRequestDispatcher("/list.jsp").forward(request,response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}
}

service层

   /*** 分页条件查询* @param currentPage* @param rows* @param condition* @return*/PageBean<User> findUserByPage(String currentPage, String rows,Map<String, String[]> condition);

//分页条件查询@Overridepublic PageBean<User> findUserByPage(String _currentPage, String _rows, Map<String, String[]> condition) {int currentPage = Integer.parseInt(_currentPage);int rows = Integer.parseInt(_rows);//当页面为1时禁用上一页；if (currentPage <= 0) {currentPage = 1;}//1.创建空的PageBean对象PageBean<User> pb = new PageBean<User>();//3.调用dao查询总记录数int totalCount = dao.findTotalCount(condition);pb.setTotalCount(totalCount);//4.调用dao查询List集合//计算开始的记录索引int start = (currentPage - 1) * rows;List<User> list = dao.findByPage(start, rows,condition);pb.setList(list);//5.计算总页码int totalPage = (totalCount % rows) == 0 ? totalCount / rows : (totalCount / rows) + 1;pb.setTotalPage(totalPage);//当页面为最后一页时禁用下一页；if (currentPage>=pb.getTotalPage()){currentPage=pb.getTotalPage();}//2.设置参数pb.setCurrentPage(currentPage);pb.setRows(rows);return pb;}

dao层：

  /*** 查询总记录数* @return* @param condition*/int findTotalCount(Map<String, String[]> condition);/*** 查询查询每页记录* @param start* @param rows* @param condition* @return*/List<User> findByPage(int start, int rows, Map<String, String[]> condition);

  //查询总记录数@Overridepublic int findTotalCount(Map<String, String[]> condition) {//1.定义模板初始化sqlString sql = "select count(*) from user where 1 = 1 ";StringBuilder sb = new StringBuilder(sql);//2.遍历mapSet<String> keySet = condition.keySet();//定义参数的集合List<Object> params = new ArrayList<Object>();for (String key : keySet) {//排除分页条件参数if("currentPage".equals(key) || "rows".equals(key)){continue;}//获取valueString value = condition.get(key)[0];//判断value是否有值if(value != null && !"".equals(value)){//有值sb.append(" and "+key+" like ? ");params.add("%"+value+"%");//？条件的值}}System.out.println(sb.toString());System.out.println(params);return template.queryForObject(sb.toString(),Integer.class,params.toArray());}//查询查询每页记录@Overridepublic List<User> findByPage(int start, int rows, Map<String, String[]> condition) {String sql = "select * from user  where 1 = 1 ";StringBuilder sb = new StringBuilder(sql);//2.遍历mapSet<String> keySet = condition.keySet();//定义参数的集合List<Object> params = new ArrayList<Object>();for (String key : keySet) {//排除分页条件参数if("currentPage".equals(key) || "rows".equals(key)){continue;}//获取valueString value = condition.get(key)[0];//判断value是否有值if(value != null && !"".equals(value)){//有值sb.append(" and "+key+" like ? ");params.add("%"+value+"%");//？条件的值}}//添加分页查询sb.append(" limit ?,? ");//添加分页查询参数值params.add(start);params.add(rows);sql = sb.toString();System.out.println(sql);System.out.println(params);return template.query(sql,new BeanPropertyRowMapper<User>(User.class),params.toArray());}

总结

list.jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head><!-- 指定字符集 --><meta charset="utf-8"><!-- 使用Edge最新的浏览器的渲染方式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- viewport视口：网页可以根据设置的宽度自动进行适配，在浏览器的内部虚拟一个容器，容器的宽度与设备的宽度相同。width: 默认宽度与设备的宽度相同initial-scale: 初始的缩放比，为1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><title>用户信息管理系统</title><!-- 1. 导入CSS的全局样式 --><link href="css/bootstrap.min.css" rel="stylesheet"><!-- 2. jQuery导入，建议使用1.9以上的版本 --><script src="js/jquery-2.1.0.min.js"></script><!-- 3. 导入bootstrap的js文件 --><script src="js/bootstrap.min.js"></script><style type="text/css">td, th {text-align: center;}</style><script>function deleteUser(id) {//用户提示安全if (confirm("您确定要删除吗？")) {//访问路径location.href = "${pageContext.request.contextPath}/delUserServlet?id=" + id;}}window.onload = function () {//删除选中明按钮添加单击事件document.getElementById("delSelected").onclick = function () {if (confirm("您确定要删除选定条目吗？")) {var flag = false;//判断是否有条目被选中var cbs = document.getElementsByName("uid");for (var i = 0; i < cbs.length; i++) {if (cbs[i].checked) {//有一个条目被选中flag = true;break;}}//有条目被选中if (flag) {//表单提交document.getElementById("form").submit();}}}//全选和全不选//1.获取第一个cbdocument.getElementById("firstcb").onclick = function () {//2.获取下边列表中所有的cbvar cbs = document.getElementsByName("uid");//3.遍历for (var i = 0; i < cbs.length; i++) {//4.设置这些cbs[i]的checked状态=firstCb.checkedcbs[i].checked = this.checked;}}}</script></head>
<body>
<div class="container"><h3 style="text-align: center">用户信息列表</h3><div style="float: left;"><form class="form-inline" action="${pageContext.request.contextPath}/findUserByPageServlet" method="post"><div class="form-group"><label for="exampleInputName2">姓名</label><input type="text" name="name" value="${condition.name[0]}" class="form-control" id="exampleInputName2"></div><div class="form-group"><label for="exampleInputName3">籍贯</label><input type="text" name="address" value="${condition.address[0]}" class="form-control" id="exampleInputName3"></div><div class="form-group"><label for="exampleInputEmail2">邮箱</label><input type="text" name="email" value="${condition.email[0]}" class="form-control" id="exampleInputEmail2"></div><button type="submit" class="btn btn-default">查询</button></form></div><div style="float: right;margin: 5px;"><a class="btn btn-primary" href="add.jsp">添加联系人</a><a class="btn btn-primary" href="javascript:void(0);" id="delSelected">删除选中</a></div><form id="form" action="${pageContext.request.contextPath}/delSelectedServlet" method="post"><table border="1" class="table table-bordered table-hover"><tr class="success"><th><input type="checkbox" id="firstcb"></th><th>编号</th><th>姓名</th><th>性别</th><th>年龄</th><th>籍贯</th><th>QQ</th><th>邮箱</th><th>操作</th></tr><c:forEach items="${pb.list}" var="user" varStatus="s"><tr><td><input type="checkbox" name="uid" value="${user.id}"></td><td>${s.count}</td><td>${user.name}</td><td>${user.gender}</td><td>${user.age}</td><td>${user.address}</td><td>${user.qq}</td><td>${user.email}</td><td><a class="btn btn-default btn-sm"href="${pageContext.request.contextPath}/findUserServlet?id=${user.id}">修改</a>&nbsp;<a class="btn btn-default btn-sm" href="javascript:deleteUser(${user.id});">删除</a></td></tr></c:forEach></table></form><div><nav aria-label="Page navigation"><ul class="pagination"><c:if test="${pb.currentPage == 1}"><li class="disabled"></c:if><c:if test="${pb.currentPage != 1}"><li></c:if><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><c:forEach begin="1" end="${pb.totalPage}" var="i"><c:if test="${pb.currentPage ==i}"><li class="active"><ahref="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if><c:if test="${pb.currentPage !=i}"><li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}">${i}</a></li></c:if></c:forEach><c:if test="${pb.currentPage >= pb.totalPage}"><%--为了逻辑更严谨，当页码为最后一页时无法进入下一页--%><li class="disabled">  <%--禁用--%><%--当前页面不+1--%><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></c:if><c:if test="${pb.currentPage < pb.totalPage}"><%--当页码不为为最后一页时可以进入一页--%><li><%--当前页码+1--%><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></c:if></li><span style="font-size: 25px;margin-left: 5px;">共${pb.totalCount}条记录，共${pb.totalPage}页</span></ul></nav></div></div></body>
</html>

优化

1.删除时给予提示信息确认是否删除？

提示信息与全选：

    <script>function deleteUser(id) {//用户提示安全if (confirm("您确定要删除吗？")) {//访问路径location.href = "${pageContext.request.contextPath}/delUserServlet?id=" + id;}}window.onload = function () {//删除选中明按钮添加单击事件document.getElementById("delSelected").onclick = function () {if (confirm("您确定要删除选定条目吗？")) {var flag = false;//判断是否有条目被选中var cbs = document.getElementsByName("uid");for (var i = 0; i < cbs.length; i++) {if (cbs[i].checked) {//有一个条目被选中flag = true;break;}}//有条目被选中if (flag) {//表单提交document.getElementById("form").submit();}}}//全选和全不选//1.获取第一个cbdocument.getElementById("firstcb").onclick = function () {//2.获取下边列表中所有的cbvar cbs = document.getElementsByName("uid");//3.遍历for (var i = 0; i < cbs.length; i++) {//4.设置这些cbs[i]的checked状态=firstCb.checkedcbs[i].checked = this.checked;}}}</script>

2.页面页码

禁用：

 <c:if test="${pb.currentPage == 1}"><li class="disabled"></c:if><c:if test="${pb.currentPage != 1}"><li></c:if><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage - 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}"aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>

<c:if test="${pb.currentPage >= pb.totalPage}"><%--为了逻辑更严谨，当页码为最后一页时无法进入下一页--%><li class="disabled">  <%--禁用--%><%--当前页面不+1--%><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></c:if><c:if test="${pb.currentPage < pb.totalPage}"><%--当页码不为为最后一页时可以进入一页--%><li><%--当前页码+1--%><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage + 1}&rows=5&name=${condition.name[0]}&address=${condition.address[0]}&email=${condition.email[0]}" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></c:if></li>

3.相关调整:

JavaWeb——用户信息列表案例相关推荐

案例：用户信息列表展示||1. 需求 2. 设计 3. 开发4. 测试 5. 部署运维
案例:用户信息列表展示 1. 需求:用户信息的增删改查操作 2. 设计: 1. 技术选型:Servlet+JSP+MySQL+JDBCTemplate+Druid+BeanUtils+tomcat ...
案例：用户信息列表展示
一.需求设计分析 1.需求:用户信息的增删改查操作 2.设计: 1.技术选型:Servlet+JSP+MySQL+JDBCTemplate+Duird+BeanUtil ...
JavaWeb用户信息管理系统（附全部代码）
JavaWeb用户信息管理系统(附全部代码) 1.JavaEE项目的三层框架 2 .本项目的目录文件(java文件) 3.创建用户资源的数据表 3.1.编写数据库表对应的JavaBean对象 4.编写 ...
JavaWeb:用户信息管理系统
目录: 前言: 一.需求分析: 1. 简单功能 2. 复杂功能 3.登录: 二.设计: 1. 技术选型: 2. 数据库设计: 三.开发: 1. 环境搭建 1. 创建数据库环境(mysql8.0) 2. ...
【Vue学习-element-ui】用户信息列表的实现
一.效果二.功能实现 1.显示所有用户信息后端查询所有用户信息,前端axios请求获取所有用户信息的JSON字符数组,将获取的信息放在一个allUsers的数组中,用于拉取所有信息(便于查 ...
JavaWeb用户信息管理系统-修改用户操作的实现
1 创建更新用户持久层 void updateUserByUserId(Users users); /*** 更新用户* @param users*/@Overridepublic void upda ...
JavaWeb用户信息管理系统-添加用户的实现
1 添加用户持久层 1.1 创建添加用户的持久层接口 public interface UserManagerDao {void insertUser(Users users); } 1.2 持久层用 ...
JavaWeb用户信息管理系统-创建登录页面
目录 1 页面登录模板 2 导入模板所需的css和js还有图片 3 将静态的html转换为jsp文件 4 访问是否成功 1 页面登录模板源码地址:https://download.csdn.net/ ...
JavaWeb-综合案例(用户信息)-学习笔记01【列表查询】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...

JavaWeb——用户信息列表案例

前言

一、用户信息列表综合案列

二、项目结构

三、功能实现

1.简单功能

1.列表查询

dao层：

2.登录

3. 添加

server层

dao层

4. 删除

service层

dao层

5. 修改

service层

2.复杂功能

1. 删除选中

2. 分页查询与复杂条件查询

总结

list.jsp:

优化

JavaWeb——用户信息列表案例相关推荐

最新文章

热门文章