Springboot简单的crud 二集 (增删改查)(分页插件pagehelper进行分页)

Springboot简单的crud(增删改查)+thymeleaf(html页面)+ pagehelper插件的使用进行分页。

欢迎来到半夏威风博客(第二篇)

你们喜欢的威威又回来了,最近没有更新博客,因为本小白也是工作了嘛
很多小白们不知道怎么分页,用传统的方法太复杂,那我今天就介绍一个插件pagehelper进行帮助我们完成分页,不难的,坑我都踩过了,放心!稳住不慌,吃口药!;

友情提示:→_→请盆友们,认认真真看完,!因为有很多盆友都没看完,就开始运行,或者不认真看,导致出现了许多问题!

首先第一步:pom 导入所需依赖,(你们是不是又心里嘀咕着说:又导入依赖。别~ 就导入一个好吧!)
 <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>
第二步:页面的东西(主页users.html)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px;
             width: 80%; margin: auto}
        table, th, td {border: 0px solid darkslategray;padding: 10px}
        .btgn{
            font-family: "Microsoft YaHei UI";
            font-size: 16px;
            color: #255e95;
            background-color: #99CCFF;
            text-align: center;
        }

        tr:nth-child(2n){
            background-color:#FFCC99;
        }
        tr:nth-child(2n+1) {
            background-color: #99CC99;
        }


    </style>
</head>
<body>
<div style="text-align: center">
    <span class="span" style="color: darkslategray; font-size: 30px" >欢迎光临!</span>
    <hr/>
  
    <table class="list">

        <tr>
            <th class="btgn">id</th>
            <th class="btgn">姓名</th>
            <th class="btgn">班级</th>
            <th class="btgn">年龄</th>
            <th class="btgn">性别</th>
            <th class="btgn">图片</th>
            <th class="btgn">操作</th>
            <th class="btgn">操作</th>


        </tr>

     <!--   <tr th:each="user : ${users}">-->

        <tr th:each="user:${pageInfo.list}">

        <td th:text="${user.id}">1</td>
            <td th:text="${user.name}">张三</td>
            <td th:text="${user.classes}">zhangsan</td>
            <td th:text="${user.age}">20</td>
            <td th:text="${user.sex} == 1 ? '男': '女'">男</td>
            <td><a class="s"><img th:src="@{${user.img}}"/></a></td>


            <!--<td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd')}">1980-02-30</td>-->
            <!--<td th:text="${user.phone}">1</td>-->
            <td><a th:href="@{'/delete/'+${user.id}}"><input type="submit" value="删除用户"></a></td>
            <td><a th:href="@{'/update/'+${user.id}}"><input type="submit" value="修改用户"></a></td>

        </tr>

        <a href="Add1"><input type="submit" value="新增用户"></a>
        <a href="Echse"><input type="submit" value="查看可视化数据"></a>

    </table>
    <p>当前 <span th:text="${pageInfo.pageNum}"></span> 页,总 <span th:text="${pageInfo.pages}"></span> 页,共 <span th:text="${pageInfo.total}"></span> 条记录</p>
    <a th:href="@{/all}">首页</a>
    <a th:href="@{/all(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>
    <a th:href="@{/all(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>
    <a th:href="@{/all(pageNum=${pageInfo.pages})}">尾页</a>


</div>

</body>
</html>

注意上一页,下一页,哪些路径的请求 如果你用html页面和我之前的一模一样,那就需要改了,直接把这也代码复制就可以了

第三步:在我们之前查询全部学生信息的控制层加上点东西
@Controller
public class UserContorller {
    @Autowired
    private UserService userService;
    private Object Direction;

    @GetMapping("all")
    public String all(Model model, @RequestParam(defaultValue = "1", value = "pageNum") Integer pageNum) {
        PageHelper.startPage(pageNum, 10);

        List<User> list = this.userService.selectUserByName();
        PageInfo<User> pageInfo = new PageInfo<User>(list);
        model.addAttribute("pageInfo", pageInfo);
        return "users";
    }

pageNum, 10就是我们让每页显示十条数据

在这里插入图片描述
这样我们就完成了

老规矩!稳住,不慌!?

后面还有这个项目的其他功能:分页插件pagehelper进行分页,Shiro+echarts+layui 统计图实现,Shiro登录权限管理,layui制作精美的登录页面

在这里插入图片描述
最新项目获取链接: Springboot 辛苦版?多谢支持!

在这里插入图片描述

制作不易!请盆友们多多关注!点关注哦!欢迎在下方留言!
不多说了!我要去吃口药了!压压惊!我压力很大的!!!
走喽!!!!别送 别送!说过了别送,还送! 拜拜!
^ ^

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值