社团签到项目ssm整合巩固

于 2021-06-11 15:20:40 发布
阅读量140 收藏
点赞数
分类专栏： ssm整合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a_leafs/article/details/117818573
版权

2021 06 03

  • 实现管理员端的异步数据查询（分页，查询所有，根据名字查询，模糊查询）

    1. 查询所有 ： 前端在浏览器页面加载完成后 使用ajax异步请求/findAll请求

      注意500异常：原因为传递参数时传递currentPage=0 导致startPage为负数 出现sql异常

      1. 前端

        function init(){
  $.post({
    url:"${pageContext.request.contextPath}/signMessage/findAll",
    data: {currentPage: "1"},
    success:function (data) {
      let dataObject = eval(data);
      console.log(dataObject)
    }
  })
}

      2. /findAll请求

        @RequestMapping("/findAll")
public String findAll(String currentPage) throws JsonProcessingException {
HashMap<String,Integer> map = new HashMap<String, Integer>();
//        进行前端参数传递的判断  如果传递的是小于1的数字 初始化为1
int currentPage_Int = Integer.parseInt(currentPage);
if (currentPage_Int <= 0){
currentPage_Int = 1;
}
int pageSize = 10;
int startIndex =  pageSize * (currentPage_Int - 1);
map.put("startIndex",startIndex);
map.put("pageSize",pageSize);

List<SignMessage> message = messageService.getMessage(map);
ObjectMapper mapper = new ObjectMapper();
return mapper.writeValueAsString(message);
}

    2. 根据名字查询

      1. 前端：(涉及到 从数据库中查询到的时间戳转换为正常的时间前端展示 )

        1. 异步查询
        function searchMessage(){
    $.post({
        url:"${pageContext.request.contextPath}/signMessage/findMessageByUsername",
        data:{
            username:$("#message").val(),
            currentPage:"1"
        },
        success:function (data) {
            var data2 = eval(data)

            let content = "   <tr>\n" +
                "                <th>姓名</th>\n" +
                "                <th>签到时间</th>\n" +
                "            </tr>";
            for(var i in data2)
            {
                if (i%2==0){
                    content +=  "<tr class='active'>";
                    content +=  "<td>" + $("#message").val() + "</td>"
                    content +=  "<td>" + getMyDate(data2[i].scanTime) + "</td>";
                    content +=  "</tr>"
                    // console.log($("#message").val() +" : "+ getMyDate(data2[i].scanTime))
                }else {
                    content +=  "<tr>";
                    content +=  "<td>" + $("#message").val() + "</td>"
                    content +=  "<td>" + getMyDate(data2[i].scanTime) + "</td>";
                    content +=  "</tr>"
                }

            }
            $("#messageTable").html(content)
        }
    })
}
        1. 时间戳转换
        function getMyDate(str){
    var oDate = new Date(str),
        oYear = oDate.getFullYear(),
        oMonth = oDate.getMonth()+1,
        oDay = oDate.getDate(),
        oHour = oDate.getHours(),
        oMin = oDate.getMinutes(),
        oSen = oDate.getSeconds(),
        oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
    return oTime;
};
//补0操作
function getzf(num){
    if(parseInt(num) < 10){
        num = '0'+num;
    }
    return num;
}

      2. 后端. /findMessageByUsername

         @RequestMapping("/findMessageByUsername")
    public String findMessageByUsername(String username,String currentPage) throws JsonProcessingException {
        HashMap<String,Integer> map = new HashMap<String, Integer>();
        int currentPage_Int = Integer.parseInt(currentPage);
        if (currentPage_Int <= 0){
            currentPage_Int = 1;
        }
        int pageSize = 10;
        int startIndex =  pageSize * (currentPage_Int - 1);
        map.put("startIndex",startIndex);
        map.put("pageSize",pageSize);
        if (messageService.getMessageByName(username, map)==null) {
//            如果查询出来的集合为null
            return "";
        }
        ObjectMapper mapper = new ObjectMapper();
        List<SignMessage> message = messageService.getMessageByName(username, map);
        String json = mapper.writeValueAsString(message);
        System.out.println(json);
        return json;
    }

