众筹网站项目第四天之弹层组件layer的使用及同步请求方式实现用户分页查询(1)

打开原教程视频
注：本人是渣渣，有错请谅解。

弹层组件layer的使用

首先找到资料中的layer文件夹，将其复制到main工程的jquery文件夹下。


然后打开login.jsp添加layer组件并修改doLogin()方法的代码

<script type="text/javascript" src="jquery/layer/layer.js"></script>
<script>
    function dologin() {
        //异步请求
        var floginacct=$("#floginacct");
        var fuserpswd=$("#fuserpswd");
        var ftype=$("#ftype");
        var loadingIndex =-1;
        if ($.trim(floginacct.val())==""){//判断账号文本框是否为空或无意义的空格串
            //alert("账号不能为空！");
            layer.msg("账号不能为空!", {time:1000, icon:5, shift:6}, function () {//弹出时间，图标，特效
                floginacct.val("");//清空账号文本框的内容
                floginacct.focus();//光标回到账号文本框上
            });
            return false;
        }
        if ($.trim(fuserpswd.val())==""){//判断密码文本框是否为空或无意义的空格串
            //alert("密码不能为空！");
            layer.msg("密码不能为空!", {time:1000, icon:5, shift:6}, function () {//弹出时间，图标，特效
                fuserpswd.val("");//清空账号文本框的内容
                fuserpswd.focus();//光标回到账号文本框上
            });
            return false;
        }
        $.ajax({
           type : "post",
            url : "dispatcherController/doLogin.do",
            data :{
               //向后台发送数据
                "loginacct" : floginacct.val(),
                "userpswd" : fuserpswd.val(),
                 "type" : ftype.val()
            },
            beforeSend : function () {//登录前的操作
                loadingIndex = layer.msg('Logging', {icon: 16});
                return true;
            },
            success : function (result) {//登录成功的操作
               if(result.success){
                   //alert("登录成功！");
                   layer.close(loadingIndex);
                   //跳转到前台/后台页面
                   window.location.href="dispatcherController/main.htm";
               }else {//登录失败的操作
                   //alert("登录失败！");
                   layer.msg("登录失败!请重新尝试！", {time:1000, icon:5, shift:6}); //弹出时间，图标，特效

               }
            },
            error : function (result) {//出现异常的操作
                //alert(result.message);
                layer.msg(result.message, {time:1000, icon:5, shift:6}); //弹出时间，图标，特效
            }
        });

启动服务器查看效果

同步请求方式实现用户分页查询

我们知道可以使用sql语句：

select * from t_user limit ?,?

第一个？表示开始查询的记录，第二个？表示查询条数。那么我们可以通过该语句查询出某一页的用户数据。

首先应该在common工程的util包下创建一个分页 Page 的实体类，其属性应该有：currentPage（当前页面），totalCount（查询出来的用户总数），PageCount（总页面数），currentCount（当前页面展示的用户数目），users（查询出的用户数据）。
其中currentPage和currentCount应该封装在请求头中，以便服务器获取查询当前页面的用户开始记录和当前页面用户总条数。

public class Page {

    private Integer currentPage;//当前页面
    private Integer totalCount;//总数目
    private Integer PageCount;//总页数
    private Integer currentCount;//当前页总数目

    List<User> users;//查询的用户数据

    public Page(Integer currentPage,Integer currentCount) {
        if (currentPage<=0){
            this.currentPage=1;
        }else {
            this.currentPage = currentPage;
        }
        if (currentCount<=0){
            this.currentCount=10;
        }else {
            this.currentCount=currentCount;
        }
    }

    public Integer getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(Integer currentPage) {
        this.currentPage = currentPage;
    }

    public Integer getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(Integer totalCount) {
        this.totalCount = totalCount;
        /**
         * 计算出总页面数
         */
        this.PageCount= (totalCount%currentCount)==0?(totalCount/currentCount):(totalCount/currentCount+1);
    }

    public Integer getPageCount() {
        return PageCount;
    }

    private void setPageCount(Integer totalPage) {
        this.PageCount = totalPage;
    }

    public Integer getCurrentCount() {
        return currentCount;
    }

    public void setCurrentCount(Integer currentCount) {
        this.currentCount = currentCount;
    }

    public Integer getStartIndex(){
        /**
         * 计算出当前页面开始查询的记录索引位置
         */
        return (currentPage-1)*currentCount;
    }

    public List<User> getUsers() {
        return users;
    }

    public void setUsers(List<User> users) {
        this.users = users;
    }
}

编写UserCotroller代码用于接收前端数据进行查询操作并指定页面跳转和回传数据。

@Controller
@RequestMapping(value = "userController")
public class UserController {
    @Autowired
    private UserService userService;
    /**
     *
     * @return
     */
    @RequestMapping(value = "/userList")
    public String userList(@RequestParam(value = "currentPage",required = false,defaultValue = "1") Integer currentPage,
                           @RequestParam(value = "currentCount",required = false,defaultValue = "10") Integer currentCount,
                           Map map){
        Page page = userService.queryUserList(currentPage, currentCount);
        map.put("page",page);
        return "user/userList";
    }
}

补充service层和dao层的方法。

service

    public Page queryUserList(Integer currentPage, Integer currentCount) {
        Page page = new Page(currentPage, currentCount);
        List<User> userList = userMapper.queryUserList(page.getStartIndex(), currentCount);
        page.setUsers(userList);
        Integer totalCount = userMapper.queryUserCount();
        page.setTotalCount(totalCount);
        return page;

    }

dao

Integer queryUserCount();

    List<User> queryUserList(@Param("startIndex") Integer startIndex, @Param("currentCount") Integer currentCount);

其中我们没有对方法的参数进行封装，所以不能使用parameterType向sql语句输入多个参数，故在此使用@Param注解实现参数传递；其中@Param(“Index”)中的Index必须和sql语句一致，如对应的Mapper.xml中的查询语句：

  <select id="queryUserCount" resultType="int">
    select count(*) from t_user
  </select>
  
  <select id="queryUserList" resultType="com.bin.crowdfunding.bean.User">
    select * from t_user limit #{startIndex} ,#{currentCount}
  </select>

最后就是在前端页面接收查询出的数据并进行渲染了。

在jsp文件夹下创建user文件夹，新建userList.jsp，将以下代码复制到userList.jsp中

<%--
  Created by IntelliJ IDEA.
  User: 黄彬
  Date: 2020/5/29
  Time: 23:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>"/>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
        table tbody tr:nth-child(odd){background:#F4F4F4;}
        table tbody td:nth-child(even){color:#C00;}
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 用户维护</a></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li style="padding-top:8px;">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-success dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-user"></i> ${sessionScope.user.username} <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 个人设置</a></li>
                            <li><a href="#"><i class="glyphicon glyphicon-comment"></i> 消息</a></li>
                            <li class="divider"></li>
                            <li><a href="index.html"><i class="glyphicon glyphicon-off"></i> 退出系统</a></li>
                        </ul>
                    </div>
                </li>
                <li style="margin-left:10px;padding-top:8px;">
                    <button type="button" class="btn btn-default btn-danger">
                        <span class="glyphicon glyphicon-question-sign"></span> 帮助
                    </button>
                </li>
            </ul>
            <form class="navbar-form navbar-right">
                <input type="text" class="form-control" placeholder="Search...">
            </form>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <ul style="padding-left:0px;" class="list-group">
                    <li class="list-group-item tree-closed" >
                        <a href="main.html"><i class="glyphicon glyphicon-dashboard"></i> 控制面板</a>
                    </li>
                    <li class="list-group-item">
                        <span><i class="glyphicon glyphicon glyphicon-tasks"></i> 权限管理 <span class="badge" style="float:right">3</span></span>
                        <ul style="margin-top:10px;">
                            <li style="height:30px;">
                                <a href="user.html" style="color:red;"><i class="glyphicon glyphicon-user"></i> 用户维护</a>
                            </li>
                            <li style="height:30px;">
                                <a href="role.html"><i class="glyphicon glyphicon-king"></i> 角色维护</a>
                            </li>
                            <li style="height:30px;">
                                <a href="permission.html"><i class="glyphicon glyphicon-lock"></i> 许可维护</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-ok"></i> 业务审核 <span class="badge" style="float:right">3</span></span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="auth_cert.html"><i class="glyphicon glyphicon-check"></i> 实名认证审核</a>
                            </li>
                            <li style="height:30px;">
                                <a href="auth_adv.html"><i class="glyphicon glyphicon-check"></i> 广告审核</a>
                            </li>
                            <li style="height:30px;">
                                <a href="auth_project.html"><i class="glyphicon glyphicon-check"></i> 项目审核</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed">
                        <span><i class="glyphicon glyphicon-th-large"></i> 业务管理 <span class="badge" style="float:right">7</span></span>
                        <ul style="margin-top:10px;display:none;">
                            <li style="height:30px;">
                                <a href="cert.html"><i class="glyphicon glyphicon-picture"></i> 资质维护</a>
                            </li>
                            <li style="height:30px;">
                                <a href="type.html"><i class="glyphicon glyphicon-equalizer"></i> 分类管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="process.html"><i class="glyphicon glyphicon-random"></i> 流程管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="advertisement.html"><i class="glyphicon glyphicon-hdd"></i> 广告管理</a>
                            </li>
                            <li style="height:30px;">
                                <a href="message.html"><i class="glyphicon glyphicon-comment"></i> 消息模板</a>
                            </li>
                            <li style="height:30px;">
                                <a href="project_type.html"><i class="glyphicon glyphicon-list"></i> 项目分类</a>
                            </li>
                            <li style="height:30px;">
                                <a href="tag.html"><i class="glyphicon glyphicon-tags"></i> 项目标签</a>
                            </li>
                        </ul>
                    </li>
                    <li class="list-group-item tree-closed" >
                        <a href="param.html"><i class="glyphicon glyphicon-list-alt"></i> 参数管理</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询</button>
                    </form>
                    <button type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i class=" glyphicon glyphicon-remove"></i> 删除</button>
                    <button type="button" class="btn btn-primary" style="float:right;" onclick="window.location.href='add.html'"><i class="glyphicon glyphicon-plus"></i> 新增</button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <table class="table  table-bordered">
                            <thead>
                            <tr >
                                <th width="30">#</th>
                                <th width="30"><input type="checkbox"></th>
                                <th>账号</th>
                                <th>名称</th>
                                <th>邮箱地址</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${page.users}" var="user" varStatus="status">
                                <tr>
                                    <td>${status.count}</td>
                                    <td><input type="checkbox"></td>
                                    <td>${user.loginacct}</td>
                                    <td>${user.username}</td>
                                    <td>${user.email}</td>
                                    <td>
                                        <button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check"></i></button>
                                        <button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil"></i></button>
                                        <button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove"></i></button>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                            <tfoot>
                            <tr >
                                <td colspan="6" align="center">
                                    <ul class="pagination">
                                        <c:if test="${page.currentPage==1}" >
                                            <li class="disabled"><a href="#">上一页</a> </li>
                                        </c:if>
                                        <c:if test="${page.currentPage!=1}">
                                            <li ><a href="userController/userList.do?currentPage=${page.currentPage-1}" onclick="pageChange(${page.currentPage-1})">上一页</a> </li>
                                        </c:if>

                                        <c:forEach begin="1" end="${page.pageCount}" var="num">
                                            <li
                                                <c:if test="${page.currentPage==num }">
                                                        class="active"
                                            </c:if>
                                                ><a href="userController/userList.do?currentPage=${num}" onclick="pageChange(${num})">${num}</a> </li>
                                        </c:forEach>
                                        <c:if test="${page.currentPage==page.pageCount}" >
                                            <li class="disabled"><a href="#">下一页</a> </li>
                                        </c:if>
                                        <c:if test="${page.currentPage!=page.pageCount}">
                                            <li ><a href="userController/userList.do?currentPage=${page.currentPage+1}" onclick="pageChange(${page.currentPage+1})">下一页</a> </li>
                                        </c:if>
<%--                                        <li class="disabled"><a href="#">上一页</a></li>--%>
<%--                                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>--%>
<%--                                        <li><a href="#">2</a></li>--%>
<%--                                        <li><a href="#">3</a></li>--%>
<%--                                        <li><a href="#">4</a></li>--%>
<%--                                        <li><a href="#">5</a></li>--%>
<%--                                        <li><a href="#">下一页</a></li>--%>
                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="jquery/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="script/docs.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
    });
    $("tbody .btn-success").click(function(){
        window.location.href = "assignRole.html";
    });
    $("tbody .btn-primary").click(function(){
        window.location.href = "edit.html";
    });
    function pageChange(currentPage) {
        window.location.href="${APP_PATH}/userController/userList.do?currentPage="+currentPage;
    }
        </script>
    </body>
</html>

修改主页面main.jsp中的跳转路径

在测试前首先应该添加足够的测试数据
我们在test/java测试文件夹下新建test.java，用于快速创建测试数据

public class Test1 {

    @Test
    public void insert(){
        ApplicationContext applicationContext=new ClassPathXmlApplicationContext("spring/spring*.xml");
        UserService userService = applicationContext.getBean(UserService.class);
        for (int i=0;i<=100;i++){
            User user = new User();
            user.setUserpswd("123"+i);
            Date date = new Date();
            user.setCreatetime("2020-05-30 16:30：00");
            user.setLoginacct("bin"+i);
            user.setUsername("bin"+i);
            user.setEmail("bin"+i+"@163.com");
            userService.insert(user);
        }
    }
}

成功插入数据

启动服务器测试。



可以看到分页功能正常。

谢谢阅读。