Bootstrap4 + Vue2에서 페이징 쿼리를 구현하는 방법-JS 튜토리얼-php.cn

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

亚连

풀어 주다： 2018-06-19 14:55:40

원래의

2605명이 탐색했습니다.

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

앞면에 작성

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

프런트엔드 프레임워크: Bootstrap4, Vue.js2
백엔드 프레임워크: spring boot, spring data JPA
개발 도구: 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에 공유되었습니다. 클릭하여 볼 수 있습니다. 또는 다운로드하여 오픈 소스를 수용하고 공유하여 세상을 더 나은 곳으로 만드세요.

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