JAVA 框架 DAY-3

Java_Xjc

已于 2022-08-03 20:21:26 修改

阅读量260

点赞数

于 2022-08-03 19:29:09 首次发布

本文链接：https://blog.csdn.net/m0_56017821/article/details/126133438

版权

在UserService接口中定义抽象方法

在UserService接口实现类UserServiceImpl中实现selectPage方法

在UserController类中定义Page方法

在jsp中创建public目录（放公共目录）

在public目录中创建PageBar.jsp（可以被复用）

在jsp中创建user子目录（作user模块的jsp）

安装lombok依赖

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

提供 @Data注解

用于注解实体类编译时动态添加 setter/getter/toString方法重写equals 和hashCode方法

Wrapper 子句构造器父类

子类用子类构造对象

1.QueryWrapper<T> 作为where子句的构造器

2.UpdateWrapper<T> 修改set子句的构造器

IPage分页器

Page类

不同数据库的分页SQL语句不一样，需要告诉框架用的是什么数据库

MySQL：limit ？，？

Oracle：基于rownum做子查询

在启动类中添加即可告诉MyBatis 使用的是MySQL数据库

封装

框架-前后端整合完成用户列表查询

1.环境

创建web目录安装jsp和jstl依赖（3个）

配置打包web目录/resources目录

配置资源文件

2.Entity 实体类

创建基础类

创建实体类User

3.Page包分页查询类

4.Mapper包创建接口

创建接口UserMapper

5.Service包业务逻辑代码

创建接口UserService

创建子包impl

在子包impl中创建实现类UserServiceImpl 实现UserService接口

6.Controller包

创建UserController 控制器类

在UserService接口中定义抽象方法

在UserService接口实现类UserServiceImpl中实现selectPage方法

在UserController类中定义Page方法

在jsp中创建public目录（放公共目录）

在public目录中创建PageBar.jsp（可以被复用）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script src="../../jQuery/jquery-3.6.0.min.js"></script>
<script>
    $(function(){
        $('.page-btn').click(function (){
            var current = $(this).data('current'); //用jQuery的data函数获取当前元素身上绑定的数据
            goPage(current);
        })
        // go按钮的click事件
        $("#btn-go").click(function (){
            var current = $('#goPageNo').val().trim() // 获取用户输入的页号，并用trim()去除字符串两端空格
            goPage(current)
        })
        // sizeSelect下拉框change事件
        $('#sizeSelect').change(function (){
            var size = $(this).val();// 获取用户选择的下来选项中的value
            $('#size').val(size);// 更新form表单中的隐藏域size
            var current = $(this).data('current');
            goPage(current);
        })
        // go输入框的键盘up事件, 每次在go输入框的键盘up以后, 校验输入的页号是否正确
        $('#goPageNo').keyup(function (){
            // 检查用户输入的内容, 只能是数字, 不能小于1, 不能大于pages
            var pageNo = $(this).val(); // 获取用户输入的页面
            if(!pageNo){
                return;
            }
            // 用isNaN()函数判断输入的内容是不是一个数字 如果参数是一个数字,返回false, 如果不是数字, 返回true
            if(isNaN(pageNo)){
                $(this).val(''); // 不是数字用把输入框内容置为'', 如何return
                return;
            }
            if(pageNo < 1){ // 如果上面没有resturn说明是数字, 判断是否小于1, 如果小于1就置为1
                $(this).val(1)
                return;
            }
            var pages = $(this).data('pages') // 获取go输入框身上绑定的最大页数
            if(pageNo > pages){ // 判断输入的数字是否>最大页数, 如果大于最大页数, 就置为最大页数
                $(this).val(pages)
            }
        })
        // 所有的分页按钮和go按钮都调用的函数
        function goPage(current){
            var size = $('#size').val();
            var username = $('#username').val(); // 用id选择器去form表单中获取value
            var mobile = $('#mobile').val(); // 用id选择器去form表单中获取value
            var idCode = $('#idCode').val(); // 用id选择器去form表单中获取value
            // 用location.href修改浏览器地址栏实现跳转地址到后的Servlet
            location.href = "/user/page?current=" + current + "&size=" + size
                + "&username=" + username + "&mobile=" + mobile
                + "&idCode=" + idCode;
        }
    })
