使用Bootstrap4 + Vue2实现分页查询

写在前面
 工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。

• 前端框架：Bootstrap4，Vue.js2
• 后台框架：spring boot，spring data JPA
• 开发工具：IntelliJ IDEA，Maven

实现效果：

会员信息

如何使用Bootstrap+Vue来实现动态table，数据的新增删除等操作，请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除。交代完毕，本文主题开始。

一、使用Bootstrap搭建表格

• 表格区

    

            

                

                

                    

                    
序号
                    
会员号
                    
姓名
                    
手机号
                    
办公电话
                    
邮箱地址
                    
状态
                
                
                

                

                    

                    
{{pageNow*10 + index+1}}
                    
{{user.id}}
                    
{{user.username}}
                    
{{user.mobile}}
                    
{{user.officetel}}
                    
{{user.email}}
                    
正常
                    
注销
                
                
            
        

• 分页区

    

            

                

                     
                
                

                    
                
                

                    {{n}}
                
                

                    
                
                

                    
                
            
        

二、初始化Vue对象及数据

• 创建Vue对象

var vueApp = new Vue({
        el:"#vueApp",
        data:{
            userList:[],
            perPage:10,
            pageNow:0,
            totalPages:0,
            checkedRows:[]
        },
        methods:{
            switchToPage:function (pageNo) {
                if (pageNo < 0 || pageNo >= this.totalPages){
                    return false;
                }
                getUserByPage(pageNo);
            }
        }
    });

• 初始化数据

function getUserByPage(pageNow) {
        $.ajax({
            url:"/user/"+pageNow,
            success:function (datas) {
                vueApp.userList = datas.content;
                vueApp.totalPages = datas.totalPages;
                vueApp.pageNow = pageNow;
            },
            error:function (res) {
                console.log(res);
            }
        });
    }

完整js代码：

三、使用JPA实现分页查询

• controller接收请求

/**
 * 用户相关请求控制器
 * @author louie
 * @date 2017-12-19
 */
@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 分页获取用户
     * @param pageNow 当前页码
     * @return 分页用户数据
     */
    @RequestMapping("/{pageNow}")
    public Page findByPage(@PathVariable Integer pageNow){
        return userService.findUserPaging(pageNow);
    }
}

• JPA分页查询

@Service
public class UserServiceImpl implements UserService {

    @Value("${self.louie.per-page}")
    private Integer perPage;

    @Autowired
    private UserRepository userRepository;

    @Override
    public Page findUserPaging(Integer pageNow) {
        Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id");
        return userRepository.findAll(pageable);
    }
}

---

好了，至此功能完成，工程代码已在GitHub中分享，您可以点击查看或下载，拥抱开源，共享让世界更美好。