用户系统

页面调整
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>&nbsp;
绑定用户的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">&laquo;</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">&raquo;</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">&raquo;</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">&laquo;</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">&raquo;</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">&raquo;</span>
                            </a>
                        </li>
                    </c:if>
直接加了一个判断来解决
与细节的优化
就是自己发现的参数的传递一定不要加空格因为这样会报错、
总结主要是两个参数currentPage和rows
以及java泛型的掌握
7.复杂条件分页查询功能