SSM员工考勤系统四

转自http://coder520.com/

一、分页

1、先给打卡表插入一些数据
2、分页原理


image.png

mysql与orcle不一样就是主要两点:
1、分页 mysql是limit oracle是行号rownum。
2、oracle没有自动递增而是有个sequence序列。

二、编写代码

2.1、先写一个分页工具类,包含上面的分页原理

public class PageQueryBean {

    private static final int DEFAULT_PAGE_SIZE = 10;
    /** 当前页 */
    private Integer currentPage;
    /** 每页显示数据条数 */
    private Integer pageSize;
    /** 所有记录数 */
    private int totalRows;
    /** sql查询起始行 */
    private Integer startRow;
    /** 总页数 */
    private Integer totalPage;
    /** 查询所得数据集 */
    private List<?> items;

    


    public final Integer getStartRow() {
        if (startRow == null)
            startRow = (currentPage == null ? 0 : (currentPage - 1) * getPageSize()) ;
        return startRow;
    }
    

    public void setStartRow(Integer startRow) {
        this.startRow = startRow;
    }

    public final Integer getPageSize() {
        return pageSize == null ? DEFAULT_PAGE_SIZE : pageSize;
    }

    public final void setPageSize(Integer pageSize) {
        this.pageSize = pageSize;
    }

    public final int getTotalRows() {
        return totalRows;
    }

    public final void setTotalRows(int totalRows) {
        this.totalRows = totalRows;
        int totalPage = totalRows % getPageSize() == 0 ? totalRows / getPageSize() : totalRows / getPageSize() + 1;
        setTotalPage(totalPage);
    }

    public final List<?> getItems() {
        return items == null ? Collections.EMPTY_LIST : items;
    }

    public final void setItems(List<?> items) {
        this.items = items;
    }

    public final Integer getCurrentPage() {
        return currentPage;
    }

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

    public final Integer getTotalPage() {
        return totalPage == null || totalPage == 0 ? 1 : totalPage;
    }

    public final void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }


    @Override
    public String toString() {
        return "PageQueryBean [currentPage=" + currentPage + ", pageSize="
                + pageSize + ", totalRows=" + totalRows + ", startRow="
                + startRow + ", totalPage=" + totalPage + ", items=" + items
                + "]";
    }

}

2.2、controller处理请求方法
注意,
1、这里mapping本应该是listAttend但是为了postman提交不被拦截所以还是写个sign后面再改,还有这里前端不一定传入json,可以传入键值对,所以不需要加@RequestBody但是返回还是json所以加@ResponseBody

@RequestMapping("/signList")
    @ResponseBody
    public PageQueryBean listAttend(QueryCondition condition) {

        PageQueryBean result = attendService.listAttend(condition);
        return result;

    }

2、我们本来是传递一个PageQueryBean类型的参数,因为前端传递过来的pageSize每页显示的条数和当前页currentPage,这个类里都包含,但是我们还可能会条件查询(查询从某个日期到某个日期之间的打卡记录),写一个QueryCondition类继承PageQueryBean,添加查询条件字段就行

public class QueryCondition extends PageQueryBean {

    private Long userId;

    private String startDate;

