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>
后端代码
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/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>
$(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
