解析springboot+thymeleaf+mybatis+pagehelper+easyui的分页

1 篇文章 0 订阅
1 篇文章 0 订阅

今天简单给大家分享一下分页,使用的是springboot框架,简单说一下springboot,这是我用的感觉最爽的一个框架了,差不多什么都可以集成,集成也比较方便,只需要在maven中引入依赖包,在application.properties配置好需要用的参数,代码中用也好多时候直接使用注解就可以了,太简单方便了,在说一下thymeleaf模板引擎,他也是和springboot最搭的了,官方也推荐使用这个模板引擎,不推荐使用jsp,说起jsp,真是有点恶心了,之前公司项目就是用的jsp,用jsp的好处就是修改不需要重新编译重启服务器,但是代码中一会java代码,一会html/js/css,看的有点头疼,最要命的是有时候没有源码,把.class文件反编译成.java文件,改完以后在编译成.class文件,难受,在说一下mybatis,mybatis是半自动的,需要写sql,我身边的人也有好多用的是Hibernate框架,这个框架的好处是简单的crud,以及简单的业务是不需要写sql的,但是业务复杂还是挺麻烦的,我个人还是喜欢mybatis多一点,至于pagehelper和easyui分页还是看代码吧,嘻嘻

 

 

1、创建一个springboot项目

 

2、在pom.xml中引入依赖

<!-- springboot包 -->
  <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.0.5.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
    	<!-- pagehelper需要用到的三个包 -->
    	<dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
            <version>1.2.5</version>
        </dependency>

        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>
    
    
    	
    
    
    	<dependency>
		  <groupId>org.codehaus.jackson</groupId>
		  <artifactId>jackson-mapper-asl</artifactId>
		  <version>1.9.13</version>
		</dependency>

    	<dependency>
		    <groupId>commons-beanutils</groupId>
		    <artifactId>commons-beanutils</artifactId>
		    <version>1.8.1</version>
		</dependency>
    
    	<dependency>
		    <groupId>org.apache.commons</groupId>
		    <artifactId>commons-lang3</artifactId>
		    <version>3.2.1</version>
		</dependency>
    	
    
    
    	<!-- springboot-web包 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

		<!-- springboot测试包 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        
        <!-- thymeleaf包 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
              <scope>true</scope>
        </dependency>
        
        
        
        
        
        <!-- 引入starter-->
					<dependency>
					    <groupId>org.mybatis.spring.boot</groupId>
					    <artifactId>mybatis-spring-boot-starter</artifactId>
					    <version>1.3.2</version>
					    <scope>runtime</scope>			    
					</dependency>
		 			
		 	<!-- MySQL的JDBC驱动包	-->	
		 			<dependency>
						<groupId>mysql</groupId>
						<artifactId>mysql-connector-java</artifactId>
						<scope>runtime</scope>
					</dependency> 
			<!-- 引入第三方数据源 -->		
					<dependency>
						<groupId>com.alibaba</groupId>
						<artifactId>druid</artifactId>
						<version>1.1.6</version>
					</dependency>
        
        
        
        
        
        <dependency>
    <groupId>javax.el</groupId>
    <artifactId>javax.el-api</artifactId>
    <version>3.0.0</version>
</dependency>
        
    </dependencies>

    <build>
        <finalName>myspringboot</finalName>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>

 

 

3、在resource目录下创建application.properties文件,并添加配置信息

#数据库配置
spring.datasource.url=jdbc:mysql://localhost:3306/zilanxuan?useSSL=false&useUnicode=true&amp;characterEncoding=utf-8
spring.datasource.username =root
spring.datasource.password =root

#数据源配置(使用阿里的Druid)
spring.datasource.type =com.alibaba.druid.pool.DruidDataSource