2021 06 05

  • 管理员页面的全部签到信息分页展示

  • 管理员页面的根据学员名称查询签到信息分页展示 （ 待优化 ）

    <script>
 let currentPage = 1;

    function Next(currentPage,totalPage) {
        currentPage += 1;
        if (currentPage > totalPage){
            currentPage = totalPage;
        }
        //请求一个异步 把当前页码传递到后台 要获取到当前页码对应的信息 并且遍历
        $.post({
            url:"${pageContext.request.contextPath}/signMessage/findAll",
            data: {currentPage: currentPage},
            success:function (data) {
                let dataObject = JSON.parse(data).signMessages
                let data2 = JSON.parse(data);
                let currentPage = data2.currentPage;
                // 循环展示页码
                //获取当前页码 从当前页码的前两个到当前页码的后两个
                let rowsBoundConfig = " <li>\n" +
                    "                    <a οnclick=\"Previous("+currentPage+")\" aria-label=\"Previous\">\n" +
                    "                        <span aria-hidden=\"true\">&laquo;上一页</span>\n" +
                    "                    </a>\n" +
                    "                </li>";
                if(data2.currentPage > 3){
                    for (let i = data2.currentPage - 2; i <= data2.currentPage + 2&& i <= data2.totalPage ;i++){
                        if (data2.currentPage === i){
                            rowsBoundConfig +=  "<li class='active'><a href=\"#\">"+i+"</a></li>"
                        }else{
                            rowsBoundConfig +=  "<li><a href=\"#\">"+i+"</a></li>"
                        }
                    }
                }else {
                    for (let i = 1; i <= 5 && i <= data2.totalPage ;i++){
                        if (data2.currentPage === i){
                            rowsBoundConfig +=  "<li class='active'><a href=\"#\">"+i+"</a></li>"
                        }else{
                            rowsBoundConfig +=  "<li><a href=\"#\">"+i+"</a></li>"
                        }
                    }
                }
                rowsBoundConfig += " <li>\n" +
                "                    <a οnclick=\"Next(" + currentPage + ")\" aria-label=\"Next\">\n" +
                "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                "                    </a>\n" +
                "                </li>"
                $("#rowsBoundConfig").html(rowsBoundConfig)
                init(currentPage)
            }
        })
    }
    function Previous(currentPage) {
        currentPage -= 1;
        if (currentPage <= 1 ){
            currentPage = 1;
        }
        //请求一个异步 把当前页码传递到后台 要获取到当前页码对应的信息 并且遍历
        $.post({
            url:"${pageContext.request.contextPath}/signMessage/findAll",
            data: {currentPage: currentPage},
            success:function (data) {
                let dataObject = JSON.parse(data).signMessages
                let data2 = JSON.parse(data);
                let currentPage = data2.currentPage;
                // 循环展示页码
                //获取当前页码 从当前页码的前两个到当前页码的后两个
                let rowsBoundConfig = " <li>\n" +
                    "                    <a οnclick=\"Previous(" + currentPage + ")\" aria-label=\"Previous\">\n" +
                    "                        <span aria-hidden=\"true\">&laquo;上一页</span>\n" +
                    "                    </a>\n" +
                    "                </li>";
                if(data2.currentPage > 3){
                    for (let i = currentPage - 2; i <= currentPage + 2&& i <= data2.totalPage ;i++){
                        if (data2.currentPage === i){
                            rowsBoundConfig +=  "<li class='active'><a href=\"#\">"+i+"</a></li>"
                        }else{
                            rowsBoundConfig +=  "<li><a href=\"#\">"+i+"</a></li>"
                        }

                    }
                }else {
                    for (let i = 1; i <= 5 && i <= data2.totalPage ;i++){
                        if (data2.currentPage === i){
                            rowsBoundConfig +=  "<li class='active'><a href=\"#\">"+i+"</a></li>"
                        }else{
                            rowsBoundConfig +=  "<li><a href=\"#\">"+i+"</a></li>"
                        }

                    }
                }
                if (currentPage === data2.totalPage){
                    rowsBoundConfig += " <li>\n" +
                        "                    <a class=\"btn btn-primary btn-lg disabled\' οnclick=\"Next(" + currentPage + ")\" aria-label=\"Next\">\n" +
                        "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                        "                    </a>\n" +
                        "                </li>"
                }else {
                    rowsBoundConfig += " <li>\n" +
                        "                    <a οnclick=\"Next(" + currentPage + ")\" aria-label=\"Next\">\n" +
                        "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                        "                    </a>\n" +
                        "                </li>"
                }

                $("#rowsBoundConfig").html(rowsBoundConfig)
                init(currentPage)
            }
        })

    }


     function loadByPageNumber(currentPage){
         init(currentPage)
     }
     function loadByPageNumber_s(currentPage){
         searchMessage(currentPage)
     }
    function getMyDate(str){
            var oDate = new Date(str),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth()+1,
                oDay = oDate.getDate(),
                oHour = oDate.getHours(),
                oMin = oDate.getMinutes(),
                oSen = oDate.getSeconds(),
                oTime = oYear +'-'+ getzf(oMonth) +'-'+ getzf(oDay) +' '+ getzf(oHour) +':'+ getzf(oMin) +':'+getzf(oSen);//最后拼接时间
            return oTime;
        };
        //补0操作
    function getzf(num){
            if(parseInt(num) < 10){
                num = '0'+num;
            }
            return num;
        }
        // 在网页加载完毕后 执行加载全部签到信息的异步查询
    function init(currentPage){
            console.log('init come.. ')
          $.post({
              url:"${pageContext.request.contextPath}/signMessage/findAll",
              data: {currentPage: currentPage},
              success:function (data) {
                  let dataObject = JSON.parse(data).signMessages
                  let data2 = JSON.parse(data);
                  let rowsBoundConfig = "";

                  if (typeof(currentPage) === undefined){
                      currentPage = 1;
                      alert(typeof(currentPage) === undefined)
                  }
                  if (currentPage !== 1){
                      rowsBoundConfig += " <li>\n" +
                          "                    <a οnclick=\"Previous("+data2.currentPage+")\" aria-label=\"Previous\">\n" +
                          "                        <span aria-hidden=\"true\">&laquo;上一页</span>\n" +
                          "                    </a>\n" +
                          "                </li>";
                  }else {
                      rowsBoundConfig += " <li>\n" +
                          "                    <a class=\"btn btn-primary btn-lg disabled\" οnclick=\"Previous("+data2.currentPage+")\" aria-label=\"Previous\">\n" +
                          "                        <span aria-hidden=\"true\">&laquo;上一页</span>\n" +
                          "                    </a>\n" +
                          "                </li>";
                  }


                  if(data2.currentPage > 3){
                      for (let i = currentPage - 2; i <= currentPage + 2&& i <= data2.totalPage ;i++){
                          if (data2.currentPage === i){
                              rowsBoundConfig +=  "<li οnclick=loadByPageNumber("+ i +") class='active'><a href=\"#\">"+i+"</a></li>"
                          }else{
                              rowsBoundConfig +=  "<li οnclick=loadByPageNumber("+ i +") ><a href=\"#\">"+i+"</a></li>"
                          }

                      }
                  }else {
                      for (let i = 1; i <= 5 && i <= data2.totalPage ;i++){
                          if (data2.currentPage === i){
                              rowsBoundConfig +=  "<li  οnclick=loadByPageNumber("+ i +") class='active'><a href=\"#\">"+i+"</a></li>"
                          }else{
                              rowsBoundConfig +=  "<li οnclick=loadByPageNumber("+ i +") ><a href=\"#\">"+i+"</a></li>"
                          }

                      }
                  }
                  // rowsBoundConfig += " <li>\n" +
                  //     "                    <a οnclick=\"Next("+ data2.currentPage +","+ data2.totalPage +")\" aria-label=\"Next\">\n" +
                  //     "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                  //     "                    </a>\n" +
                  //     "                </li>"


                  if (currentPage === data2.totalPage){
                      rowsBoundConfig += " <li>\n" +
                          "                    <a   class=\"btn btn-primary btn-lg disabled\" οnclick=\"Next("+ data2.currentPage +","+ data2.totalPage +")\" aria-label=\"Next\">\n" +
                          "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                          "                    </a>\n" +
                          "                </li>"
                  }else {
                      rowsBoundConfig += " <li>\n" +
                          "                    <a οnclick=\"Next("+ data2.currentPage +","+ data2.totalPage +")\" aria-label=\"Next\">\n" +
                          "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                          "                    </a>\n" +
                          "                </li>"
                  }
                  $("#rowsBoundConfig").html(rowsBoundConfig)

                  //有多少页
                  $("#totalPage").html("共有 "+ (data2.totalPage) +" 页")
                  let html =  "   <tr>\n" +
                      "                <th>姓名</th>\n" +
                      "                <th>签到时间</th>\n" +
                      "            </tr>";

                  for (let i in dataObject){
                      if (i%2==0){
                          html +=  "<tr class='active'>";
                          html +=  "<td>" + dataObject[i].account.username + "</td>"
                          html +=  "<td>" + getMyDate(dataObject[i].scanTime) + "</td>";
                          html +=  "</tr>"
                          // console.log($("#message").val() +" : "+ getMyDate(data2[i].scanTime))
                      }else {
                          html +=  "<tr>";
                          html +=  "<td>" + dataObject[i].account.username + "</td>"
                          html +=  "<td>" + getMyDate(dataObject[i].scanTime) + "</td>";
                          html +=  "</tr>"
                      }
                  }
                  $("#messageTable").html(html)
              }
          })
            console.log('init go.. ')
      }
