pagehelper5 + mybatis3 + vue.js + layerpage 实现异步分页 （有源码）

pagehelper5 + mybatis3 + vue.js + layerpage 实现异步分页 （有源码）

所需jar包以及js下载地址密码: fukj

这是我自己做的一个示例

配置文件

    
    
        
            classpath:mapper/*.xml
        
    
    
    
        
            
                
                
                    
                        helperDialect=mysql
                        reasonable=true
                        supportMethodsArguments=true
                        params=count=countSql
                        autoRuntimeDialect=true
                    
                
            
        
    

Dao层

数据交互层使用接口，然后使用mybatis 通过xxxMapper.xml 文件去实现接口
这里我使用了List去接收了数据库的数据，也可以是用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> findAll() throws Exception;
}

Mapper.xml

mybatis 的Xml 文件这里就是一个简单查询查询了所有的用户信息

    
    
        SELECT * FROM user
    
    
 

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> 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> findAll(Integer pageNum,Integer pageSize) throws Exception {
        PageHelper.startPage(pageNum,pageSize);//开始分页,物理分页
        List> list = userDao.findAll();//DB操作查询数据
        PageInfo> pageInfo=new PageInfo>(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> 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"%>



    
    
    
    
    
    
    
    



    
    
            
            

        

        
编号
            
姓名
            
年龄
            
性别
            
爱好
        
         
        
        

        

            
{{value.id}}
            
{{value.user_name}}
            
{{value.user_age}}
            
{{value.user_sex}}
            
{{value.user_hobby}}
        
       

        
    
    

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对象。【如该容器为】：

              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