#mybatis配置
mybatis.configuration.log-impl=org.apache.ibatis.logging.stdout.StdOutImpl
#mybatis.typeAliasesPackage=zilanxuan.entity.User
mybatis.mapperLocations=classpath:mapper/*.xml

#Pagehelper配置
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql



#整合thymeleaf模板引擎
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
#前缀
spring.thymeleaf.prefix=classpath:/static/
#编码
spring.thymeleaf.encoding=UTF-8
#类型
spring.thymeleaf.content-type=text/html
#名称的后缀
spring.thymeleaf.suffix=.html

 

4、到现在就可以开始写代码了,通过前三步就把springboot+thymeleaf+mybatis的依赖环境就都配置好了,现在开始写controller层

@Controller
public class UserController {
	
	@Autowired
	private UserService userService;

	/**
	 * 这种方式是通过thymeleaf这种方式进行分页
	 * @param model 使用model将数据信息传到页面
	 * @param user  这个user主要是做查询,根据user的字段进行查询
	 * @param pageNum 第几页
	 * @param pageSize 一页显示的记录数
	 * @return
	 */
	@RequestMapping("/index")
	public String getUserList(Model model,User user,@RequestParam(defaultValue="1") Integer pageNum,@RequestParam(defaultValue="5") Integer pageSize){
		model.addAttribute("pager", userService.getUsers(user,pageNum,pageSize));
		return "index";
	}
	
	
	@RequestMapping("/dev")
	public String getdev() {
		return "dev";
	}
	
	
	/**
	 * 这种方式是easyui方式进行分页的,
	 * 这种方式简单方便,它会发送接口两个参数page(第几页)和rows(一页显示几条数据)
	 * 返回的时候需要两个参数total(总记录数)和rows(一页中的数据,类型为List<T>)
	 * 推荐
	 * @param user
	 * @param page
	 * @param rows
	 * @return
	 */
	@ResponseBody
	@RequestMapping("/d")
	public Map<String,Object> getusers(User user,@RequestParam(defaultValue="1") Integer page,@RequestParam(defaultValue="5") Integer rows){
		Map<String,Object> map = new HashMap<String,Object>();
		Pager<User> pager = userService.getUsers(user,page,rows);
		map.put("total", pager.getTotalRecord());
		map.put("rows", pager.getDataList());
		return map;
	}
	
}

 

5、写service层

 

@Service
public class UserService {

	@Autowired
	private UserMapper userMapper;
	
	public Pager<User> getUsers(User user,Integer pageNum,Integer pageSize) {
		//自己做的查询,查询总共有多少条记录数
		Integer sumData = userMapper.getSize();
		
		//使用pagehelper进行分页,把两个参数传入,简单吧,哈哈
		PageHelper.startPage(pageNum, pageSize);
		
		//查询所有数据,这块代码需要和上面pagehelper的代码挨着,
		//否则会出现进行没有分页的情况,
		//挨着上面代码,pagehelper会自动把分页数据返回来,不然就把所有的数据都给你返回来了
		//比如说pageNum=1,pageSize=5,有上面一行代码,虽然你查的是所以数据,但是它
		//只会给你返回5条数据,所有我才第一行自己写了一个查询总共有多少条记录
		List<User> users =  userMapper.findAllUser(user);
		Pager<User> us = new Pager<User>();
		Integer totalRecord = sumData;
		Integer totalPage = totalRecord/pageSize;
		us.setDataList(users);
		us.setPageSize(pageSize);
		us.setCurrentNum(pageNum);
		us.setTotalPage(totalRecord%pageSize==0?totalPage:totalPage+1);
		us.setTotalRecord(totalRecord);
		us.setFirst(pageNum==1?true:false);
		us.setLast(pageNum==totalPage?true:false);
		return us;
	}

}

 

6、写DAO层以及写mapper.xml

public interface UserMapper {
	List<User> findAllUser(@Param(value="user") User user);
	Integer getSize();
}

这是说一下我的UserMapper.xml文件写在了resource下创建的staitc文件夹下

