当前位置: 首页 > news >正文

开发基于SpringBoot和BootStrap的全栈论坛网站(五):完成首页展示以及分页功能

如果你对这个项目感兴趣,可以从头看起:

开发基于SpringBoot和BootStrap的全栈论坛网站(一):准备阶段

开发基于SpringBoot和BootStrap的全栈论坛网站(二):后端人员如何快速使用BootStrap

开发基于SpringBoot和BootStrap的全栈论坛网站(三):登陆注册以及cookies的功能完成

开发基于SpringBoot和BootStrap的全栈论坛网站(四):完成问题发布功能

项目实时开发代码会放在文末,自取。源码开发进度会快于博客的进度。

完成问题发布功能后就可以开始着手进行首页的开发了,首页开发的最大难题就是对内容进行分页。现在的思路是在后端处理完分页的功能,前端直接对后端提供的内容进行展示。处理分页主要由sql语句的limit进行处理。最终的展示如下:

(一)分页的处理逻辑

我的打算是在一个页面上显示五条内容,所以为了实现这个功能首先需要创建超过5条数据库信息,为了方便我复制了12条问题信息。整体sql语句处理逻辑如下:

当需要显示1-5条时
select * from question limit 0,5;
当需要显示6-10条数据时
select * from question limit 5,5;

 基于此,设置一个变量offset,offset = size * (page - 1),使用下述sql完成分页的查找

select * from question limit #{offset},#{size};

(二)把需要展示的数据封装起来

需要展示问题的时候,我们不仅需要展示问题本身,还需要用户的信息。question属性中包含一个createid属性,如果是单纯的数据库操作,只需要把两个表联合查询就行。在Spring项目中,通过创建一个DTO来实现,DTO用来解决同时需要处理多张表的情况。新建DTO文件夹,创建QuestionDto,在question的实体类基础上新增User属性

public class Questiondto {
    private int id;
    private String title;
    private String description;
    private int createid;
    private int comment_count;
    private int view_count;
    private int like_count;
    private String tag;
    private long createtime;
    //增加一个user对象
    private User user;
    //省略getter and setter方法
 }

因为还需要展示页面信息,于是再新建一个PageDto,包含questionDto属性和页面属性,比如当前页面,是否展示前一页,是否展示首页等等信息。对于page的处理逻辑,我打算最多显示七个页码:

 当前页码是1时,显示1,2,3,4 当前页码是2时,显示1,2,3,4,5 ...... 当前页码是4时,显示1,2,3,4,5,6,7

 PageDto中新增setPagination方法,处理页码展示逻辑

public class PageDto {
    //问题内容
    private List<Questiondto> questions;
    //是否展示前一页
    private boolean showPre;
    //是否展示后一页
    private boolean shownext;
    //是否展示第一页
    private boolean showfirst;
    //是否展示最后一页
    private boolean showlast;
    //当前页码
    private int page;
    //当前展示的页码集合
    private List<Integer> pages = new ArrayList<>();
    //所有页数
    private int totalpage;
    public void setPagination(int totalcount, int page, int size) {
        this.page = page;
        if (totalcount % size == 0) {
            totalpage = totalcount / size;
        } else {
            totalpage = totalcount / size + 1;
        }
        //page<1就显示1,page>最大页数就显示最大页数
        if (page<1){
            this.page=1;
        }
        if (page>totalpage){
           this.page=totalpage;
        }
        //将需要展示的页码插入到pages中
        pages.add(page);
        for (int i = 1; i <= 3; i++) {
            if (page - i > 0) {
                pages.add(0, page - i);
            }
            if (page + i <= totalpage) {
                pages.add(page + i);
            }
        }
        //是否展示上一页
        if (page == 1) {
            showPre = false;
        } else {
            showPre = true;
        }
        //是否展示后一页
        if (page == totalpage) {
            shownext = false;
        } else {
            shownext = true;
        }
        //是否展示第一页
        if (pages.contains(1)) {
            showfirst = false;
        } else {
            showfirst = true;
        }
        //是否展示最后一页
        if (pages.contains(totalpage)) {
            showlast = false;
        } else {
            showlast = true;
        }
    }
    //省略getter and setter方法
}

接下来要做的事情就是把问题(question)、用户信息(User)、页码(page)全部整合到一起返回给indexController,再由indexController把数据通过model传递给前端。

(三)Service层处理数据整合业务

service层从名字上就能看出来是处理服务和业务的,数据的整合就放在service层进行处理。新建一个QuestionService,注意加上@Service标签:

