Heim > Artikel > Web-Frontend > So implementieren Sie eine Paging-Abfrage in Bootstrap4 + Vue2
In diesem Artikel wird hauptsächlich der Beispielcode für die Verwendung von Bootstrap4 + Vue2 zur Implementierung der Paging-Abfrage vorgestellt. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.
Im Vordergrund geschrieben
Das Projekt ist für die Front-End- und Back-End-Trennung konzipiert und verwendet gleichzeitig Nginx als Front-End-Ressourcenserver Realisierung des Reverse-Proxys des Back-End-Dienstes. Der Hintergrund ist ein Java-Webprojekt, das Tomcat zum Bereitstellen von Diensten verwendet.
Front-End-Framework: Bootstrap4, Vue.js2
Back-End-Framework: Spring Boot, Spring Data JPA
Entwicklungstools: IntelliJ IDEA, Maven
Erfolgseffekt:
Informationen zu Mitgliedern
Wie Sie Bootstrap + Vue zum Implementieren dynamischer Tabellen, zum Hinzufügen und Löschen von Daten usw. verwenden, erfahren Sie unter Verwenden von Bootstrap + Vue.js zum Implementieren der dynamischen Anzeige, Hinzufügung und Löschung von Tabellen. Nachdem die Erklärung abgeschlossen ist, beginnt das Thema dieses Artikels.
1. Verwenden Sie Bootstrap, um eine Tabelle zu erstellen
Tabellenbereich
<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>
Page-Bereich
<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 das Vue-Objekt und die Daten
Vue-Objekt erstellen
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); } } });
Daten initialisieren
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-Code vervollständigen:
<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. Verwenden JPA zur Implementierung der Paging-Abfrage
Controller empfängt Anfrage
/** * 用户相关请求控制器 * @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-Paging-Abfrage
@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); } }
Okay, jetzt ist die Funktion abgeschlossen, der Projektcode wurde in GitHub geteilt , können Sie zum Ansehen oder Herunterladen anklicken, Open Source nutzen und teilen, um die Welt zu einem besseren Ort zu machen.
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie eine Tabelle mit jQuery+CSS
Verwenden Sie das http-Modul, um Anfragen über nodejs zu senden (ausführlich Tutorial)
Wie implementiert man die Internationalisierung mit Angular (ausführliches Tutorial)
Wie implementiert man die Formularvalidierung mit JQuery, was ist konkret zu tun?
So richten Sie mehrere Klassen mit Vue ein
Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine Paging-Abfrage in Bootstrap4 + Vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!