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