<?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="cn.zilanxuan.mapper.UserMapper">
    
     
     <sql id="j">
		a.id AS "id",
		a.readname AS "readname",
		a.password AS "password",
		a.tel AS "tel",
		a.username AS "username"
     </sql>
     
     <sql id="b">
     	
     </sql>
     
     <select id="findAllUser" resultType="cn.zilanxuan.entity.User">
     	select 
     	<include refid="j"></include>
     	from users a
     	<include refid="b"></include>
     	<where>
     		<!-- 查询手机号 -->
     		<if test="user.tel != null and user.tel != ''">
     		    AND a.tel = #{user.tel} 
     		</if>
     		
     		 <!-- 查询昵称 -->
     		<if test="user.readname != null and user.readname != ''">
     			AND a.readname LIKE concat('%',#{user.readname},'%')
     		</if>
     		
     		<!-- 查询用户名 -->
     		<if test="user.username != null and user.username != ''">
     			AND a.username LIKE concat('%',#{user.username},'%')
     		</if>
     		 
     	</where>
     </select>
      
      
      <select id="getSize" resultType="int">
      	select count(*) from users
      </select>
      
      
</mapper> 

 

7、使用thymeleaf进行分页的页面代码

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
   	<title>thymeleaf方式获取数据及分页</title>
</head>
<body>

   
     
     <h1>-----------(thymeleaf方式获取数据及分页)-------------</h1>
     <h1>用户列表</h1>
     <div>
	    
	    <table>
	    	<thead>
	    		<tr>
	    			<td>ID</td>
	    			<td>昵称</td>
	    			<td>密码</td>
	    			<td>用户名</td>
	    			<td>手机号</td>
	    		</tr>
	    	</thead>
	    	<tbody>
	    		<tr  th:each="info : ${pager.dataList}" >
			        <td th:text="${info.id}"></td>
			        <td th:text="${info.readname}"></td>
			        <th th:text="${info.password}"></th>
			        <th th:text="${info.username}"></th>
			        <th th:text="${info.tel}"></th>
    			</tr>
	    	</tbody>
	    </table>
     </div>
     
     
     
     
     <div>
		  <table>
			  <tr>
				  <td><a th:href="@{/index?pageNum=1}">首页</a></td>
				  <td th:switch="${pager.currentNum}">
				      <p th:case="1"> <a th:href="@{/index?pageNum=1}">上一页</a></p>
				      <p th:case="*"><a th:href="@{/index(pageNum=${pager.currentNum-1})}">上一页</a></p>
				  </td>
				  <td th:switch="${pager.currentNum}">
				       <p th:case="${pager.totalPage}"><a th:href="@{/index(pageNum=${pager.totalPage})}">下一页</a></p>
				       <p th:case="*"><a th:href="@{/index(pageNum=${pager.currentNum+1})}">下一页</a></p>
				  </td>
				  <td><a th:href="@{/index(pageNum=${pager.totalPage})}">尾页</a></td>
			  </tr>
		</table>
		<div>
			当前第<span th:text="${pager.currentNum}">1</span>页;共<span th:text="${pager.totalRecord}">10</span>条记录;共<span th:text="${pager.totalPage}">3</span>页
		</div>
     </div>
</body>
</html>

 

8、使用easyui做分页的页面代码

这是说一下easyui是一个前段框架,需要引入js/css包

easyui官方地址http://www.jeasyui.net/

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>使用easyui方式实现分页</title>
	<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="css/demo.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
	
</head>
<body>
	<body>
	
	<h1>-----------------使用easyui方式实现分页-------------------</h1>
	
	<table id="dg" title="Custom DataGrid Pager" style="width:700px;height:250px"
			data-options="rownumbers:true,singleSelect:true,pagination:true,url:'http://localhost:8080/d',method:'get'">
		<thead>
			<tr>
				<th data-options="field:'id',width:80">ID</th>
				<th data-options="field:'tel',width:100">手机号</th>
				<th data-options="field:'username',width:80,align:'right'">用户名</th>
				<th data-options="field:'password',width:80,align:'right'">密码</th>
				<th data-options="field:'readname',width:250">昵称</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript">
		$(function(){
			var pager = $('#dg').datagrid().datagrid('getPager');	// get the pager of datagrid
			pager.pagination({
				buttons:[{
					iconCls:'icon-search',
					handler:function(){
						alert('search');
					}
				},{
					iconCls:'icon-add',
					handler:function(){
						alert('add');
					}
				},{
					iconCls:'icon-edit',
					handler:function(){
						alert('edit');
					}
				}]
			});			
		})
	</script>
</body>
</body>
</html>

 

到这里就结束了,祝你能有所收获

点击获取demo源码

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值