</script>
<div class="panel-footer" style="display: flex; justify-content: space-between; align-items: center">
  <c:if test="${not empty records}">
    <h5 class="form-inline">
      一共查询到${total}条数据,当前是第${current}/${pages}页
      <select id="sizeSelect" class="form-control" style="width: 100px"
              data-current="${current}">
        <option value="5" ${size==5?'selected':''}>5</option>
        <option value="10" ${size==10?'selected':''}>10</option>
        <option value="15" ${size==15?'selected':''}>15</option>
        <option value="20" ${size==20?'selected':''}>20</option>
        <option value="100" ${size==100?'selected':''}>100</option>
      </select>
    </h5>
    <nav aria-label="Page navigation">
      <ul class="pagination">
        <li>
          <a href="#!" class="page-btn" data-current="${current-1<1?1:current-1}">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        <c:forEach var="i" step="1"
                   begin="${current-3<1 ? 1:current-3 }"
                   end="${current-1}">
          <li><a href="#!" class="page-btn" data-current="${i}">${i}</a></li>
        </c:forEach>
        <li class="active"><a href="#!" class="page-btn" data-current="${current}">${current}</a></li>
        <c:forEach var="i" step="1"
                   begin="${current+1}"
                   end="${current+3>pages?pages:current+3}">
          <li><a href="#!" class="page-btn" data-current="${i}">${i}</a></li>
        </c:forEach>
        <li>
          <a href='#!' class="page-btn" data-current="${current+1>pages?pages:current+1}">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
        <li class="form-inline">
          <input type="text" data-pages="${pages}" class="form-control" id="goPageNo"
                 style="width: 90px;margin-left: 5px" placeholder="输入页码">
          <button class="btn btn-primary btn-sm" id="btn-go">GO</button>
        </li>
      </ul>
    
    </nav>
  </c:if>
</div>

在jsp中创建user子目录（作user模块的jsp）

在user目录中创建page.jsp，作具体用户列表的页面设计

在page.jsp中引入bootstrap.css和jquery.js

底部分页等功能直接调用封装的PageBar

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>Title</title>
  <link rel="stylesheet" href="../../bootstrap-3.4.1/dist/css/bootstrap.css">
  <script src="../../jQuery/jquery-3.6.0.js"></script>
</head>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="panel panel-primary">
        <div class="panel-heading">用户列表</div>
        <div class="panel-body">
          <form action="/user/page" class="form-inline">
            <div class="form-group">
              <label for="username">Username</label>
              <input type="text" class="form-control" id="username" name="username" value="${username}" placeholder="支持模糊查询">
            </div>
            <div class="form-group">
              <label for="mobile">Mobile</label>
              <input type="text" class="form-control" id="mobile" name="mobile" value="${mobile}" placeholder="支持模糊查询">
            </div>
            <div class="form-group">
              <label for="idCode">IdCode</label>
              <input type="text" class="form-control" id="idCode" name="idCode" value="${idCode}" placeholder="支持模糊查询">
            </div>
            <div class="form-group">
              <input type="hidden" id="size" name="size" value="${size}"/>
            </div>
            <button type="submit" class="btn btn-primary">查询</button>
          </form>
          <c:if test="${empty records}">
            <div class="jumbotron" style="text-align: center">暂无数据</div>
          </c:if>
          <c:if test="${not empty records}">
            <table class="table table-striped table-bordered table-hover">
              <thead>
              <th>用户编号</th>
              <th>用户名</th>
              <th>性别</th>
              <th>手机号码</th>
              <th>身份证号码</th>
              </thead>
              <tbody>
              <c:forEach items="${records}" var="user">
                <tr>
                  <td>${user.id}</td>
                  <td>${user.username}</td>
                  <td>${user.sex}</td>
                  <td>${user.mobile}</td>
                  <td>${user.idCode}</td>
                </tr>
              </c:forEach>
              </tbody>
            </table>
          </c:if>
        </div>
        <%@include file="../public/PageBar.jsp"%>
      </div>
    </div>
  </div>
</div>
</body>
</html>