springboot整合mybatis以及bootstrap实现分页效果

 

 搜索后分页

 

 pom依赖

复制代码
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.java</groupId>
    <artifactId>thymeleaf-service</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.1.RELEASE</version>
        <relativePath/>
    </parent>

    <dependencies>
        <!--tomcat容器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--lombok依赖-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.16</version>
        </dependency>
        <!--mysql驱动5.6.17-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.6</version>
        </dependency>
        <!--springboot整合mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <!--引入junit单元测试依赖-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--lombok依赖-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.16</version>
        </dependency>
        <!-- mybatis pagehelper 分页插件 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.10</version>
        </dependency>
    </dependencies>


</project>
View Code
复制代码

后端代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
server.port=8080
 
logging.level.com.java=debug
logging.level.web=debug
spring.devtools.add-properties=false
 
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test_demo?useSSL=false&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&autoReconnect=true
spring.datasource.username=root
spring.datasource.password=123
spring.datasource.initialSize=20
spring.datasource.minIdle=10
spring.datasource.maxActive=100
mybatis.mapper-locations=classpath:mapping/*.xml
mybatis.configuration.map-underscore-to-camel-case=true

　　

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
package com.java;
 
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
 
/**
 * @Description:
 * @Author: Yourheart
 * @Create: 2022/12/17 17:49
 */
