Bootstrap4 및 Vue2는 페이징 쿼리 기능을 구현합니다(코드 첨부).

이번에는 페이징 쿼리 기능을 구현하기 위한 Bootstrap4 및 Vue2를 가져왔습니다. (코드 포함) Bootstrap 4와 Vue2에서 페이징 쿼리 기능을 구현하기 위해 구현한 notes는 무엇입니까? 살펴보자.

앞에 적음

이 프로젝트는 Nginx를 프런트엔드 리소스 서버로 사용하고 동시에 백엔드 서비스의 역방향 프록시를 구현하여 프런트엔드와 백엔드를 분리하도록 설계되었습니다. 배경은 Tomcat을 사용하여 서비스를 배포하는 Java 웹 프로젝트입니다.

1. 프런트엔드 프레임워크: Bootstrap4, Vue.js2

2. 백엔드 프레임워크: 스프링 부트, 스프링 데이터 JPA

3. 개발 도구: IntelliJ IDEA, Maven

Bootstrap + Vue를 사용하여 동적 테이블, 데이터 추가 및 삭제 및 기타 작업을 구현하는 방법은 Bootstrap + Vue.js를 사용하여 테이블의 동적 표시, 추가 및 삭제 구현을 확인하세요. 설명이 끝나면 이 글의 주제가 시작됩니다.

1. 부트스트랩을 사용하여 테이블 만들기

테이블 공간

<p>
   </p>

                                                                                                                                                 

	序号	会员号	姓名	手机号	办公电话	邮箱地址	状态
	{{pageNow*10 + index+1}}	{{user.id}}	{{user.username}}	{{user.mobile}}	{{user.officetel}}	{{user.email}}	正常	注销

  

페이지 매김 영역

<p>
   </p>

    
•            
    
•           
    
•      {{n}}     
    
•           
    
•           
   

  

2. Vue객체및 데이터

를 초기화합니다. Vue 객체 만들기

var vueApp = new Vue({
  el:"#vueApp",
  data:{
   userList:[],
   perPage:10,
   pageNow:0,
   totalPages:0,
   checkedRows:[]
  },
  methods:{
   switchToPage:function (pageNo) {
    if (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 코드:

<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>

3. JPA를 사용하여 페이징 쿼리 구현

컨트롤러가 요청을 수신합니다

/**
 * 用户相关请求控制器
 * @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);
 }
}</user>

JPA 페이징 쿼리

@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);
 }
}</user>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

webpack을 사용하여 다중 페이지 애플리케이션을 구축하는 단계 분석

axios 이미지 업로드를 위해 진행률 표시줄을 추가하는 방법

vue일 때 axios를 사용할 때 이 지점은 어디입니까? axios를 사용합니다

위 내용은 Bootstrap4 및 Vue2는 페이징 쿼리 기능을 구현합니다(코드 첨부).의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!