分页查询

章节项目目录

项目基础类

entity

public class StudentInfo implements Serializable {
    private static final long serialVersionUID = 1L;

    /**
     * 主键唯一标识
     */
    private String id;

    /**
     * 姓名
     */
    private String name;

    /**
     * 所属学校
     */
    private String schoolId;

    /**
     * 所属学院
     */
    private String academyId;

    /**
     * 出生日期
     */
    private String birthday;

    /**
     * 学号
     */
    private String stuNo;

    /**
     * 性别
     */
    private String sex;

    /**
     * 描述
     */
    private String remarks;

    /**
     * 创建时间
     */
    private LocalDateTime createTime;

    /**
     * 创建人ID
     */
    private String createUserId;

    /**
     * 创建人
     */
    private String createUser;

    /**
     * 更新时间
     */
    private LocalDateTime updateTime;

    /**
     * 更新人ID
     */
    private String updateUserId;

    /**
     * 更新人
     */
    private String updateUser;

    public void setId(String id) {
        this.id = id;
    }

    public String getId() {
        return id;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setSchoolId(String schoolId) {
        this.schoolId = schoolId;
    }

    public String getSchoolId() {
        return schoolId;
    }

    public void setAcademyId(String academyId) {
        this.academyId = academyId;
    }

    public String getAcademyId() {
        return academyId;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setStuNo(String stuNo) {
        this.stuNo = stuNo;
    }

    public String getStuNo() {
        return stuNo;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getSex() {
        return sex;
    }

    public void setRemarks(String remarks) {
        this.remarks = remarks;
    }

    public String getRemarks() {
        return remarks;
    }

    public void setCreateTime(LocalDateTime createTime) {
        this.createTime = createTime;
    }

    public LocalDateTime getCreateTime() {
        return createTime;
    }

    public void setCreateUserId(String createUserId) {
        this.createUserId = createUserId;
    }

    public String getCreateUserId() {
        return createUserId;
    }

    public void setCreateUser(String createUser) {
        this.createUser = createUser;
    }

    public String getCreateUser() {
        return createUser;
    }

    public void setUpdateTime(LocalDateTime updateTime) {
        this.updateTime = updateTime;
    }

    public LocalDateTime getUpdateTime() {
        return updateTime;
    }

    public void setUpdateUserId(String updateUserId) {
        this.updateUserId = updateUserId;
    }

    public String getUpdateUserId() {
        return updateUserId;
    }

    public void setUpdateUser(String updateUser) {
        this.updateUser = updateUser;
    }

    public String getUpdateUser() {
        return updateUser;
    }

    @Override
    public String toString() {
        return "StudentInfo{" +
                "id='" + id + '\'' +
                ", name='" + name + '\'' +
                ", schoolId='" + schoolId + '\'' +
                ", academyId='" + academyId + '\'' +
                ", birthday='" + birthday + '\'' +
                ", stuNo='" + stuNo + '\'' +
                ", sex='" + sex + '\'' +
                ", remarks='" + remarks + '\'' +
                ", createTime=" + createTime +
                ", createUserId='" + createUserId + '\'' +
                ", createUser='" + createUser + '\'' +
                ", updateTime=" + updateTime +
                ", updateUserId='" + updateUserId + '\'' +
                ", updateUser='" + updateUser + '\'' +
                '}';
    }

}

sdk/dto

public class StudentInfoDTO implements Serializable {
    private static final long serialVersionUID = 1L;

    /**
     * 主键唯一标识
     */
    private String id;

    /**
     * 姓名
     */
    private String name;

    /**
     * 所属学校
     */
    private String schoolId;

    /**
     * 所属学院
     */
    private String academyId;

    /**
     * 出生日期
     */
    private String birthday;

    /**
     * 学号
     */
    private String stuNo;

    /**
     * 性别
     */
    private String sex;

    /**
     * 描述
     */
    private String remarks;


    public void setId(String id) {
        this.id = id;
    }

    public String getId() {
        return id;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setSchoolId(String schoolId) {
        this.schoolId = schoolId;
    }

    public String getSchoolId() {
        return schoolId;
    }

    public void setAcademyId(String academyId) {
        this.academyId = academyId;
    }

    public String getAcademyId() {
        return academyId;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setStuNo(String stuNo) {
        this.stuNo = stuNo;
    }

    public String getStuNo() {
        return stuNo;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getSex() {
        return sex;
    }

    public void setRemarks(String remarks) {
        this.remarks = remarks;
    }

    public String getRemarks() {
        return remarks;
    }

}

sdk/query

public class StudentInfoQuery implements Serializable {
    private static final long serialVersionUID = 1L;

    /**
     * 查询页数
     */
    private Integer page;

    /**
     * 分页查询条数
     */
    private Integer limit;

    /**
     * 姓名
     */
    private String name;

    /**
     * 所属学校
     */
    private String schoolId;

    /**
     * 所属学院
     */
    private String academyId;

    /**
     * 性别
     */
    private String sex;

    public Integer getPage() {
        return page;
    }

    public void setPage(Integer page) {
        this.page = page;
    }

    public Integer getLimit() {
        return limit;
    }

    public void setLimit(Integer limit) {
        this.limit = limit;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getSchoolId() {
        return schoolId;
    }

    public void setSchoolId(String schoolId) {
        this.schoolId = schoolId;
    }

    public String getAcademyId() {
        return academyId;
    }

    public void setAcademyId(String academyId) {
        this.academyId = academyId;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }
}

sdk/vo

public class StudentInfoVO implements Serializable {
    private static final long serialVersionUID = 1L;

    /**
     * 主键唯一标识
     */
    private String id;

    /**
     * 姓名
     */
    private String name;

    /**
     * 所属学校
     */
    private String schoolId;

    /**
     * 所属学院
     */
    private String academyId;

    /**
     * 出生日期
     */
    private String birthday;

    /**
     * 学号
     */
    private String stuNo;

    /**
     * 性别
     */
    private String sex;

    /**
     * 描述
     */
    private String remarks;


    public void setId(String id) {
        this.id = id;
    }

    public String getId() {
        return id;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setSchoolId(String schoolId) {
        this.schoolId = schoolId;
    }

    public String getSchoolId() {
        return schoolId;
    }

    public void setAcademyId(String academyId) {
        this.academyId = academyId;
    }

    public String getAcademyId() {
        return academyId;
    }

    public void setBirthday(String birthday) {
        this.birthday = birthday;
    }

    public String getBirthday() {
        return birthday;
    }

    public void setStuNo(String stuNo) {
        this.stuNo = stuNo;
    }

    public String getStuNo() {
        return stuNo;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getSex() {
        return sex;
    }

    public void setRemarks(String remarks) {
        this.remarks = remarks;
    }

    public String getRemarks() {
        return remarks;
    }

}

StudentInfoController

@Controller
@RequestMapping("/student/info")
public class StudentInfoController {

    public final IStudentInfoService studentInfoService;

    public StudentInfoController(IStudentInfoService studentInfoService) {
        this.studentInfoService = studentInfoService;
    }


}

IStudentInfoService

public interface IStudentInfoService {

}

StudentInfoServiceImpl

@Service
public class StudentInfoServiceImpl implements IStudentInfoService {

}

StudentInfoMapper.xml

xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.github.itdachen.mapper.IStudentInfoMapper">

    <select id="findCount" resultType="java.lang.Integer">
        SELECT COUNT(id)
        FROM fly_student_info
    </select>

    <!-- 可根据自己的需求，是否要使用 -->
    <resultMap type="com.github.itdachen.sdk.vo.StudentInfoVO" id="studentInfoMap">
        <result property="id" column="id"/>
        <result property="name" column="name"/>
        <result property="schoolId" column="school_id"/>
        <result property="academyId" column="academy_id"/>
        <result property="birthday" column="birthday"/>
        <result property="stuNo" column="stu_no"/>
        <result property="sex" column="sex"/>
        <result property="remarks" column="remarks"/>
    </resultMap>

    <!-- 查询 sql -->
    <sql id="selectStudentInfoVO">
        SELECT id,
               name,
               school_id,
               academy_id,
               birthday,
               stu_no,
               sex,
               remarks
        FROM fly_student_info
    </sql>

</mapper>

后端代码编写

StudentInfoController

/***
     * 跳转到管理页面
     *
     * @author 王大宸
     * @date 2023/8/12 22:20
     * @return java.lang.String
     */
    @GetMapping("/index")
    public String index() {
        return "student/index";
    }

    /***
     * 分页查询数据
     *
     * @author 王大宸
     * @date 2023/8/12 22:27
     * @param query query
     * @return com.github.itdachen.common.response.ServerResponse<com.github.itdachen.common.response.TableData < com.github.itdachen.sdk.vo.StudentInfoVO>>
     */
    @GetMapping("/page")
    @ResponseBody
    public ServerResponse<TableData<StudentInfoVO>> page(StudentInfoQuery query) throws Exception {
        return ServerResponse.okData(studentInfoService.findStudentInfoPage(query));
    }

IStudentInfoService

/***
     * 分页查询
     *
     * @author 王大宸
     * @date 2023/8/12 22:27
     * @param query query
     * @return com.github.itdachen.common.response.TableData<com.github.itdachen.sdk.vo.StudentInfoVO>
     */
    TableData<StudentInfoVO> findStudentInfoPage(StudentInfoQuery query) throws Exception;

StudentInfoServiceImpl

/***
     * 分页查询
     *
     * @author 王大宸
     * @date 2023/8/12 22:27
     * @param query query
     * @return com.github.itdachen.common.response.TableData<com.github.itdachen.sdk.vo.StudentInfoVO>
     */
    @Override
    public TableData<StudentInfoVO> findStudentInfoPage(StudentInfoQuery query) throws Exception {
        query.setPage((query.getPage() - 1) * query.getLimit());
        List<StudentInfoVO> list = studentInfoMapper.findStudentInfoList(query);
        Long appClientLimit = studentInfoMapper.findStudentInfoCount(query);
        return new TableData<StudentInfoVO>(appClientLimit, list);
    }

IStudentInfoMapper

/***
     * 查询数据
     *
     * @author 王大宸
     * @date 2023/8/12 22:30
     * @param query query
     * @return java.util.List<com.github.itdachen.sdk.vo.StudentInfoVO>
     */
    List<StudentInfoVO> findStudentInfoList(StudentInfoQuery query);

    /***
     * 查询条数
     *
     * @author 王大宸
     * @date 2023/8/12 22:30
     * @param query query
     * @return java.lang.Long
     */
    Long findStudentInfoCount(StudentInfoQuery query);

StudentInfoMapper.xml

<select id="findStudentInfoList" parameterType="com.github.itdachen.sdk.query.StudentInfoQuery"
            resultMap="studentInfoMap">
        <include refid="selectStudentInfoVO"/>
        <where>
            <if test="null != name  and '' != name ">
                AND name LIKE CONCAT(CONCAT('%',#{name}),'%')
            </if>
            <if test="null != schoolId  and '' != schoolId ">
                AND school_id = #{schoolId}
            </if>
            <if test="null != academyId  and '' != academyId ">
                AND academy_id = #{academyId}
            </if>
            <if test="null != sex  and '' != sex ">
                AND sex = #{sex}
            </if>
        </where>
    </select>

    <select id="findStudentInfoCount" resultType="java.lang.Long"
            parameterType="com.github.itdachen.sdk.query.StudentInfoQuery">
        SELECT count(id)
        FROM fly_student_info
        <where>
            <if test="null != name  and '' != name ">
                AND name LIKE CONCAT(CONCAT('%',#{name}),'%')
            </if>
            <if test="null != schoolId  and '' != schoolId ">
                AND school_id = #{schoolId}
            </if>
            <if test="null != academyId  and '' != academyId ">
                AND academy_id = #{academyId}
            </if>
            <if test="null != sex  and '' != sex ">
                AND sex = #{sex}
            </if>
        </where>
    </select>

前端代码

index.js

const path = "/student/info";
layui.use(['table'], function () {
    let table = layui.table;
    
    /* 初始化表格 */
    table.render(tableOptions());
    
    /* 表头事件监听 */
    toolBar(table);
    
    /* 操作栏监听 */
    tool(table);

});

/**
 * 数据表格查询条件(必须有,不然表格重载不了)
 */
function queryWhere() {
    let name = $("#name").val();
    let schoolId = $("#schoolId").val();
    let academyId = $("#academyId").val();
    let sex = $("#sex").val();
    return {
        name: name,
        schoolId: schoolId,
        academyId: academyId,
        sex: sex,
    }
}

/**
 * 刷新表格数据
 * @param table
 */
function reloadTableData(table) {
    if (null === table || undefined === table) {
        table = layui.table;
    }
    let p = tableOptions();
    p.where = queryWhere();
    p.page.curr = 1;
    table.reloadData(p.id, p);
}

/**
 * 表头操作
 * @param table
 */
function toolBar(table) {
    table.on('toolbar(layFilter)', function (obj) {
        if ('search' === obj.event) {
            reloadTableData(table);
        }
        if ('saveStudentInfo' === obj.event) {
            layer.open({
                type: 2,
                title: '新增',
                content: path + '/add',
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
    })
}

/**
 * 表格操作
 * @param table
 */
function tool(table) {
    table.on('tool(layFilter)', function (obj) {
        let data = obj.data;
        if ('delete' === obj.event) { // 删除
            let msg = '确定删除【' + data.name + '】信息吗？';
            layer.confirm('<div style="color: #ff000c">' + msg + '</div>', {
                icon: 3,
                title: '系统提示！'
            }, function () {
                $.ajax({
                    type: 'delete',
                    url: path + '/' + data.id,
                    success: function (res) {
                        if (res.success) {
                            reloadTableData(table); // 删除成功, 刷新表格
                            layer.msg(res.msg, {icon: 1, time: 1500});
                        } else {
                            layer.msg(res.msg, {icon: 1, time: 1500});
                        }
                    }
                })
            });
        }
        if ('update' === obj.event) { // 更新
            layer.open({
                type: 2,
                title: '编辑',
                content: path + '/edit/' + data.id,
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
        if ('view' === obj.event) { // 查看
            layer.open({
                type: 2,
                title: '查看',
                content: path + '/view/' + data.id,
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                btn: ['关闭'],
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
    })
}

/**
 * 表格参数初始化
 */
function tableOptions() {
    return {
        url: path + "/page",
        where: queryWhere(),
        cols: [[
            {field: 'name', title: '姓名', align: "center"},
            {field: 'schoolId', title: '所属学校', align: "center"},
            {field: 'academyId', title: '所属学院', align: "center"},
            {field: 'birthday', title: '出生日期', align: "center"},
            {field: 'stuNo', title: '学号', align: "center"},
            {field: 'sex', title: '性别', align: "center"},
            {fixed: 'right', title: '操作', toolbar: '#toolbarHandle', width: "20%", align: "center"}
        ]],
        id: 'layTable',
        elem: '#layTable',
        toolbar: '#toolbar',
        layFilter: 'layFilter',
        defaultToolbar: ['filter', 'exports', 'print'],
        cellMinWidth: 80,
        response: {
            statusName: 'status', //规定数据状态的字段名称，默认：code
            statusCode: 200 //规定成功的状态码，默认：0
        },
        parseData: function (res) { //res 即为原始返回的数据
            return {
                "status": res.status, //解析接口状态
                "msg": res.message, //解析提示文本
                "count": res.data.total, //解析数据长度
                "data": res.data.rows //解析数据列表
            };
        },
        page: {
            theme: '#1E9FFF',
            groups: 5,
            limits: [10, 15, 30, 50, 100, 500, 10000],
            layout: ['prev', 'page', 'next', 'skip', 'refresh', 'limit', 'count'],
            prev: '上一页',
            next: '下一页'
        },
    }
}

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title text="学生信息管理"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <link href="/static/layui/css/layui.css" rel="stylesheet" media="all"/>
    <script type="text/javascript" src="/static/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <script src="/static/student/index.js" charset="utf-8"></script>
</head>
<body class="bg-color">
<!-- 表头工具栏 -->
<script type="text/html" id="toolbar">
    <div class="layui-row" style="display: flex">
        <div class="head-search">
            <div class="layui-input-inline layui-input-wrap">
                <input type="text" name="name" id="name" autocomplete="off"
                       class="layui-input" style="height: 30px;">
            </div>
            <button class="layui-btn layui-btn-sm layui-btn-normal search-btn float_left"
                    lay-event="search">
                <i class="layui-icon layui-icon-search"></i>搜索
            </button>
        </div>
        <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-left: 10px; line-height:30px"
                lay-event="saveStudentInfo">
            <i class="layui-icon"></i>新增
        </button>
    </div>
</script>
<div class="layui-row" style="padding: 10px">
    <!-- 表格 -->
    <div class="layui_table">
        <table class="layui-hide" id="layTable" lay-filter="layFilter"></table>
        <div id="layPage"></div>
    </div>
</div>
<!-- 操作工具栏 -->
<script type="text/html" id="toolbarHandle">
    <button class="tool-bar-btn" lay-event="view">
        <i class="layui-icon layui-icon-list"></i>查看
    </button>
    <button class="tool-bar-btn edit-button" lay-event="update">
        <i class="layui-icon layui-icon-edit"></i>编辑
    </button>
    <button class="tool-bar-btn remove-button" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>删除
    </button>
</script>
</body>
</html>

分页查询 ​

项目基础类 ​

entity ​

sdk/dto ​

sdk/query ​

sdk/vo ​

StudentInfoController ​

IStudentInfoService ​

StudentInfoServiceImpl ​

StudentInfoMapper.xml ​

后端代码编写 ​

StudentInfoController ​

IStudentInfoService ​

StudentInfoServiceImpl ​

IStudentInfoMapper ​

StudentInfoMapper.xml ​

前端代码 ​

index.js ​

index.html ​

分页查询

项目基础类

entity

sdk/dto

sdk/query

sdk/vo

StudentInfoController

IStudentInfoService

StudentInfoServiceImpl

StudentInfoMapper.xml

后端代码编写

StudentInfoController

IStudentInfoService

StudentInfoServiceImpl

IStudentInfoMapper

StudentInfoMapper.xml

前端代码

index.js

index.html