    private String endDate;

//get和set省略

3、实现service层的listAttend方法,我们可以先查询总数目而不要去查询全部字段,优化一下,当总数目大于0我们就再查询全部字段,小于0不需要再查询。
4、要返回给前端一个分页实例pageResult,如果count是大于0的,就从condition里把当前页和每页的条数赋值给要返回的对象pageResult,并且把总条数也设置,让前端自己去算需要分几页,这里也可以返回condition,但是这样职责不明确

/**
     * Author ljs
     * Description 根据查询条件返回分页数据
     * Date 2018/8/19 5:15
     **/
    @Override
    public PageQueryBean listAttend(QueryCondition condition) {
        // 根据条件查询 count记录数目
        int count = attendMapper.countByCondition(condition);
        PageQueryBean pageResult = new PageQueryBean();
        if (count > 0) {
            pageResult.setTotalRows(count);
            pageResult.setCurrentPage(condition.getCurrentPage());
            pageResult.setPageSize(condition.getPageSize());
            List<Attend> attendList = attendMapper.selectAttendPage(condition);
            pageResult.setItems(attendList);
        }
        //如果有记录 才去查询分页数据 没有相关记录数目 没必要去查分页数据
        return pageResult;
    }

5、接着在mapper里实现countByCondition(condition),这里如果有传入日期条件需要使用动态sql,并且使用count(0)函数

<select id="countByCondition" resultType="int">
    select
    COUNT(0)
    from attend
    where user_id = #{user_id}
    <if test="startDate!=null and endDate!=null">
      AND attend_date BETWEEN #{startDate} AND #{endDate}
    </if>
  </select>

6、实现selectAttendPage(condition)还是一样动态sql和LIMIT #{startRow} , #{pageSize}分页

<select id="selectAttendPage" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List" />
    from attend
    where user_id = #{user_id}
    <if test="startDate!=null and endDate!=null">
      AND attend_date BETWEEN #{startDate} AND #{endDate}
    </if>
    LIMIT  #{startRow} , #{pageSize}
  </select>

postman测试
现在是键值对

image.png

调试之后发现错误,记得调试到错按f8才会在控制台出现错误栈,说user_id没有get方法,我们QueryCondition类里明明就有userId而且有get方法,而前端传过来的也是userId,
image.png

原因是我们的mapper忘记改了,把user_id改为userId,改完之后记得重新启动,改完之后记得重新启动,改完之后记得重新启动
image.png

ok返回12条与数据库对应
image.png

记得修改了要重新启动,我的热部署插件过期了。。烦。不然明明了没错,却得不到结果蒙蔽。
image.png

最后可以看到前端返回的数据了,但是返回的时间是时间戳,前端有插件可以把时间戳变成日期。前端还需要做的就是根据返回的页数显示总共有几页,然后当选中哪一页就高亮并且把该页值的传递给后台的currentPage,还有首页1和末页totalPage也一样

前端的查询条件有这些,分别是日期范围,状态,每页显示多少条数据,

image.png

注意这里的data不是后端返回的data,是js插件里设置的data,然后从data里取出要提交的参数封装到param。

ajax: function (data, callback, settings) {
                        //封装请求参数
                        var param = formToJson("attendQueryForm");
                        param.pageSize = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
                        param.start = data.start;//开始的记录序号
                        param.currentPage = (data.start / data.length) + 1;//当前页码

然后提交请求,并调用回调函数

 $.ajax({
                            type: "GET",
                            url: "/attend/attendList",
                            cache: false, //禁用缓存
                            data: param, //传入组装的参数
                            dataType: "json",
                            success: function (result) {
                                console.log(result);
                                //console.log(result);
                                //setTimeout仅为测试延迟效果
                                setTimeout(function () {
                                    //封装返回数据
                                    var returnData = {};
                                    returnData.draw = data.startRow;//这里直接自行返回了draw计数器,应该由后台返回
                                    returnData.recordsTotal = result.totalRows;//返回数据全部记录
                                    returnData.recordsFiltered = result.totalRows;//后台不实现过滤功能,每次查询均视作全部结果
                                    returnData.data = result.items;//返回的数据列表

                                    //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                                    callback(returnData);
                                }, 200);

后端
首先我们要明确后端需要userId,startDate(起始时间),endDate(终止时间),attendStatus(状态),currentPage(当前页码)。
所以vo分页增强类需要添加下面五个属性,currentPage在分页类里有。又因为前端传的是时间范围所以添加一个rangeDate

private Long userId;

    private String startDate;

    private String endDate;

    private String rangeDate;

    private Byte attendStatus;

//省略get和set

controller,userid我们从session中获取,

 @RequestMapping("/attendList")
    @ResponseBody
    public PageQueryBean listAttend(QueryCondition condition, HttpSession session) {
        User user = (User) session.getAttribute("userinfo");
        //获取前端操作条件
        String [] rangeDate = condition.getRangeDate().split("/");
        condition.setStartDate(rangeDate[0]);
        condition.setEndDate(rangeDate[1]);
        condition.setUserId(user.getId());
        PageQueryBean result = attendService.listAttend(condition);
        return result;

    }

添加了状态条件所以sql语句也需要修改
在查询总数和每页的数据都需要加上

 <if test="attendStatus != null" >
      AND  attend_status = #{attendStatus}
    </if>

ok。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,128评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,316评论 3 388
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,737评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,283评论 1 287
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,384评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,458评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,467评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,251评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,688评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,980评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,155评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,818评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,492评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,142评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,382评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,020评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,044评论 2 352

推荐阅读更多精彩内容