@Service
public class QuestionService {
    //注入QuestionMapper和UserMapper
    @Resource
    private QuestionMapper questionMapper;

    @Resource
    private UserMapper userMapper;
    //将question、user、page整合后返回
    public PageDto list(int page, int size) {
        PageDto pageDto = new PageDto();
        int totalcount = questionMapper.count();
        pageDto.setPagination(totalcount,page,size);
        //size*{page-1}
        int offset = size * (page - 1);
        //每页只展示5条
        List<Question> questions = questionMapper.list(offset, size);
        List<Questiondto> questiondtoList = new ArrayList<>();
        for (Question question : questions) {
            User user = userMapper.findById(question.getCreateid());
            Questiondto questiondto = new Questiondto();
            //把第一个对象的所有属性拷贝到第二个对象中
            BeanUtils.copyProperties(question, questiondto);
            questiondto.setUser(user);
            questiondtoList.add(questiondto);
        }
        pageDto.setQuestions(questiondtoList);
        return pageDto;
    }
}

(四)前端处理和展示

只需要在indexController中加上下面两句代码:

PageDto pagination = questionService.list(page,size);
model.addAttribute("pagination", pagination);

就可以实现把返回过来的pagination对象传递给model,在html页面中,用Thymeleaf操作model数据,实现首页展示和分页功能,index.html代码请看下面的源码部分。源码的开发进度快于博客,希望可以点个star。

github代码

相关文章:

  • 冒泡排序法与二分查找法
  • github回退版本时本地代码被覆盖(已解决)
  • CentOS 6.5系统上安装SVN服务器端的方法及目录访问权限配置(转总结)
  • 开发基于SpringBoot和BootStrap的全栈论坛网站(六):完成个人中心、问题详情和问题编辑
  • 开发基于SpringBoot和BootStrap的全栈论坛网站(七):完成回复和二级回复功能
  • 项目管理过程 工作绩效数据,信息和报告
  • 开发基于SpringBoot和BootStrap的全栈论坛网站(八):完成回复通知的功能
  • 架构师
  • SpringCloud微服务入门:使用idea搭建第一个微服务项目(附源码)
  • 图文详解YUV420数据格式
  • SpringCloud之服务注册中心--Eureka基础与进阶实战
  • 老李分享:loadrunner 的86401错误
  • SpringCloud之服务远程调用--ribbon的服务调用和负载均衡
  • SpringCloud之模板化Http客户端--Feign的入门和高级使用
  • Linux 添加开机启动项的两种方法
  • 深入了解以太坊
  • [译]如何构建服务器端web组件,为何要构建?
  • Angular 响应式表单 基础例子
  • js正则,这点儿就够用了
  • Koa2 之文件上传下载
  • leetcode378. Kth Smallest Element in a Sorted Matrix
  • Mac转Windows的拯救指南
  • MQ框架的比较
  • MySQL QA
  • PermissionScope Swift4 兼容问题
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • Transformer-XL: Unleashing the Potential of Attention Models
  • uva 10370 Above Average
  • 成为一名优秀的Developer的书单
  • 给新手的新浪微博 SDK 集成教程【一】
  • 简单易用的leetcode开发测试工具(npm)
  • 实战:基于Spring Boot快速开发RESTful风格API接口
  • 世界上最简单的无等待算法(getAndIncrement)
  • 想晋级高级工程师只知道表面是不够的!Git内部原理介绍
  • 延迟脚本的方式
  • 1.Ext JS 建立web开发工程
  • # Apache SeaTunnel 究竟是什么?
  • #13 yum、编译安装与sed命令的使用
  • $emit传递多个参数_PPC和MIPS指令集下二进制代码中函数参数个数的识别方法
  • $refs 、$nextTic、动态组件、name的使用
  • (C语言)strcpy与strcpy详解,与模拟实现
  • (C语言)球球大作战
  • (done) NLP “bag-of-words“ 方法 (带有二元分类和多元分类两个例子)词袋模型、BoW
  • (LeetCode C++)盛最多水的容器
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (十二)springboot实战——SSE服务推送事件案例实现
  • (循环依赖问题)学习spring的第九天
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .Net 8.0 新的变化
  • .NET Core 实现 Redis 批量查询指定格式的Key
  • .NET8.0 AOT 经验分享 FreeSql/FreeRedis/FreeScheduler 均已通过测试
  • .Net程序帮助文档制作
  • .NET国产化改造探索(一)、VMware安装银河麒麟
  • .net用HTML开发怎么调试,如何使用ASP.NET MVC在调试中查看控制器生成的html?