Bootstrap4 et Vue2 implémentent la fonction de requête de pagination (code ci-joint)-js tutoriel-php.cn

Bootstrap4 et Vue2 implémentent la fonction de requête de pagination (code ci-joint)

php中世界最好的语言

Libérer： 2018-04-14 10:37:29

original

2362 Les gens l'ont consulté

Cette fois, je vous apporte Bootstrap4 et Vue2 pour implémenter la fonction de requête de pagination (avec code). Quelles sont les précautions pour implémenter la fonction de requête de pagination entre Bootstrap 4 et Vue2. . Voici le combat réel. Jetons un coup d’œil au cas.

est écrit devant

Le projet est conçu pour séparer le front-end et le back-end, en utilisant Nginx comme serveur de ressources front-end, tout en réalisant le proxy inverse du service back-end. L'arrière-plan est un projet Web Java, utilisant Tomcat pour déployer des services.

Framework front-end : Bootstrap4, Vue.js2
Framework backend : spring boot, spring data JPA
Développement outils : IntelliJ IDEA, Maven

Comment utiliser Bootstrap + Vue pour implémenter une table dynamique, l'ajout et la suppression de données et d'autres opérations, veuillez consulter Utilisation de Bootstrap + Vue.js pour implémenter l'affichage dynamique, l'ajout et la suppression de tables. Une fois l’explication terminée, le sujet de cet article commence.

1. Utilisez Bootstrap pour créer une table

Coin table

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

Copier après la connexion

Zone de pagination

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

Copier après la connexion

2. Initialiser Vue objet et données

Créer un objet 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);
   }
  }
 });

Copier après la connexion

Données d'initialisation

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

Copier après la connexion

Code js complet :

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

Copier après la connexion

3. Utilisez JPA pour implémenter la requête de pagination

le contrôleur reçoit la demande

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

Copier après la connexion

Requête de pagination 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);
 }
}

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Analyse des étapes pour créer une application multipage avec webpack

Comment ajouter un barre de progression pour télécharger des images dans axios

Où se situe ce point lorsque vue utilise axios

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!