/** 查询之后的分页
 *  - 第一次加载 查询前五页 并且 向下一页的onclick方法中传递参数 （username, currentPage）
 *  - 异步查询 根据username和currentPage 查询
 * */

      let currentPage_s = 1;

         function Previous_s(currentPage_s) {
             console.log("Previous_s : " + currentPage_s)
             searchMessage(currentPage_s-1)
         }
         function Next_s(currentPage_s) {
             console.log("next_s : " + currentPage_s)
             searchMessage(currentPage_s+1)
         }
         // 与init之间可以互相调用
        function searchMessage(currentPage_s){
                 console.log("currentPage_s:"+currentPage_s )

            if (typeof(currentPage_s) == 'undefined'){
                currentPage_s = 1;
            }
            let username_s = $("#message").val()
            $.post({
                url:"${pageContext.request.contextPath}/signMessage/findMessageByUsername",
                data:{
                    username:username_s,
                    currentPage:currentPage_s
                },
                success:function (data) {
                    var data2 =JSON.parse(data)
                    let messageObject = JSON.parse(data).signMessages
                    let content = "   <tr>\n" +
                        "                <th>姓名</th>\n" +
                        "                <th>签到时间</th>\n" +
                        "            </tr>";
                    for(var i in messageObject)
                    {
                        if (i%2===0){
                            content +=  "<tr class='active'>";
                            content +=  "<td>" + $("#message").val() + "</td>"
                            content +=  "<td>" + getMyDate(messageObject[i].scanTime) + "</td>";
                            content +=  "</tr>"
                            // console.log($("#message").val() +" : "+ getMyDate(data2[i].scanTime))
                        }else {
                            content +=  "<tr>";
                            content +=  "<td>" + $("#message").val() + "</td>"
                            content +=  "<td>" + getMyDate(messageObject[i].scanTime) + "</td>";
                            content +=  "</tr>"
                        }

                    }
                    $("#messageTable").html(content)

                    let rowsBoundConfig="";
                    if (currentPage_s !== 1){
                        rowsBoundConfig += " <li>\n" +
                            "                    <a οnclick=\"Previous_s("+currentPage_s+")\" aria-label=\"Previous\">\n" +
                            "                        <span aria-hidden=\"true\">&laquo;上一页</span>\n" +
                            "                    </a>\n" +
                            "                </li>";
                    }else {
                        rowsBoundConfig += " <li>\n" +
                            "                    <a class=\"btn btn-primary btn-lg disabled\" οnclick=\"Previous_s("+currentPage_s+")\" aria-label=\"Previous\">\n" +
                            "                        <span aria-hidden=\"true\">&laquo;上一页</span>\n" +
                            "                    </a>\n" +
                            "                </li>";
                    }


                    if(currentPage_s > 3){
                        for (let i = currentPage_s - 2; i <= currentPage_s + 2&& i <= data2.totalPage ;i++){
                            if (data2.currentPage === i){
                                rowsBoundConfig +=  "<li οnclick=loadByPageNumber_s("+ i +") class='active'><a href=\"#\">"+i+"</a></li>"
                            }else{
                                rowsBoundConfig +=  "<li οnclick=loadByPageNumber_s("+ i +") ><a href=\"#\">"+i+"</a></li>"
                            }

                        }
                    }else {
                        for (let i = 1; i <= 5 && i <= data2.totalPage ;i++){
                            if (data2.currentPage === i){
                                rowsBoundConfig +=  "<li  οnclick=loadByPageNumber_s("+ i +") class='active'><a href=\"#\">"+i+"</a></li>"
                            }else{
                                rowsBoundConfig +=  "<li οnclick=loadByPageNumber_s("+ i +") ><a href=\"#\">"+i+"</a></li>"
                            }

                        }
                    }
                    if (currentPage_s === data2.totalPage){
                        rowsBoundConfig += " <li>\n" +
                            "                    <a   class=\"btn btn-primary btn-lg disabled\" οnclick=\"Next_s("+ currentPage_s +","+ data2.totalPage +")\" aria-label=\"Next\">\n" +
                            "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                            "                    </a>\n" +
                            "                </li>"
                    }else {
                        rowsBoundConfig += " <li>\n" +
                            "                    <a οnclick=\"Next_s("+ currentPage_s +","+ data2.totalPage+ ")\" aria-label=\"Next\">\n" +
                            "                        <span aria-hidden=\"true\">下一页&raquo;</span>\n" +
                            "                    </a>\n" +
                            "                </li>"
                    }
                    $("#rowsBoundConfig").html(rowsBoundConfig)
                    $("#totalPage").html("共有 "+ data2.totalPage +" 页")
                }
            })
        }


</script>

  • 普通用户登陆页面的拦截器设置

  • 管理员页面的拦截器设置

子子new子
关注
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值