综合案例-联系人管理系统

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 configurationPUBLIC "-//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() {@Overridepublic 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 {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {// 类型转换HttpServletRequest request = (HttpServletRequest) servletRequest;// 获取请求方式：GET或POSTString method = request.getMethod();// 判断是否是POST请求if ("post".equalsIgnoreCase(method)){// 设置请求参数编码：utf-8request.setCharacterEncoding("utf-8");}// 放行请求filterChain.doFilter(request, servletResponse);}@Overridepublic 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 {@Overrideprotected 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>&nbsp;<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>&nbsp;&nbsp;第<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. 添加成功：重定向到ListContactServletresponse.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. 获取请求参数：联系人idint 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>&nbsp;<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. 更新成功：重定向到ListContactServletresponse.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  {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 1. 接收请求参数：联系人idint id = Integer.parseInt(request.getParameter("id"));// 2. 调用业务层方法删除联系人ContactService cs = new ContactService();if (cs.deleteContact(id)) {// 3. 重定向到ListContactServletresponse.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 和 size2. 哪些成员变量的值需要从数据库获取？count：总记录数dataList：列表数据3. 哪些成员变量的值需要自己计算first：1next：current + 1previous：current - 1totalPage：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 {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// 0. 接收请求参数：当前页号和页大小String current = request.getParameter("current");String size = request.getParameter("size");// 如果当前页号没有传递则设置默认值：1if (StringUtils.isNullOrEmpty(current)){current = "1";}// 如果页大小没有传递则设置默认值：5if (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>&nbsp;<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>&nbsp;&nbsp;第<select id="current" name="current"><%--beigin属性：循环开始的数字  1end属性：循环结束的数字  10for(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 和 sizelocation.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>

JAVA WEB DAY 16_ 综合案例-联系人管理系统相关推荐

1. WEB阶段7:综合练习-联系人管理系统-增删改查查询分页

   综合练习-联系人管理系统-增删改查&查询分页 回顾 能够说出过滤器的作用 解决全局乱码问题 用户权限访问控制 用户输入文本内容进行过滤 能够编写过滤器 创建一个类实现javax.servlet ...

2. 大学生课程设计 ------ Java Web课程设计（学生成绩管理系统01）

   大学生课程设计 ------ Java Web课程设计(学生成绩管理系统01) Java Web课程设计(代码+课程报告) 课程作业效果如下: 学生1:后台实现.数据库设计.前端后台整合 学生2:前端 ...

3. 大学生课程设计 ------ Java Web课程设计（学生成绩管理系统03）

   大学生课程设计 ------ Java Web课程设计(学生成绩管理系统03) Java Web课程设计(代码+课程报告) ---------------------我是分割线------------ ...

4. 基于Java Web的汽车公司的车辆管理系统

   012基于Java Web的汽车公司的车辆管理系统 开发环境: Eclipse/MyEclipse.Tomcat8.Jdk1.8 数据库: MySQL 技术: Servlet+JSP+JDBC+Jav ...

5. java web 应用技术与案例教程_《Java Web应用开发技术与案例教程》怎么样_目录_pdf在线阅读 - 课课家教育...

   出版说明 前言 第1章 java Web应用开发技术概述 1.1 Java Web应用开发技术简介 1.1.1 Java Web应用 1.1.2 Java Web应用开发技术 1.2 Java Web ...

6. 体育馆预约系统java_基于JAVA WEB的高校体育场地预约管理系统（计算机毕业设计）...

   项目类型:JAVA WEB项目 项目名称:高校体育场地预约管理系统 用户类型:三种角色(老师+学生+管理员) 难度:7 项目技术:spring+struuts+jsp+jquery+hibernate ...

7. JAVA WEB课设心得——大学生毕业设计管理系统

   题目要求 分成若干个小组,每个小组3-4名同学,开发完成一个<毕业设计管理系统>,组内同学需要有任务分工. 需求陈述:我们的目标是要开发一个本科生毕业设计管理系统,使用者主要有三种类型:超 ...

8. java web期末课程设计 学生成绩管理系统（mysql，jstl+el，Javabean）+增删改查，session域+servlet（基础易理解）

   学生成绩管理系统 一.实验目的 为了更好的学习理解JavaWeb,创建了此系统.此系统可以帮助学习Java web基础,特别是javaweb入门,此系统使用大部分Java web基础知识.Java w ...

9. Web APIs 正则表达式综合案例丨小兔仙儿登录页面

   目录 综合案例:小兔鲜登录页面 案例代码:CSS丨common 案例代码:CSS丨index 案例代码:CSS丨login 案例代码:CSS丨register 案例代码:HTML丨index 案例代码 ...

最新文章

1. EF－Entity Framework 相关技术点收集贴
2. 传真休眠怎么取消_C盘满了怎么办——系统瘦身
3. Ubuntu常见命令记录
4. python不定长参数怎么相加_python函数不定长参数使用方法解析
5. LeetCode 1353. 最多可以参加的会议数目（排序+贪心，优先队列，难）
6. java保存登录信息_java – 保存登录详细信息(首选项)android
7. 小红书 “红”到翻车：你的骚操作闪了我的腰？
8. window和Linux下安装JDK配置环境变量
9. Unity3D加载资源的四种方式
10. MessageDigest（加密）
11. 江西师范大学教育心理测量计算机,江西师范大学重点和特色专业介绍
12. Go 高性能编程心法探秘
13. 如何批量将图片尺寸改成一样大？
14. 自学CTP客户端开发记录001
15. 正向代理 反向代理 CDN加速
16. swi 指令能用在C语言吗,ARM的SWI异常中断处理程序设计
17. activiti工作流，审批系统轻松落地，请假审批demo从流程绘制到审批结束实例
18. 查询员工所有信息，包括部门和其职位
19. java “错误：编码GBK 的不可映射字符”
20. 亚马逊国际获得AMAZON商品详情 API 返回值说明

热门文章

1. 04-05赛季欧洲冠军杯决赛.AC milan vs Liverpool
2. 如何在Apple Watch上管理您的朋友圈
3. 在线教育：直播授课在这三个阶段有哪些要看的？
4. 好记性不如烂笔头-linux学习笔记4apache相关知识
5. 美多商场之图形验证码
6. 错题集（求助中）：爬虫碰到cookies检查还是script啊甚至连被什么拦住的都不知道···
7. 上海2021年高考成绩排位查询,2021年上海高考分数一分一段位次表,上海高考个人成绩排名查询方法...
8. [转载]李开复针对马加爵事件写给中国学生的一封信
9. 二级c语言大题100道,2013二级c语言真题100道
10. UIQ3.0系列--在模拟器上显示中文