天天看點
傳回

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

今天簡單給大家分享一下分頁，使用的是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項目

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

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}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >首頁</a></td>
				  <td th:switch="${pager.currentNum}">
				      <p th:case="1"> <a th:href="@{/index?pageNum=1}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >上一頁</a></p>
				      <p th:case="*"><a th:href="@{/index(pageNum=${pager.currentNum-1})}" target="_blank" rel="external nofollow" >上一頁</a></p>
				  </td>
				  <td th:switch="${pager.currentNum}">
				       <p th:case="${pager.totalPage}"><a th:href="@{/index(pageNum=${pager.totalPage})}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >下一頁</a></p>
				       <p th:case="*"><a th:href="@{/index(pageNum=${pager.currentNum+1})}" target="_blank" rel="external nofollow" >下一頁</a></p>
				  </td>
				  <td><a th:href="@{/index(pageNum=${pager.totalPage})}" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >尾頁</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" target="_blank" rel="external nofollow" >
	<link rel="stylesheet" type="text/css" href="css/themes/icon.css" target="_blank" rel="external nofollow" >
	<link rel="stylesheet" type="text/css" href="css/demo.css" target="_blank" rel="external nofollow" >
	<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源碼

分頁 springboot pagehelper
上一篇: Springboot中使用PageHelper插件實作分頁效果
下一篇: Springboot + pagehelper + mybatis分頁

繼續閱讀