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
网友评论