文章目录
综合案例-联系人管理系统
01-案例演示和功能说明-[★★]
查询联系人
删除联系人
添加联系人
修改联系人
02-项目环境搭建和数据准备-[★★★]
- 使用三层架构开发实现联系人CURD
项目结构
准备数据表
create table contact(
id int primary key auto_increment ,
name varchar(20) not null ,
sex char(1) ,
age int(3) unsigned , -- 无符号
address varchar(10) , -- 籍贯
qq varchar(18) ,
email varchar(25)
) ;
-- 插入记录
insert into contact(name,sex,age,address,qq,email) values
('猪八戒','男',25,'广东','834523234','zhuzhuxia@163.com'),
('貂蝉','女',18,'湖南','59869834','diaochan@qq.com'),
('孙悟空','男',28,'湖南','87967822','wukong@qq.com'),
('周瑜','男',25,'广西','2743759345','zhou@163.com');
select * from contact;
主配置文件 sqlMapConfig.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!--给数据类型取别名-->
<typeAliases>
<!-- 包扫描给类取别名，默认别名就是类名 -->
<package name="com.pkx.entity"/>
</typeAliases>
<!--配置数据库连接参数-->
<environments default="mybatis">
<environment id="mybatis">
<!--事务管理器-->
<transactionManager type="JDBC"></transactionManager>
<!--配置数据源-->
<dataSource type="pooled">
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///day29"/>
<property name="username" value="root"/>
<property name="password" value="root"/>
</dataSource>
</environment>
</environments>
<!-- 加载接口映射文件 -->
<mappers>
<!-- 加载指定包(包括子包下)的所有接口映射映射文件 -->
<package name="com.pkx.dao"/>
</mappers>
</configuration>
03-创建工具类-[★★★★★]
SqlSession工具类
- 目标：简化SqlSession对象的创建和接口代理对象的创建
/**
* sqlSession工具类
*/
public class SqlSessionUtils {
// 1. sqlSessionFactory对象
private static SqlSessionFactory sqlSessionFactory;
// 2. 加载主配置文件并获得SqlSessionFactory对象
static {
try{
// 2.1 获得字节输入流关联sqlMapConfig.xml文件
InputStream in = Resources.getResourceAsStream("sqlMapConfig.xml");
// 2.2 获得SqlSessionFactoryBuilder对象
SqlSessionFactoryBuilder builder = new SqlSessionFactoryBuilder();
// 2.3 创建sqlSessionFactory对象
sqlSessionFactory = builder.build(in);
} catch(Exception e){
e.printStackTrace();
}
}
// 3. 返回一个sqlSession对象
public static SqlSession openSession(){
return sqlSessionFactory.openSession();
}
// 4. 返回Dao接口代理对象
public static <T> T getMapper(Class<T> interfaceClass){
// 创建代理对象并返回
return (T) Proxy.newProxyInstance(
SqlSessionUtils.class.getClassLoader(),
new Class[]{interfaceClass},
new InvocationHandler() {
@Override
public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {
// 1. 获得连接对象
SqlSession sqlSession = sqlSessionFactory.openSession();
// 2. 获得接口代理对象 ==》 (真实对象)
T dao = sqlSession.getMapper(interfaceClass);
// 4. 调用真实对象的方法
Object result = method.invoke(dao, args);
// 5. 关闭连接
sqlSession.commit();
sqlSession.close();
return result;
}
});
}
}
字符编码过滤器
- 目标：解决全局POST参数乱码问题
/**
* 目标：解决全局POST请求参数乱码问题
*/
@WebFilter(urlPatterns = "/*")
public class CharacterEncodingFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
// 类型转换
HttpServletRequest request = (HttpServletRequest) servletRequest;
// 获取请求方式：GET或POST
String method = request.getMethod();
// 判断是否是POST请求
if ("post".equalsIgnoreCase(method)){
// 设置请求参数编码：utf-8
request.setCharacterEncoding("utf-8");
}
// 放行请求
filterChain.doFilter(request, servletResponse);
}
@Override
public void destroy() {
}
}
04-显示联系人列表-[★★★★★]
ContactDao接口代码
/**
* 数据访问层接口
实现功能的步骤
1. 后端服务器
调用顺序：表现层 -> 业务层 -> 数据访问层
开发顺序：数据访问层 -> 业务层 -> 表现层
问题1：要明确方法的参数个数和类型
问题2：要明确方法的返回值类型
2. 前台页面
1. 发送请求获取数据(是否需要传递参数，需要传递几个)
2. 显示后台返回的数据
*/
public interface ContactDao {
/**
* 查询所有联系人
*/
@Select("select * from contact")
List<Contact> findAll();
}
ContactService业务层代码
/**
* 业务层
*/
public class ContactService {
// 获得接口实现类对象
private ContactDao contactDao = SqlSessionUtils.getMapper(ContactDao.class);
/**
* 查询所有联系人
*/
public List<Contact> findAll(){
return contactDao.findAll();
}
}
ListContactServlet控制器代码
/**
* 目标：接收请求查询所有联系人
*
* 步骤：
1. 创建业务层对象
2. 调用业务层方法：查询所有联系人
3. 将联系人数据存储到请求域
4. 转发到list.jsp页面展示数据
*/
@WebServlet(urlPatterns = "/list")
public class ListContactServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 创建业务层对象
ContactService cs = new ContactService();
// 2. 调用业务层方法：查询所有联系人
List<Contact> contactList = cs.findAll();
// 3. 将联系人数据存储到请求域
request.setAttribute("contactList", contactList);
// 4. 转发到list.jsp页面展示数据
request.getRequestDispatcher("list.jsp").forward(request, response);
}
}
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">
<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>
<style type="text/css">
tr,th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<form action="list" method="get" class="form-inline" id="contactForm">
<h2 class="text-center">联系人列表</h2>
<div class="row text-right" style="margin-bottom: 10px; margin-top: 15px;">
<div class="col-md-4 text-left">
<a class="btn btn-primary" href="add.jsp" style="width: 120px">添加联系人</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<%--从请求域获取联系人集合：循环显示联系人信息--%>
<c:forEach items="${contactList}" var="contact">
<tr>
<td>${contact.id}</td>
<td>${contact.name}</td>
<td>${contact.sex}</td>
<td>${contact.age}</td>
<td>${contact.address}</td>
<td>${contact.qq}</td>
<td>${contact.email}</td>
<td>
<div class="btn-group btn-group-sm">
<a class="btn btn-success btn-xs" href="#">修改</a>
<a class="btn btn-info btn-xs" href="#">删除</a>
</div>
</td>
</tr>
</c:forEach>
</table>
</div>
</div>
<div class="row text-center">
<div class="btn-group btn-group-sm">
<a href="#" class="btn btn-default">首页</a>
<a href="#" class="btn btn-default">上页</a>
<a href="#" class="btn btn-default">下页</a>
<a href="#" class="btn btn-default">末页</a>
</div>
第<select id="current" name="current">
<c:forEach begin="1" end="5" var="i">
<option value="${i}"}>${i}</option>
</c:forEach>
</select> 页/共 5 页 共 50 条
每页
<input type="number" name="size" style="width: 60px;" id="size"/>
条
</div>
</form>
</div>
</body>
<script type="text/javascript">
</script>
</html>
05-添加联系人-[★★★★★]
ContactDao接口代码
public interface ContactDao {
/**
* 添加联系人
*/
@Insert("insert into contact values(null,#{name},#{sex},#{age},#{address},#{qq},#{email})")
int addContact(Contact contact);
}
ContactService业务层代码
/**
* 添加联系人
*/
public boolean addContact(Contact contact){
return contactDao.addContact(contact) == 1;
}
AddContactServlet控制器代码
/**
* 目标：实现添加联系人功能
步骤：
1. 接收请求参数：联系人数据
2. 创建联系人对象
3. 使用BeanUtils工具类：封装请求参数到联系人对象
4. 创建业务层对象调用方法执行添加联系人操作
5. 添加成功：重定向到ListContactServlet
*/
@WebServlet(urlPatterns = "/add")
public class AddContactServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
// 1. 接收请求参数：联系人数据
Map<String, String[]> map = request.getParameterMap();
// 2. 创建联系人对象
Contact contact = new Contact();
// 3. 使用BeanUtils工具类：封装请求参数到联系人对象
BeanUtils.populate(contact, map);
// 4. 创建业务层对象调用方法执行添加联系人操作
ContactService cs = new ContactService();
if (cs.addContact(contact)) {
// 5. 添加成功：重定向到ListContactServlet
response.sendRedirect("list");
}
} catch(Exception e){
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
list.jsp页面代码
<div class="col-md-4 text-left">
<a class="btn btn-primary" href="add.jsp" style="width: 120px">添加联系人</a>
</div>
add.jsp页面代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- HTML5文档-->
<!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>
</head>
<body>
<div class="container" style="max-width: 500px">
<h3>添加联系人页面</h3>
<form action="add" 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="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="number" 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>
</select>
</div>
<div class="form-group">
<label for="qq">QQ：</label>
<input type="number" class="form-control" id="qq" name="qq" placeholder="请输入QQ号码"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input type="email" 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="返回" onclick="history.back()"/>
</div>
</form>
</div>
</body>
</html>
06-修改联系人-回显联系人数据-[★★★★★]
ContactDao接口代码
/**
* 根据id查询联系人
*/
@Select("select * from contact where id = #{id}")
Contact findById(int id);
ContactService业务层代码
/**
* 根据id查询联系人
*/
public Contact findById(int id){
return contactDao.findById(id);
}
QueryContactServlet控制器代码
/**
* 目标：根据id查询联系人
*/
@WebServlet(urlPatterns = "/query")
public class QueryContactServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 获取请求参数：联系人id
int id = Integer.parseInt(request.getParameter("id"));
// 2. 调用业务对象方法：根据id查询联系人
ContactService cs = new ContactService();
// 3. 将联系人对象存储到请求域中
Contact contact = cs.findById(id);
request.setAttribute("contact", contact);
// 4. 转发到update.jsp页面：显示联系人信息
request.getRequestDispatcher("update.jsp").forward(request, response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
list.jsp页面代码
<td>
<div class="btn-group btn-group-sm">
<a class="btn btn-success btn-xs" href="query?id=${contact.id}">修改</a>
<a class="btn btn-info btn-xs" href="#">删除</a>
</div>
</td>
update.jsp页面代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!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="/day05/update" method="post">
<div class="form-group">
<label for="name">姓名：</label>
<input type="text" class="form-control" id="name" value="${contact.name}"
name="name" readonly="readonly" placeholder="请输入姓名" />
</div>
<div class="form-group">
<label>性别：</label>
<input type="radio" name="sex" value="男" ${contact.sex == '男'?"checked":""}/>男
<input type="radio" name="sex" value="女" ${contact.sex == '女'?"checked":""} />女
</div>
<div class="form-group">
<label for="age">年龄：</label>
<input type="text" class="form-control" value="${contact.age}" id="age" name="age" placeholder="请输入年龄" />
</div>
<div class="form-group">
<label for="address">籍贯：</label>
<select id="address" name="address" class="form-control" >
<%--遍历省份--%>
<c:forEach items="${provinces}" var="province">
<option ${contact.address == province ? "selected":""} value="${province}">${province}</option>
</c:forEach>
<%--<option value="广东">广东</option>
<option value="广西">广西</option>
<option value="湖南">湖南</option>--%>
</select>
</div>
<div class="form-group">
<label for="qq">QQ：</label>
<input id="qq" type="text" value="${contact.qq}" class="form-control" name="qq" placeholder="请输入QQ号码"/>
</div>
<div class="form-group">
<label for="email">Email：</label>
<input id="email" type="text" value="${contact.email}" class="form-control" 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>
07-修改联系人-更新联系人数据-[★★★★★]
- 目标：在修改联系人界面点击提交按钮实现更新联系人数据并跳转到列表界面
ContactDao接口代码
/**
* 更新联系人
*/
@Update("update contact set name = #{name}, " +
"sex=#{sex},age = #{age},address=#{address},qq=#{qq},email=#{email} where id = #{id}")
int updateContact(Contact contact);
ContactService业务层代码
/**
* 更新联系人
*/
public boolean updateContact(Contact contact){
return contactDao.updateContact(contact) == 1;
}
UpdateContactServlet控制器代码
/**
* 目标：更新联系人
*/
@WebServlet(urlPatterns = "/update")
public class UpdateContactServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try{
// 1. 接收请求参数：联系人数据
Map<String, String[]> map = request.getParameterMap();
// 2. 创建联系人对象
Contact contact = new Contact();
// 3. 使用BeanUtils工具类封装请求参数到联系人对象上
BeanUtils.populate(contact, map);
// 4. 调用业务层方法更新联系人
ContactService cs = new ContactService();
if (cs.updateContact(contact)){
// 5. 更新成功：重定向到ListContactServlet
response.sendRedirect("list");
}
} catch(Exception e){
e.printStackTrace();
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
08-删除联系人-[★★★★★]
ContactDao接口代码
// 根据id删除联系人
@Delete("delete from contact where id = #{id}")
int deleteContact(int id);
ContactService业务层代码
// 根据id删除联系人
public boolean deleteContact(int id){
return contactDao.deleteContact(id) == 1;
}
DeleteContactServlet控制器代码
/**
* 目标：删除联系人
*/
@WebServlet(urlPatterns = "/delete")
public class DeleteContactServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 接收请求参数：联系人id
int id = Integer.parseInt(request.getParameter("id"));
// 2. 调用业务层方法删除联系人
ContactService cs = new ContactService();
if (cs.deleteContact(id)) {
// 3. 重定向到ListContactServlet
response.sendRedirect("list");
}
}
}
list.jsp页面代码
<a class="btn btn-info btn-xs" href="javascript:deleteContact(${contact.id})">删除</a>
<script type="text/javascript">
function deleteContact(id) {
if (confirm("是否确定删除联系人")){
location.href = "delete?id="+id;
}
}
</script>
09-分页查询联系人01-封装分页数据-[★★★★★★]
PageBean代码
/**
* 用于封装分页数据
*/
public class PageBean<T> {
/**
* 方便构建分页对象
* @param dataList 列表数据
* @param count 总记录
* @param current 当前页号
* @param size 页大小
*/
public static <T> PageBean<T> getPageBean(List<T> dataList,int count,int current,int size){
// 创建分页对象
PageBean<T> pageBean = new PageBean<>();
// 给成员变量赋值
pageBean.dataList = dataList;
pageBean.count = count;
pageBean.current = current;
pageBean.size = size;
pageBean.first = 1;
pageBean.next = current + 1;
pageBean.previous = current - 1;
pageBean.totalPage = count % size == 0 ? count/size : count / size + 1;
pageBean.last = pageBean.totalPage;
// 返回分页对象
return pageBean;
}
/**
思考：
1. 哪些成员变量的值需要页面传递？current 和 size
2. 哪些成员变量的值需要从数据库获取？
count：总记录数
dataList：列表数据
3. 哪些成员变量的值需要自己计算
first：1
next：current + 1
previous：current - 1
totalPage：count % size == 0? count / size : count / size + 1;
last：totalPage
*/
// 首页
private int first;
// 下一页
private int next;
// 上一页
private int previous;
// 最后一页
private int last;
// 总计录
private int count;
// 总页数
private int totalPage;
// 页大小：每页要显示的记录数
private int size;
// 当前页号
private int current;
// 据集合数据：当前页要显示的数
private List<T> dataList;
public int getFirst() {
return first;
}
public void setFirst(int first) {
this.first = first;
}
public int getNext() {
return next;
}
public void setNext(int next) {
this.next = next;
}
public int getPrevious() {
return previous;
}
public void setPrevious(int previous) {
this.previous = previous;
}
public int getLast() {
return last;
}
public void setLast(int last) {
this.last = last;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public int getTotalPage() {
return totalPage;
}
public void setTotalPage(int totalPage) {
this.totalPage = totalPage;
}
public int getSize() {
return size;
}
public void setSize(int size) {
this.size = size;
}
public int getCurrent() {
return current;
}
public void setCurrent(int current) {
this.current = current;
}
public List<T> getDataList() {
return dataList;
}
public void setDataList(List<T> dataList) {
this.dataList = dataList;
}
}
10-分页查询联系人02-后台代码实现-[★★★★★]
联系人测试数据
-- 插入记录
insert into contact(name,sex,age,address,qq,email) values
('陈宏子','男',21,'广东','15811688','cheng@126.com'),
('秦婷婷','女',25,'广东','15888802','zhangsan1@126.com'),
('折蓉蓉','女',30,'广东','13423333','zherong@163.com'),
('曹丽娜','女',26,'广东','12223333','zhangsan1@qq.com'),
('李娜','女',46,'广西','1343333','zhangsan1@163.com'),
('姜钰','男',49,'湖南','13223333','zhangsan1@qq.com'),
('魏天霞','女',38,'湖南','13054863','zhangsan1@126.com'),
('王官君','男',22,'湖南','1422233','zhangsan1@126.com'),
('王红梅','女',25,'福建','2777726','wang@qq.com'),
('郭淑慧','女',28,'海南','6058168','guoshu@qq.com'),
('马海娟','女',29,'海南','13829882','zhangsan1@163.com'),
('孙洪山','男',24,'广东','1393518','zhangsan1@gmail.com'),
('胡丹丹','女',19,'广西','132138998','zhangsan1@163.com'),
('胡书琴','女',30,'广西','152020988','zhangsan1@126.com'),
('冷静','男',32,'广东','13422223','lengjing@gmail.com'),
('李剑','男',33,'湖南','13423333','lijian@126.com'),
('任娟娟','女',21,'广西','13636668','juanjuan@163.com'),
('范志坚','男',22,'湖南','1223333','zhijain@126.com'),
('王继开','男',21,'海南','1685168','jikai@163.com'),
('刘小超','男',21,'广东','1342333','xiaochao@gmail.com');
ContactDao接口代码
/**
* 数据访问层接口
实现功能的步骤
1. 后端服务器
调用顺序：表现层 -> 业务层 -> 数据访问层
开发顺序：数据访问层 -> 业务层 -> 表现层
问题1：要明确方法的参数个数和类型
问题2：要明确方法的返回值类型
2. 前台页面
1. 发送请求获取数据(是否需要传递参数，需要传递几个)
2. 显示后台返回的数据
*/
public interface ContactDao {
/**
* 查询总记录数
*/
@Select("select count(*) from contact")
int count();
@Select("select * from contact limit #{start},#{size}")
List<Contact> findPage(@Param("start") int start, @Param("size") int size);
}
ContactService业务层代码
/**
* 返回分页对象：PageBean
* current：当前页号
* size：每页显示的记录数
*/
public PageBean getPageBean(int current,int size){
// 1. 查询总记录数
int count = contactDao.count();
// 2. 分页查询联系人数据
// 2.1 要跳过的记录数
int start = (current - 1) * size;
List<Contact> contactList = contactDao.findPage(start, size);
// 3. 获得PageBean对象
PageBean pageBean = PageBean.getPageBean(contactList, current, size, count);
// 4. 返回PageBean对象
return pageBean;
}
ListContactServlet控制器代码
/**
* 目标：接收请求查询所有联系人
*
* 步骤：
1. 创建业务层对象
2. 调用业务层方法：查询所有联系人
3. 将联系人数据存储到请求域
4. 转发到list.jsp页面展示数据
*/
@WebServlet(urlPatterns = "/list")
public class ListContactServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 0. 接收请求参数：当前页号和页大小
String current = request.getParameter("current");
String size = request.getParameter("size");
// 如果当前页号没有传递则设置默认值：1
if (StringUtils.isNullOrEmpty(current)){
current = "1";
}
// 如果页大小没有传递则设置默认值：5
if (StringUtils.isNullOrEmpty(size)){
size = "5";
}
// 1. 创建业务层对象
ContactService cs = new ContactService();
// 2. 调用业务层方法：查询所有联系人
// List<Contact> contactList = cs.findAll();
PageBean pageBean = cs.findPage(Integer.parseInt(current), Integer.parseInt(size));
System.out.println(pageBean);
// 3. 将联系人数据存储到请求域
request.setAttribute("pageBean", pageBean);
// 4. 转发到list.jsp页面展示数据
request.getRequestDispatcher("list.jsp").forward(request, response);
}
}
11-分页查询联系人03-前端页面实现-[★★★★★]
页面需求
1. 显示分页数据：当前页号，总页数，总记录数，页大小。
2. 如果是第1页：首页和上页按钮不能点击
3. 如果是最后1页：下页和末页按钮不能点击
4. 当页号改变时重新加载联系人列表数据
5. 当页大小值改变时重新加载联系人列表数据
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">
<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>
<style type="text/css">
tr,th {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<form action="list" method="get" class="form-inline" id="contactForm">
<h2 class="text-center">联系人列表</h2>
<div class="row text-right" style="margin-bottom: 10px; margin-top: 15px;">
<div class="col-md-4 text-left">
<a class="btn btn-primary" href="add.jsp" style="width: 120px">添加联系人</a>
</div>
<div class="col-md-8">
姓名：<input type="text" name="name" class="form-control"
placeholder="搜索的名字" style="width: 120px;" />
年龄：
<input type="number" name="min" class="form-control" style="width: 60px;" />~<input type="number" name="max" class="form-control" style="width: 60px;"/>
<button class="btn btn-default"><i class="glyphicon glyphicon-search"></i>查询</button>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table border="1" class="table table-bordered table-hover">
<tr class="success">
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>籍贯</th>
<th>QQ</th>
<th>邮箱</th>
<th>操作</th>
</tr>
<%--循环遍历联系集合--%>
<c:forEach items="${pageBean.dataList}" var="contact">
<tr>
<td>${contact.id}</td>
<td>${contact.name}</td>
<td>${contact.sex}</td>
<td>${contact.age}</td>
<td>${contact.address}</td>
<td>${contact.qq}</td>
<td>${contact.email}</td>
<td>
<div class="btn-group btn-group-sm">
<a class="btn btn-success btn-xs" href="query?id=${contact.id}">修改</a>
<a class="btn btn-info btn-xs" href="javascript:deleteContact(${contact.id})">删除</a>
</div>
</td>
</c:forEach>
</tr>
</table>
</div>
</div>
<div class="row text-center">
<div class="btn-group btn-group-sm">
<a ${pageBean.current == 1? "disabled":""} href="javascript:jumpPage('${pageBean.first}','${pageBean.size}')" class="btn btn-default">首页</a>
<a ${pageBean.current == 1? "disabled":""} href="javascript:jumpPage('${pageBean.previous}','${pageBean.size}')" class="btn btn-default">上页</a>
<a ${pageBean.current == pageBean.totalPage? "disabled":""} href="javascript:jumpPage('${pageBean.next}','${pageBean.size}')" class="btn btn-default">下页</a>
<a ${pageBean.current == pageBean.totalPage? "disabled":""} href="javascript:jumpPage('${pageBean.last}','${pageBean.size}')" class="btn btn-default">末页</a>
</div>
第
<select id="current" name="current">
<%--
beigin属性：循环开始的数字 1
end属性：循环结束的数字 10
for(int i = 1;i <= 10;i++){
if(i == pageBean.current){
}
d }
--%>
<c:forEach begin="1" end="${pageBean.totalPage}" var="i">
<option ${pageBean.current == i ? "selected":""} value="${i}"}>${i}</option>
</c:forEach>
</select>
页/共 ${pageBean.totalPage} 页 共 ${pageBean.count} 条
每页
<input type="number" name="size" style="width: 60px;" id="size"
value="${pageBean.size}"
/>
条
</div>
</form>
</div>
</body>
<script type="text/javascript">
// 监听删除按钮的点击
function deleteContact(id) {
if (confirm("你真的要删除该联系人吗?")) {
// 发请求到服务器删除联系：将id作为请求参数传递
location.href = "delete?id="+id;
}
}
// 监听上页，下页，首页，末页按钮点击
function jumpPage(current,size) {
// 发送请求获取分页数据：current 和 size
location.href = "list?current="+current+"&size="+size;
}
// 监听下拉列表值改变事件
document.getElementById("current").onchange = function () {
// 获得表单元素对象并调用方法触发表单提交
document.getElementById("contactForm").submit();
}
// 监听文本输入框内容的变化
document.getElementById("size").onchange = function () {
document.getElementById("current").value = 1;
// 获得表单元素对象并调用方法触发表单提交
document.getElementById("contactForm").submit();
}
</script>
</html>
版权声明：本文为NTT0101原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。