使用Bootstrap4 + Vue2实现分页查询的示例代码(2)

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);
  }
 });
 }

<script>
 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);
  }
 }
 });
 getUserByPage(0);
 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);
  }
 });
 }
</script>

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

 @Autowired
 private UserService userService;

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

@Service
public class UserServiceImpl implements UserService {

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

 @Autowired
 private UserRepository userRepository;

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