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

标签：java springboot spring bootstrap boot org mybatis import com

 

 搜索后分页

 

 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

后端代码

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

　　

 

 

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);
    }
}

　　

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;
}

　　

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);

}

　　

<?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>

　　

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;
    }
}

　　前端代码部分

<!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/[email protected]/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/[email protected]/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>

　　

$(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脚本

#创建数据库，设置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

标签：java,springboot,spring,bootstrap,boot,org,mybatis,import,com
From： https://www.cnblogs.com/q202105271618/p/17026270.html