Bootstrap4 + Vue2에서 페이징 쿼리를 구현하는 방법

이 글에서는 Bootstrap4 + Vue2를 사용하여 페이징 쿼리를 구현하는 샘플 코드를 주로 소개하고 참고용으로 올려드립니다.

앞면에 작성

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

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

2. 백엔드 프레임워크: spring boot, spring data JPA

3. 개발 도구: IntelliJ IDEA, Maven

성취 효과:

회원 정보

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

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

테이블 영역

<p class="row">
   <table class="table table-hover table-striped table-bordered table-sm">
    <thead class="">
    <tr>
     <th><input type="checkbox"></th>
     <th>序号</th>
     <th>会员号</th>
     <th>姓名</th>
     <th>手机号</th>
     <th>办公电话</th>
     <th>邮箱地址</th>
     <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(user,index) in userList">
     <td><input type="checkbox" :value="index" v-model="checkedRows"></td>
     <td>{{pageNow*10 + index+1}}</td>
     <td>{{user.id}}</td>
     <td>{{user.username}}</td>
     <td>{{user.mobile}}</td>
     <td>{{user.officetel}}</td>
     <td>{{user.email}}</td>
     <td v-if="user.disenable == 0">正常</td>
     <td v-else>注销</td>
    </tr>
    </tbody>
   </table>
  </p>

페이징 영역

<p class="row mx-auto">
   <ul class="nav justify-content-center pagination-sm">
    <li class="page-item">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-backward" @click="switchToPage(0)"> </i></a>
    </li>
    <li class="page-item">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-backward" @click="switchToPage(pageNow-1)"></i></a>
    </li>
    <li class="page-item" v-for="n in totalPages" :class="{active:n==pageNow+1}">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="switchToPage(n-1)" class="page-link">{{n}}</a>
    </li>
    <li class="page-item">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-forward" @click="switchToPage(pageNow+1)"></i></a>
    </li>
    <li class="page-item">
     <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-forward" @click="switchToPage(totalPages-1)"></i></a>
    </li>
   </ul>
  </p>

2. 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 완료 코드:

<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:&quot;/user/&quot;+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);
 }
}

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

자, 이제 함수가 완료되었습니다. 프로젝트 코드가 GitHub에 공유되었습니다. 클릭하여 볼 수 있습니다. 또는 다운로드하여 오픈 소스를 수용하고 공유하여 세상을 더 나은 곳으로 만드세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

jQuery+CSS를 사용하여 테이블을 구현하는 방법

http 모듈을 사용하여 nodejs를 통해 요청 보내기(자세한 튜토리얼)

Angular를 사용하여 국제화를 구현하는 방법(자세한 튜토리얼)

사용 JQuery는 양식 유효성 검사를 어떻게 구현하며 구체적으로 무엇을 수행해야 합니까?

Vue를 사용하여 여러 클래스를 설정하는 방법

위 내용은 Bootstrap4 + Vue2에서 페이징 쿼리를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!