So implementieren Sie eine Paging-Abfrage in Bootstrap4 + Vue2-js-Tutorial-php.cn

So implementieren Sie eine Paging-Abfrage in Bootstrap4 + Vue2

亚连

Freigeben： 2018-06-19 14:55:40

Original

2521 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!