spring boot + Vue.js实现表格分页

前台页面

	

		

			

				添加用户
				

					

						

							

								
									×
								
								
修改用户信息
							
							

								

									

										用户代码
										

											
										
									
									

										用户名
										

											 {{'不能为空'}}
										
									

									

										年    龄
										

											
										
									
								

							
							

								关闭
								添加
							
						
					
				
				

					

						

							
编号
							
用户名
							
年龄
							
状态
						
					
					

						

							
{{user.id}}
							
{{user.name}}
							
{{user.age}}
							
default
						
						

							

						
					
				
				

					

						

							
首页

							
上一页

							
…

							
{{item}}

							
…

							
下一页
							
末页
						
					
				

			
			
		
		
	
	

	

后台java代码：

@Controller
@RequestMapping("/user")
public class UserController {
	@Autowired  //注入，xml方式
	private UserMapper userMapper;
        @RequestMapping("/vue")
	@ResponseBody
	PageVue getuserbyid(Integer cpage) {				
		System.out.println("cpage= "+cpage);
		//cpage当前页号
		if (cpage==null) {			
			cpage=1;
		}
		int pageSize=5;   //页面显示行数，自行设置
		int navigatePages=6;//滑动窗口中格子个数，自行设置
		int total=userMapper.getTotal();
		
		int startrow=(cpage-1)*pageSize;		
		List rows=userMapper.selectusersPage(startrow, pageSize);		
	List columns=userMapper.getUserColumn();		
		PageVue page =new PageVue(total, pageSize, navigatePages, cpage, rows,columns);
	    return page;		 
	}

	@RequestMapping("/insert")
	@ResponseBody
	String insert(User user) {		
		int num=userMapper.insert(user);
		 if(num > 0){
		        return "OK";
		    }else{
		        return "FAIL";
		    }
	}

}

分页类，具体实现思路见这篇博客https://blog.csdn.net/lillllllll/article/details/102636208

package com.demo.dao;
import java.util.List;
import java.util.Map;
public class PageVue {   
	private int totalRows;	//总行数
	private int current;    //当前页	
	private int totalPages; //总页数
	private int pageSize;     // 每页行数
	private List  tableColumns;
	public List getTableColumns() {
		return tableColumns;
	}
	public void setTableColumns(List tableColumns) {
		this.tableColumns = tableColumns;
	}
	private List rows;     // 结果集，储存一个页面的数据记录
	private int[] navigatepageNums;	//所有导航页号
	private int navigatePages; //导航页码数，即滑动窗口个数
	
    //导航条上的第一页
    private int navigateFirstPage;
    //导航条上的最后一页
    private int navigateLastPage;	    
    //是否为第一页
    private boolean isFirstPage = false;  
	//是否为最后一页
    private boolean isLastPage = false;

    
    //构造函数
    public PageVue(int totalRows,int pageSize,int navigatePages, int current, List rows,List  tableColumns) {
    	//设置5个属性
    	this.totalRows=totalRows;
    	this.pageSize=pageSize;
    	this. navigatePages=navigatePages;
    	this.current=current;
    	this.rows=rows;  
    	this.tableColumns=tableColumns;
    	//设置8个属性
    	this.calcProperties();
    }
    //计算滑动窗口中的页号，不止一种生成策略，这里采用
    //http://git.oschina.net/free/Mybatis_PageHelper提供的方案来实现
   private int[] calcNavigatepageNums() {
        //当总页数小于或等于导航页码数时
        if (totalPages <= navigatePages) {
            navigatepageNums = new int[totalPages];
            for (int i = 0; i < totalPages; i++) {
                navigatepageNums[i] = i + 1;
            }
        } else { //当总页数大于导航页码数时
            navigatepageNums = new int[navigatePages];
            int startNum = current - navigatePages / 2;
            int endNum = current + navigatePages / 2;

            if (startNum < 1) {
                startNum = 1;
                //(最前navigatePages页
                for (int i = 0; i < navigatePages; i++) {
                    navigatepageNums[i] = startNum++;
                }
            } else if (endNum > totalPages) {
                endNum = totalPages;
                //最后navigatePages页
                for (int i = navigatePages - 1; i >= 0; i--) {
                    navigatepageNums[i] = endNum--;
                }
            } else {
                //所有中间页
                for (int i = 0; i < navigatePages; i++) {
                    navigatepageNums[i] = startNum++;
                }
            }
        }
        return navigatepageNums;
    }
	
	//设置8个属性
    private void calcProperties() {
    	this.totalPages=(int) Math.ceil((double)totalRows/pageSize);
        this.isFirstPage = current == 1;
        this.isLastPage = current == totalPages || totalPages == 0;
//        this.hasPreviousPage = current > 1;
//        this.hasNextPage = current < totalPages;
        this.navigatepageNums=calcNavigatepageNums();
        //计算滑动窗口第一格的页号、最后一格页号
        if (navigatepageNums != null && navigatepageNums.length > 0) {
            this.navigateFirstPage = navigatepageNums[0];
            this.navigateLastPage = navigatepageNums[navigatepageNums.length - 1];   
        }
    }

    //getters setters
   ................
    
}

UserMapper接口，用MyBatis访问数据库

package com.demo.dao;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Repository;

import com.entity.User;
@Mapper
public interface UserMapper {
	List queryAllUser();
	List findnameandage(String name, int age);
	List findnameandageMap(Map map);
	List selectusersPage(int startrow,int num);
	int getTotal();
	@Select("select * from user where id=#{id}")
	User getUserById(Integer id);
	@Update("update user set name=#{name}, age=#{age} where id=#{id}")
	int update(User user);
	@Delete("delete from user where id=#{id}")
	int delete(int id);
	@Insert("insert into user (name,age) value(#{name},#{age})")
	int insert(User user);
	@Select("select COLUMN_NAME from information_schema.COLUMNS where TABLE_SCHEMA = (select database()) and table_name = 'user'")
	List getUserColumn();
}

package com.entity;

public class User {
	private Integer id;
	private String name;
	private int age;

        //getters,setters
        //......

}

运行效果如下：

添加记录效果：