ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2019-08-30 11:07:43  阅读:158  来源: 互联网

标签:二集 插件 pageNum 分页 color pagehelper font


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就是我们让每页显示十条数据

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

老规矩!稳住,不慌!

标签:二集,插件,pageNum,分页,color,pagehelper,font
来源: https://blog.csdn.net/qq_42747236/article/details/100151536

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有