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.

1. Front-End-Framework: Bootstrap4, Vue.js2

2. Back-End-Framework: Spring Boot, Spring Data JPA

3. 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:&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. 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!