@SpringBootApplication
public class ThymeLeafApplication {
    public static void main(String[] args) {
        SpringApplication.run(ThymeLeafApplication.class, args);
    }
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
package com.java.bean;
 
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
 
/**
 * @Description:
 * @Author: Yourheart
 * @Create: 2022/12/23 17:36
 */
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class HobbyDO {
    private String id;
    /**
     * 服务者名称
     */
    private String providerName;
 
    /**
     * 服务者信息
     */
    private String providerMessage;
 
    /**
     * 服务者项目
     */
    private String providerProject;
 
    /**
     * 服务者地址
     */
    private String providerAddress;
 
    /**
     * 距离我有多远
     */
    private String toMeSpace;
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
package com.java.mapper;
 
import com.java.bean.HobbyDO;
import org.apache.ibatis.annotations.Mapper;
 
import java.util.List;
 
/**
 * @Description:
 * @Author: Yourheart
 * @Create: 2022/12/23 17:31
 */
@Mapper
public interface HobbyMapper {
 
    List<HobbyDO> listHobbys(String content);
 
}

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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="com.java.mapper.HobbyMapper">
 
    <resultMap id="resultHobbyMap" type="com.java.bean.HobbyDO">
 
        <result column="hobby_id" jdbcType="BIGINT" property="id"/>
 
    </resultMap>
 
   <select id="listHobbys"  parameterType="java.lang.String" resultMap="resultHobbyMap">
       SELECT  *  FROM  hobby_message
       <where>
           <if test="content!=null and content != ''">
               provider_name LIKE CONCAT('%',#{content},'%')
           </if>
       </where>
        ORDER BY hobby_id DESC
   </select>
 
</mapper>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
package com.java.controller.front;
 
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.java.bean.HobbyDO;
import com.java.mapper.HobbyMapper;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.function.Consumer;
 
/**
 * @Description:
 * @Author: Yourheart
 * @Create: 2022/12/17 17:53
 */
@RestController
@Slf4j
public class HobbyController {
 
    @Autowired
    private HobbyMapper hobbyMapper;
 
 
    @PostMapping("/listHobbyShow")
    public Map<String,Object> listHobbyShow(int curr, int limit, String content) {
        //其中curr为哪一页，limit为每一页的记录数
        log.info("入参:{}",content);
        PageHelper.startPage(curr,limit);
        List<HobbyDO> hobbyList = hobbyMapper.listHobbys(content);
        PageInfo<HobbyDO> pageInfo = new PageInfo<>(hobbyList);
        pageInfo.getList().forEach(new Consumer<HobbyDO>() {
            @Override
            public void accept(HobbyDO hobbyDO) {
                log.info(hobbyDO.toString());
            }
        });
        Map<String,Object> map=new HashMap<String,Object>();
        map.put("data",pageInfo.getList());
        map.put("ct",pageInfo.getTotal());
        return map;
    }
}

　　前端代码部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据分页</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="/js/getHobbyListFenYe.js"></script>
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
 
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style type="text/css">
        body{
            background:conic-gradient(#87CEFA,#00CED1)
        }
        #tables{
            table-layout: fixed;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
<div class="container">
    <form>
        <div class="form-group">
            <label></label>
            <input type="text" class="form-control" id="content" placeholder="输入服务者信息"  autocomplete="off">
        </div>
        <button type="submit" class="btn btn-default" id="search">搜索</button>
    </form>
    <div id="demo8"></div>
    <table class="table" id="tab">
        <thead>
        <th>id</th>
        <th>内容</th>
        </thead>
        <tbody id="tbs">
 
        </tbody>
    </table>
</div>
 
</body>
</html>

　　

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
$(function(){
    var url="/listHobbyShow";
    var tempContent="";
 
    fenye();
 
    $("#search").click(function () {
        var content=$("#content").val();
        console.log("content="+content)
        tempContent=content;
        console.log("serach中的tempContent="+tempContent);
        fenye();
    });
 
    function fenye(){
        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage
                ,layer = layui.layer;
            //自定义排版
            console.log("自定义排版中的tempContent="+tempContent);
            $.ajax({
                type:'post',
                dataType:'json',
                data:{
                    'curr':1,
                    'limit':10,
                    'content':tempContent
                },
                url:url,
                success:function(data){
                    showData(data);
                    laypage.render({
                        elem: 'demo8'
                        ,count: data.ct
                        ,layout: ['limit', 'prev', 'page', 'next']
                        ,jump:function(obj){
                            //分页切换的回掉
 
                            $.ajax({
                                type:'post',
                                dataType:'json',
                                data:{'curr':obj.curr,'limit':obj.limit,'content':tempContent},
                                url:url,
                                success:function(data){
                                    showData(data);
                                }
                            })
                        }
                    });
                }
            })
        });
    }
 
 
    function showData(ds){
        $("#tbs").empty();
        var htmlStr="";
        for(var i=0;i<ds.data.length;i++){
            htmlStr+="<tr>";
            htmlStr+="<td>";
            htmlStr+=ds.data[i].id;
            htmlStr+="</td>";
            htmlStr+="<td>";
            htmlStr+="<p>服务者名称 "+ds.data[i].providerName+"</p>";
            htmlStr+="<p>服务者信息 "+ds.data[i].providerMessage+"</p>";
            htmlStr+="<p>服务者项目 "+ds.data[i].providerProject+"</p>";
            htmlStr+="<p>服务者地址 "+ds.data[i].providerAddress+"</p>";
            htmlStr+="</td>"
            htmlStr+="</tr>"
        }
        $("#tbs").append(htmlStr);
    }
 
});

　　db脚本

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#创建数据库，设置utf8编码格式
CREATE DATABASE test_demo  DEFAULT CHARACTER SET utf8;
 
CREATE TABLE hobby_message(
   hobby_id INT PRIMARY KEY AUTO_INCREMENT COMMENT '爱好id',
   provider_name VARCHAR(255) COMMENT '服务者名称',
   provider_message VARCHAR(255) COMMENT '服务者信息',
   provider_project VARCHAR(255) COMMENT '服务者项目',
   provider_address VARCHAR(255) COMMENT '服务者地址',
   to_me_space VARCHAR(255) COMMENT '距离我有多远'
)
 
INSERT  INTO hobby_message(provider_name,provider_message,provider_project,provider_address,to_me_space)
VALUES
('小白','22','33','44','55')

　　

测试地址 http://127.0.0.1:8080/getHobbyListFenYe.html

posted @   不忘初心2021  阅读(90)  评论(0)  编辑  收藏  举报
相关博文：
·  springboot项目接入普罗米修斯
·  使用Springboot结合mybatis搭建最简单的操作mysql教程
·  SpringBoot整合Mybatis
·  Spring Boot整合Mybatis-Plus代码生成器、VM模板
·  SpringBoot
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
SQL AI 助手