页面调整
bootstrap
一些组件和表单,分页条 按钮
加复选框
1 查询所有用户
index.jsp----->userlistservlet-------->service的findall方法----->调用dao层的findall方法----->jdbc连接数据库
----.使用Druid数据库连接池技术,操作mysql,day14数据库中user表
JDBC工具类 使用Durid连接池
3.使用JdbcTemplate技术封装JDBC
------>返回users
------->userlistservlet------>后转发到list.jsp中的el表达式显示
1 登录功能
login.jsp里面有三个username,password,checkcode按登录按钮就提交到loginservlet和一个checkcodeservlet里面生成验证码
----->loginservlet里面
//1.设置编码
//2。获取数据
//2.1获取用户填写验证码
//3.验证码校验
//验证码不正确
//提示信息----->login.jsp页面
//4.封装User对象
map集合
//5.调用Service的login方法查询----->dao层的比较方法返回值如果有返回user没有返回null
//6.判断是否登录成功
//登陆成功
//将用户存入session
//跳转页面 ------->index.jsp页面
//登陆失败
//提示信息
request.setAttribute("login_msg","用户名或密码错误! ");
//跳转登录页面----->login.jsp
3 增加用户功能
在list.jsp中的一个添加联系人按钮里面------->跳转到add.jsp------->把信息提交到addservlet
//1.设置编码
//2。获取数据
//3.封装User对象
//4.调用Service的add方法查询----->dao层的add方法调用数据库进行添加
//5跳转到userlistservlet.再次查询
遗留实现
******
在add.jsp中用JavaScript进行表单的校验
不能随便添加user
4 删除功能
利用user的id属性来进行记录的删除
在list.jsp中删除按钮绑定id--------->delservlet中获取id
//获取id
//调用service删除
//跳转查询所有userlistservlet
功能优化
删除加提示信息
用javascript定义一个删除方法,来判断是否删除记录 。。加一个confirm来给用户提示信息
5 修改功能
分为两步:第一步是用户信息的回显
在修改按钮按下后实现信息的回显
<a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/finduserservlet?id=${user.id}">修改</a>
绑定用户的id.然后跳转到finduserservlet中查询用户
finduserservlet中
//获取用户id
//根据id查询用户信息User
//调用service查询
//将user对象存到request域中
//转发到update.jsp页面
在update.jsp中把所有属性回显值如${user.name}
两个比较难做的地方
一个是性别的按钮和籍贯的下拉列表
利用jstl标签的taglib中的c:if进行判断
性别的按钮加checked进行判断
籍贯的下拉列表用selected进行判断
第二步是用户信息的修改后的提交
首先在update.jsp里面设置隐藏域提交id
<%--隐藏域 提交id--%>
<input type="hidden" name="id" value="${user.id}">
然后在update.jsp里面的action路径改为Updateuserservlet
//1.设置编码
//2。获取数据
//3.封装User对象
//4.调用Service的updateuser方法查询----->dao层的update方法调用数据库进行添加
//5跳转到userlistservlet.再次查询
重要的是sql的编写
String sql = "update user set name = ?,gender = ?,age = ?,address = ? ,qq = ?,email =? where id = ?";
6 删除选中功能---批量删除
给所有的table加一个form表单,给这些id提交到DelSelectedservlet<form id="form" action="${pageContext.request.contextPath}/DelSelectedservlet" method="post">
给复选框加id属性以及value属性<th><input type="checkbox" name="uid" value="${user.id}"></th>
在<a class="btn btn-primary" href="javascript:void(0);" id="delselected">删除选中</a>
在javascript中编写
//获取选中条中id
//等页面加载完才能获取id
window.onload = function () {
//给删除选中按钮加单击事件
document.getElementById("delselected").onclick = function () {
//表单提交
//submit是一个方法;onsubmit是一个事件
document.getElementById("form").submit();
}
}
编写DelSelectedservlet
//1.获取id数组
String[] ids = request.getParameterValues("uid");
//2.调用Service保存
Userservice service = new UserServiceImpl();
service.deleteUsers(ids);
//3跳转到userlistservlet.再次查询
在UserServiceImpl中遍历数组删除用户
public void deleteUsers(String[] ids) {
//iter遍历数组
for (String id : ids) {
//调用dao删除
dao.delete(Integer.parseInt(id));
} }
增加一些功能
一当第一个复选框选中后,下面所有的复选框都被选中
状态一样,以及加提示消息,增加用户体验
空指针异常-----前台控制
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){
//有条目选中了
//表单提交
//submit是一个方法;onsubmit是一个事件
document.getElementById("form").submit();
}
}
空指针异常
后台控制
//避免空指针异常
if(ids != null && ids.length >0){
// /iter遍历数组
for (String id : ids) {
//调用dao删除
dao.delete(Integer.parseInt(id));
}
6 分页查询功能
首先创建一个PageBean对象
里面包含了
然后主要是currentPage 当前页面和rows每条显示条数
private int totalCount; //总记录数
private int totalPage; //提供总页码
private List<T> list ;//每页的数据
private int currentPage;//当前页面
private int rows;//每页显示的条数
然后在服务器端要查找总记录数以及查找每页中记录
首先创建一个servlet
findUserByPageServlet
在这中 //1.接受请求参数 currentPage rows
String currentPage = request.getParameter("currentPage");//当前页码
String rows = request.getParameter("rows");//每条显示条数
//2.调用service查询PageBean
UserServiceImpl service = new UserServiceImpl();
PageBean<User> pb = service.finduserBypage(currentPage, rows);
//3.将PageBean存入request
request.setAttribute("pb",pb);
//4.转发到list.jsp显示
request.getRequestDispatcher("/list.jsp").forward(request,response);
在service中实现service.finduserBypage方法
int currentPage = Integer.parseInt(_currentPage);
int rows = Integer.parseInt(_rows);
if(currentPage <=0){
currentPage =1;
}
//1创建空的PageBean对象
PageBean<User> pb = new PageBean<User>();
//2设置当前页面属性和rows属性
pb.setCurrentPage(currentPage);
pb.setRows(rows);
//3调用dao查询totalCount总记录数dao.findTotalCount();
int totalCount =dao.findTotalCount();
pb.setTotalCount(totalCount);
//4start=(currentPage -1)* rows
int start=(currentPage -1)* rows;
//5调用dao查询list集合dao.findByPage(int start,int rows)
List<User> list=dao.findByPage(start,rows);
pb.setList(list);
//6计算总页码
int totalPage = totalCount % rows ==0 ? totalCount / rows : totalCount / rows +1;
pb.setTotalPage(totalPage);
//7返回PageBean对象
return pb;
再调用dao层的两个方法,一个查询总记录数,一个查一页的数据
@Override
public int findTotalCount() {
String sql = "select count(*) from user";
return template.queryForObject(sql,Integer.class);
}
@Override
public List<User> findByPage(int start, int rows) {
String sql = "select * from user limit ? , ?";
return template.query(sql,new BeanPropertyRowMapper<User>(User.class),start,rows);
}
前台的代码
<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" 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">${i}</a></li>
</c:if>
<c:if test="${pb.currentPage != i}">
<li><a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${i}&rows=5">${i}</a></li>
</c:if>
</c:forEach>
<c:if test="${pb.currentPage >= pb.totalPage}">
<li class="disabled">
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.totalPage}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<c:if test="${pb.currentPage !=pb.totalPage }">
<li>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<span style="font-size: 25px; margin-left: 5px;">
共${pb.totalCount}条记录,共${pb.totalPage}页
</span>
</ul>
细节考虑一
第一个访问index.jsp时要把路径改一下,,以及在finduserbypage里面设置if加判断
细节考虑二
就是分页条的激活
首先是前一页按钮的禁用
<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" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
以及bug的处理在这里面在后台代码中要加判断
if(currentPage == null|| "".equals(currentPage)){
currentPage="1";
}
if(rows ==null || "".equals(rows)){
rows ="5";
}
让点了前一页也跳到第一页
其次是后一页按钮的禁用
<c:if test="${pb.currentPage >= pb.totalPage}">
<li class="disabled">
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.totalPage}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
<c:if test="${pb.currentPage !=pb.totalPage }">
<li>
<a href="${pageContext.request.contextPath}/findUserByPageServlet?currentPage=${pb.currentPage+1}&rows=5" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</c:if>
直接加了一个判断来解决
与细节的优化
就是自己发现的参数的传递一定不要加空格因为这样会报错、
总结主要是两个参数currentPage和rows
以及java泛型的掌握
7.复杂条件分页查询功能
用户系统
最新推荐文章于 2023-03-04 00:04:23 发布