pagehelper5 + mybatis3 + vue.js + layerpage 實現異步分頁 （有源碼）
所需jar包以及js下載地址密碼: fukj
配置文件
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource"/>
<property name="mapperLocations">
<array>
<value>classpath:mapper/*.xml</value>
</array>
</property>
<property name="typeAliasesPackage" value="com.isea533.mybatis.model"/>
<property name="plugins">
<array>
<bean class="com.github.pagehelper.PageInterceptor">
<!-- 這里的幾個配置主要演示如何使用，如果不理解，一定要去掉下面的配置 -->
<property name="properties">
<value>
helperDialect=mysql
reasonable=true
supportMethodsArguments=true
params=count=countSql
autoRuntimeDialect=true
</value>
</property>
</bean>
</array>
</property>
</bean>
Dao層
數據交互層使用接口，然后使用mybatis 通過xxxMapper.xml 文件去實現接口
這里我使用了List<Map>去接收了數據庫的數據，也可以是用Bean也就是PoJo 類去接收數據映射都沒有問題，只是我懶得去寫PoJo了所以就用Map 代替了效果都是一樣的。
package cn.yrgequene.dao.user;
import java.util.List;
import java.util.Map;
/**
*用戶 DAO 數據交互層
*@author yrge
*/
public interface UserDao {
/**
* 查詢所有的用戶
* @return
* @throws Exception
*/
public List<Map<String, Object>> findAll() throws Exception;
}
Mapper.xml
mybatis 的Xml 文件這里就是一個簡單查詢查詢了所有的用戶信息
<?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.yrgequene.dao.user.UserDao">
<select id="findAll">
SELECT * FROM user
</select>
</mapper>
service 層 接口
service層的接口 這里使用了 pagehelper的物理分頁進行分頁，也可以在controller層分頁但是官方以及我個人都建議在service層 ，分層做事好管理好定位。
package cn.yrgequene.service.User;
import java.util.Map;
import org.springframework.stereotype.Service;
import com.github.pagehelper.PageInfo;
/**
* 用戶的service 接口
* @author yrge
*
*/
@Service
public interface IUserService{
/**
* 查詢所有的用戶
* @param pageNum
* @param pageSize
* @return
* @throws Exception
*/
public PageInfo<Map<String, Object>> findAll(Integer pageNum,Integer pageSize) throws Exception;
}
service 層實現、
注釋寫的很詳細，這里就不廢話了。
package cn.yrgequene.service.User.impl;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import cn.yrgequene.dao.user.UserDao;
import cn.yrgequene.service.BaseService;
import cn.yrgequene.service.User.IUserService;
/**
* 用戶的server 實現層
* @author yrge
*/
public class UserService extends BaseService implements IUserService {
@Autowired
private UserDao userDao;
/**
* 查詢出所有數據
*/
@Override
public PageInfo<Map<String, Object>> findAll(Integer pageNum,Integer pageSize) throws Exception {
PageHelper.startPage(pageNum,pageSize);//開始分頁,物理分頁
List<Map<String, Object>> list = userDao.findAll();//DB操作查詢數據
PageInfo<Map<String, Object>> pageInfo=new PageInfo<Map<String,Object>>(list); //將查詢到的數據封裝到List中
return pageInfo;
}
}
controller 控制層
controller控制層 因為沒有使用shrio安全控件所以我將jsp頁面放在了WEB-INF目錄下要用controller去跳轉到jsp 頁面
package cn.yrgequene.controller.user;
import java.io.PrintWriter;
import java.util.Map;
import javax.servlet.http.HttpServletResponse;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import com.github.pagehelper.PageInfo;
import cn.yrgequene.controller.BaseController;
import cn.yrgequene.service.User.IUserService;
import net.sf.json.JSONObject;
@Controller
@RequestMapping(value="user")
public class UserController extends BaseController{
@Autowired
private IUserService userService;
@RequestMapping(value="page_test")
public String topageTest(){
return "/page_test";
}
@RequestMapping(value="list")
public void findAll(Integer pageNum,HttpServletResponse response){
try {
PageInfo<Map<String, Object>> pageInfo=userService.findAll(pageNum, 10);
JSONObject jsonObject=new JSONObject();
jsonObject.put("pageInfo", pageInfo);
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println(jsonObject.toString());
out.flush();
out.close();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
**jsp **
為了方便路徑我使用了jsp文件，也可以使用HTML，實現方式一樣。
v-for vue 框架的循環 這個id=for_w標識是告訴 vue 插件自己的作用范圍 后面JS文件會有一個el就是寫這個，接著往后看。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="${base_path}/static/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="${base_path}/static/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="${base_path}/static/static/h-ui/css/H-ui.reset.css" />
<link rel="stylesheet" type="text/css" href="${base_path}/static/static/h-ui/css/index.css" />
<link rel="stylesheet" type="text/css" href="${base_path}/static/static/h-ui/css/laypage.css" />
<style type="text/css">
.mt-200{
margin-top:10%;
}
#page1{
margin-top:20px;
margin-left:35%;
}
</style>
<title>分頁測試</title>
</head>
<body>
<div class="page-container">
<table class="table table-border table-bordered table-bg radius table-hover mt-200">
<thead class="text-c">
<tr">
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>愛好</th>
</tr>
</thead>
<tbody id="for_w">
<tr class="text-c" v-for="value in json">
<td style="width:20%;overflow-x:hidden;overflow-y:hidden;">{{value.id}}</td>
<td style="width:20%;overflow-x:hidden;overflow-y:hidden;">{{value.user_name}}</td>
<td style="width:20%;overflow-x:hidden;overflow-y:hidden;">{{value.user_age}}</td>
<td style="width:20%;overflow-x:hidden;overflow-y:hidden;">{{value.user_sex}}</td>
<td style="width:20%;overflow-x:hidden;overflow-y:hidden;">{{value.user_hobby}}</td>
</tr>
</tbody>
</table>
<div id="page1" ></div>
</div>
<script src="${base_path}/static/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="${base_path}/static/lib/layer/2.4/layer.js"></script>
<script src="${base_path}/static/static/h-ui/js/laypage.js"></script>
<script src="${base_path}/static/static/h-ui/js/vue1.0.28.js"></script>
<script src="${base_path}/static/static/h-ui/js/page.js"></script>
</body>
</html>
js 文件
使用了 layerpage 的插件，膜拜下賢心大神 哈哈 大概就是這樣大家有什么疑問可以在下面留言。
//以下將以jquery.ajax為例，演示一個異步分頁
/*
* 實例化 Vue
*/
var vm =new Vue({
el:'#for_w', //剛才說到的for_w
data: {
json: [] //定義一個空的json
}
});
function demo(curr){
$.ajax({
url:"list.action",
type:"POST",
data:{
"pageNum":curr||1,
},
dataType:"json",
success:function(data){
$("#addjson").empty();
var json=eval(data)
vm.json =json.pageInfo.list //給 json 賦值
//顯示分頁
laypage({
cont: 'page1', //容器。值支持id名、原生dom對象，jquery對象。【如該容器為】：<div id="page1"></div>
pages: json.pageInfo.pages, //通過后臺拿到的總頁數
curr: curr || 1, //當前頁
jump: function(obj, first){ //觸發分頁后的回調
if(!first){ //點擊跳頁觸發函數自身，并傳遞當前頁：obj.curr
demo(obj.curr);
}
}
});
},
error:function(er){
layer.msg("服務器出錯，請重試！"+console.log(er));
console.log(er)
}
});
};
//運行
demo();
這是源碼密碼: pcun
