Esempio di codice di esempio di ricerca a pagina con Bootstrap4 + Vue2

Scritto in anticipo

Il progetto è progettato per essere separato in front-end e back-end, utilizzando Nginx come server di risorse per il front-end e implementando anche l'proxy inverso per i servizi di back-end. Il back-end è un progetto Java Web, utilizzando Tomcat per distribuire i servizi.

Frameword di front-end: Bootstrap4, Vue.js2
Frameword di back-end: spring boot, spring data JPA
Strumenti di sviluppo: IntelliJ IDEA, Maven

Effetto di implementazione:

Informazioni dei membri

Come utilizzare Bootstrap + Vue per implementare una tabella dinamica, operazioni come l'aggiunta e la rimozione di dati, consultare l'implementazione dinamica della tabella con Bootstrap + Vue.js per la visualizzazione, aggiunta e rimozione. Fatto questo, iniziamo il tema dell'articolo.

1. Costruire una tabella utilizzando Bootstrap

Zona della tabella

<div class="row">
   <table class="table table-hover table-striped table-bordered table-sm">
    <thead class="">
    <tr>
     <th><input type="checkbox"></th>
     <th>Numero di ordine</th>
     <th>Número de membros</th>
     <th>Nome</th>
     <th>Numero di cellulare</th>
     <th>Telefono ufficio</th>
     <th>Indirizzo email</th>
     <th>Stato</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">Normale</td>
     <td v-else>Disconnettiti</td>
    </tr>
    </tbody>
   </table>
  </div>

Zona di paginazione

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

2. Initialize Vue object and data

Create Vue object

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

Initialize data

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

Complete JavaScript code:

<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. Implementing pagination query with JPA

Controller receives requests

/**
 * Controller for user-related requests
 * @author louie
 * @date 2017-12-19
 */
@RestController
@RequestMapping("/user")
public class UserController {
 @Autowired
 private UserService userService;
 /**
 * Fetch users by pagination
 * @param pageNow Current page number
 * @return dati utente a pagina
 */
 @RequestMapping("/{pageNow}")
 public Page<User> findByPage(@PathVariable Integer pageNow){
 return userService.findUserPaging(pageNow);
 }
}

Query di pagina 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);
 }
}

Bene, la funzione è stata completata, il codice del progetto è stato condiviso su GitHub, puoi fare clic per visualizzare o scaricare, abbraccia l'open source, condividi e rendi il mondo un posto migliore.

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per il tuo studio e che tu sostenga il tutorial di urla.

Dichiarazione: il contenuto di questo articolo è stato tratto da Internet, di proprietà del rispettivo autore. Il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, il sito web non detiene i diritti di proprietà, non è stato modificato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, sei invitato a inviare una email a: notice#oldtoolbag.com (al momento dell'invio dell'email, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito eliminerà immediatamente i contenuti sospetti di violazione del copyright.

Guida di base