目录
前言
通过学习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处理--%>
<a
href="${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.jsp
request.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(); //查询所有用户
@Override
public List<User> findAll() {
//调用Dao
return dao.findAll();
}dao层：
/**
* 查询所有用户信息
* @return
*/
public List<User> findAll(); //查询所有用户信息
@Override
public List<User> findAll() {
//使用JDBC操作数据库、
//1、定义sql
String 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>×</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,y
int 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(); //获取session
String 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);
//管理员登录验证
@Override
public 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); //添加用户
@Override
public void addUser(User user) {
dao.adduser(user);
}dao层
/**
* 添加用户
* @param user
*/
void adduser(User user);
//添加用户
@Override
public 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.获取id
String id = request.getParameter("id");
//2.调用service删除
UserService service = new UserServiceImpl();
service.deleteUser(id);
//3.跳转到查询所有Servlet
response.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);
//删除用户
@Override
public void delete(int id) {
//1.定义sql
String sql = "delete from user where id = ?";
//2.执行sql
template.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.获取id
String id = request.getParameter("id");
//2.调用Service查询
UserService service = new UserServiceImpl();
User user = service.findUserById(id);
//3.将user存入request
request.setAttribute("user",user);
//4.转发到update.jsp
request.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.获取map
Map<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.跳转到查询所有Servlet
response.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查询
@Override
public User findUserById(String id) {
return dao.findById(Integer.parseInt(id));
}
//修改用户信息
@Override
public void updateUser(User user) {
dao.update(user);
}
dao层
/**
* 根据id查询
* @param id
* @return
*/
User findUserById(String id);
/**
* 修改用户信息
* @param user
*/
void updateUser(User user);
//根据id查询
@Override
public User findById(int id) {
String sql = "select * from user where id = ?";
return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), id);
}
//修改用户信息
@Override
public 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.获取所有id
String[] ids = request.getParameterValues("uid");
//2.调用service删除
UserService service = new UserServiceImpl();
service.delSelectedUser(ids);
//3.跳转查询所有Servlet
response.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); //批量删除用户
@Override
public 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">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<c:if test="${pb.currentPage ==i}">
<li class="active"><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: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">»</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">»</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存入request
request.setAttribute("pb",pb);
request.setAttribute("condition",condition);//将查询条件存入request
//4.转发到list.jsp
request.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);
//分页条件查询
@Override
public 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); //查询总记录数
@Override
public int findTotalCount(Map<String, String[]> condition) {
//1.定义模板初始化sql
String sql = "select count(*) from user where 1 = 1 ";
StringBuilder sb = new StringBuilder(sql);
//2.遍历map
Set<String> keySet = condition.keySet();
//定义参数的集合
List<Object> params = new ArrayList<Object>();
for (String key : keySet) {
//排除分页条件参数
if("currentPage".equals(key) || "rows".equals(key)){
continue;
}
//获取value
String 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());
}
//查询查询每页记录
@Override
public 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.遍历map
Set<String> keySet = condition.keySet();
//定义参数的集合
List<Object> params = new ArrayList<Object>();
for (String key : keySet) {
//排除分页条件参数
if("currentPage".equals(key) || "rows".equals(key)){
continue;
}
//获取value
String 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.获取第一个cb
document.getElementById("firstcb").onclick = function () {
//2.获取下边列表中所有的cb
var cbs = document.getElementsByName("uid");
//3.遍历
for (var i = 0; i < cbs.length; i++) {
//4.设置这些cbs[i]的checked状态=firstCb.checked
cbs[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>
<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">«</span>
</a>
</li>
<c:forEach begin="1" end="${pb.totalPage}" var="i">
<c:if test="${pb.currentPage ==i}">
<li class="active"><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: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">»</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">»</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.获取第一个cb
document.getElementById("firstcb").onclick = function () {
//2.获取下边列表中所有的cb
var cbs = document.getElementsByName("uid");
//3.遍历
for (var i = 0; i < cbs.length; i++) {
//4.设置这些cbs[i]的checked状态=firstCb.checked
cbs[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">«</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">»</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">»</span>
</a>
</c:if>
</li>3.相关调整:
相关的操作可参考list.jsp.
扫一扫
2148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
