SpringBoot通过Thymeleaf实现一个简单的分页

SpringBoot通过Thymeleaf实现一个简单的分页

之前没有接触过分页，今天想实现一下，当中还有一些问题还需谅解。代码中只做实现，还没来得及做优化

环境：JDK 1.8     IDEA

由于如何创建工程比较简单，这里不做讲解！

步骤

1. 工程目录

2.pom.xml配置

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!-- 导入阿里的数据库连接池技术-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.17</version>
        </dependency>
        <!-- thymeleaf依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

3.创建于数据表对应的entity实体类

• 数据表：

CREATE TABLE `account` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) DEFAULT NULL,
  `money` double DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;

• 实体类：

public class Account {
    private Integer id;
    private String name;
    private Double money;

    //getter setter....
}

3.application.yml配置文件

spring:
  datasource:
    username: root
    password: 
    url: jdbc:mysql://localhost:3306/ssm?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource

  thymeleaf:
    cache: false #关闭模板引擎缓存

mybatis:
  type-aliases-package: cn.jack.entity
  mapper-locations: classpath:mapper/*.xml

4.编写AccountMapper接口

@Mapper
@Repository
public interface AccountMapper {
    /**
     * 获取总记录数
     * @return
     */
    public Integer queryTotalRecords();

    /**
     * 查询指定范围的记录数
     * @param map
     * @return
     */
    public List<Account> queryLimitAccounts(Map<String,Integer> map);
}

5.编写AccountServer接口和Impl实现类

• AccountServer

public interface AccountService {

    public Integer queryTotalRecords();

    public List<Account> queryLimitAccounts(Map<String,Integer> map);
}

• AccountServerImpl

@Service
public class AccountServiceImpl implements AccountService {

    @Autowired
    private AccountMapper accountMapper;

    @Override
    public Integer queryTotalRecords() {
        return accountMapper.queryTotalRecords();
    }

    @Override
    public List<Account> queryLimitAccounts(Map<String, Integer> map) {
        return accountMapper.queryLimitAccounts(map);
    }
}

6.编写AccountMapper.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="cn.jack.mapper.AccountMapper">
    <!--  获取总记录数  -->
    <select id="queryTotalRecords" resultType="java.lang.Integer">
        select count(*) from account;
    </select>

    <!--  查询指定条数用户  -->
    <select id="queryLimitAccounts" resultType="Account" parameterType="java.util.Map">
        select * from account limit #{start}, #{pages};
    </select>
</mapper>

7.测试是否能够操作查询数据表

成功!

8.编写AccountController

@Controller
public class AccountController {

    /**
     * 这里这样子写不好，还需优化
     */
    private static Integer totalRecords;//获取记录总数
    private static Integer pageSize = 3;//每页显示的记录数
    private static Integer pageCount;//总页数
    private static Integer currentPage;//待显示页码

    @Autowired
    private AccountService accountService;

    @RequestMapping("/queryAccounts")
    public String queryAccounts(HttpServletRequest request, Model model){
        totalRecords = accountService.queryTotalRecords();
        pageCount = (totalRecords%pageSize == 0)?(totalRecords/pageSize) : (totalRecords/pageSize+1);
        //获取当前页数
        String strCurrentPage;
        if ((strCurrentPage = (String) request.getParameter("pageNum")) == null){
            currentPage = 1;
        }else{
            currentPage = Integer.parseInt(strCurrentPage);
            //设置当前访问页面超出页数的大小
            if(currentPage >= pageCount) currentPage = pageCount;
            else if (currentPage < 1) currentPage = 1;
        }

        //查询数据
        Map<String, Integer> map = new HashMap<>();
        map.put("start", (currentPage - 1) * pageSize); //从哪一条记录开始查询
        map.put("pages", pageSize);
        List<Account> accounts = accountService.queryLimitAccounts(map);

        model.addAttribute("pageSize",pageSize);
        model.addAttribute("pageCount",pageCount);
        model.addAttribute("currentPage",currentPage);
        model.addAttribute("totalRecords",totalRecords);
        model.addAttribute("accounts",accounts);

        return "home";
    }
}

9.主页面home.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>人员信息</title>
    <style>
        table{ width: 300px;}

        div{ width: 300px;height: 500px;margin: 0 auto;}
    </style>
</head>
<body>
    <div>
        <table border="1" cellspacing="0" cellpadding="0">
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr th:if="${accounts != null}" th:each="account:${accounts}">
                <td th:text="${account.getId()}"></td>
                <td th:text="${account.getName()}"></td>
                <td th:text="${account.getMoney()}"></td>
            </tr>
        </table>


        <span><a th:href="@{/queryAccounts(pageNum=1)}">首页</a></span>
        <span th:switch="${currentPage}">
            <a th:case="1" th:href="@{/queryAccounts(pageNum=1)}">上一页</a>
            <a th:case="*" th:href="@{/queryAccounts(pageNum=${currentPage - 1})}">上一页</a>
        </span>
        <span th:switch="${currentPage}">
            <a th:case="pageCount" th:href="@{/queryAccounts(pageNum=${pageCount})}">下一页</a>
            <a th:case="*" th:href="@{/queryAccounts(pageNum=${currentPage + 1})}">下一页</a>
        </span>
        <span><a th:href="@{/queryAccounts(pageNum=${pageCount})}">尾页</a></span>
    </div>

</body>
</html>

10.测试运行

测试成功！

 

总结

       通过一个简单分页的实现，懂得了分页的一些基本实现方式，当然代码还需要优化，由于小白的我感觉我自己写的代码是有点low的，但就算差还需要努力向前走，加油！同时也希望我写的内容能够对你们有所帮助！