VUE + SpringBoot implementiert die Paging-Funktion

VUE + SpringBoot implementiert die Paging-Funktion

Dieser Artikel stellt hauptsächlich vor, wie paginierte Listendaten in Vue + SpringBoot implementiert werden.

1. Effektanzeige

2. VUE-Code

VUE-Ansichtsdefinition

<el-Zeile>
            <el-Tabelle
                :data="Tabellendaten"
                Stil="Breite: 100%">
                <el-table-column
                    v-for="(Daten, Index) im Tabellenkopf"
                    :Schlüssel="Index"
                    :prop="Daten.prop"
                    :label="Daten.label"
                    :min-width="Daten['min-width']"
                    :align="Daten.align">
                </el-Tabellenspalte>
                <el-table-column
                    Bezeichnung = "Vorgang"
                    Mindestbreite = "240">
                    <template slot-scope="Umfang">
                        <el-button type="success" size="mini" @click="toRecharge(scope)">Aufladen</el-button>
                        <el-button size="mini" @click="toView(scope)">Anzeigen</el-button>
                        <el-button type="primary" size="mini" @click="toEdit(scope)">Bearbeiten</el-button>
                        <el-button type="danger" size="mini" @click="deleteCard(scope)">Löschen</el-button>
                    </Vorlage>
                </el-Tabellenspalte>
            </el-Tabelle>
            <br>
            <el-pagination
                @size-change="Größenänderungsgriff"
                @current-change="AktuelleÄnderung handhaben"
                :aktuelle-seite="pagination.pageIndex"
                :Seitengrößen="[5, 10, 20, 30, 40]"
                :Seitengröße=Paginierung.Seitengröße
                Layout = "Gesamt, Größen, Zurück, Pager, Weiter, Jumper"
                :total=pagination.total>
            </el-pagination>
</el-row>

Wichtige Punkte:

Datentypdefinition:

tableData: definiert die Hintergrunddatenmodelldefinition.

tableHeader: definiert die Bindungsbeziehung zwischen der Tabelle und den Hintergrunddaten.

Paginierung: Definiert das Paginierungsdatenmodell, hauptsächlich einschließlich (pageIndex: aktuelle Seite, pageSize: Seitengröße, total: Gesamtzahl der Datensätze)

Methodendefinition:

handleSizeChange: Seitengröße aktualisieren

handleCurrentChange: Aktuelle Seite aktualisieren

VUE-Modelldefinition (Daten)

Tabellendaten: [],
        Pagination:
            Seitenindex: 1,
            Seitengröße: 10,
            gesamt: 0,
        },
        Tabellenkopfzeile: [
                    {
                        Stütze: "sid",
                        Bezeichnung: 'Nummer',
                        ausrichten: 'links'
                    },
                    {
                        Eigenschaft: "Passwort",
                        Bezeichnung: 'Passwort',
                        ausrichten: 'links'
                    },
                    {
                        Requisite: "Zustand",
                        Bezeichnung: "Status",
                        ausrichten: 'links'
                    },
                    {
                        Requisite: "Geld",
                        Bezeichnung: 'Betrag',
                        ausrichten: 'links'
                    },
                    {
                        Requisite: "studentSid",
                        Bezeichnung: 'Studenten-SID',
                        ausrichten: 'links'
                    }
 
                ]

VUE-Dateninitialisierung

VUE-Methodendefinition: Fordern Sie die Hintergrunddatenschnittstelle an, um zugehörige Daten zu laden (Methode)

init () {
        var selbst = dies
         dies.$axios({
            Methode: 'post',
            url:'/Karte/Seitefinden',
            Daten: {"Seite": dieser.pagination.Seitenindex, "Limit": diese.pagination.Seitengröße},
            Überschriften:{
                'Content-Type':'application/json;charset=utf-8' //Einfach hier ändern}
        }).dann(res => {
            konsole.log(res);
           selbst.pagination.total = res.data.data.total_count;
           self.tableData = res.data.data.list;
 
        })
          .catch(Funktion (Fehler) {
            console.log(Fehler)
          })
        },
        handleSizeChange(Wert) {
                this.pagination.pageSize = Wert;
                diese.pagination.pageIndex = 1;
                dies.init();
        },
        handleCurrentChange(Wert) {
                this.pagination.pageIndex = Wert;
                dies.init();
        },

Funktionsdefinition des VUE-Deklarationszyklus: Rufen Sie die VUE-Methodendefinition auf, um den Dateninitialisierungsprozess abzuschließen.

Rufen Sie in der VUE-Deklarationszyklusfunktion mounted() init auf, um den Dateninitialisierungsprozess abzuschließen.

montiert: Funktion () {
      dies.init()
 }

3. SpringBoot-Code

Entitätsdefinition

Paket com.zzg.entity;
 
importiere java.math.BigDecimal;
importiere java.util.Date;
 
importiere org.springframework.format.annotation.DateTimeFormat;
 
importiere com.fasterxml.jackson.annotation.JsonFormat;
importiere com.zzg.common.BaseModel;
 
öffentliche Klasse TCard erweitert BaseModel {
    /**
  * 
  */
 private statische endgültige lange SerialVersionUID = 1035674221133528445L;
 
 private Integer-Seite;
 
    privates String-Passwort;
 
    privater String-Status;
 
    privates BigDecimal-Geld;
    
    @DateTimeFormat(Muster="jjjj-MM-tt")
    @JsonFormat(Muster="jjjj-MM-tt",Zeitzone="GMT+8")
    privates Datum Sternzeit;
 
    @DateTimeFormat(Muster="jjjj-MM-tt")
    @JsonFormat(Muster="jjjj-MM-tt",Zeitzone="GMT+8")
    privates Datum, Endzeit;
 
    private Integer-Studenten-ID;
 
    öffentliche Ganzzahl getSid() {
        Rücksendeseite;
    }
 
    öffentliche void setSid(Integer sid) {
        dies.sid = sid;
    }
 
    öffentliche Zeichenfolge getPassword() {
        Passwort zurückgeben;
    }
 
    public void setPassword(String Passwort) {
        this.password = Passwort == null ? null : password.trim();
    }
 
    öffentlicher String getState() {
        Rückgabezustand;
    }
 
    public void setState(String status) {
        dieser.zustand = zustand == null? null: zustand.trim();
    }
 
    öffentliche BigDecimal getMoney() {
        Geld zurückgeben;
    }
 
    öffentliche Leere setzeGeld(BigDecimal Geld) {
        dieses.Geld = Geld;
    }
 
    öffentliches Datum getStarTime() {
        gib Sternzeit zurück;
    }
 
    öffentliche void setStarTime(Datum Sternzeit) {
        dies.starTime = Sternzeit;
    }
 
    öffentliches Datum getEndTime() {
        Endzeit zurückgeben;
    }
 
    öffentliche void setEndTime(Datum Endzeit) {
        dies.endTime = Endzeit;
    }
 
    öffentliche Ganzzahl getStudentSid() {
        Studenten-ID zurückgeben;
    }
 
    öffentliche void setStudentSid(Integer studentSid) {
        diese.studentSid = studentSid;
    }
}

Mapper-Definition

Paket com.zzg.mapper;
 
importiere java.util.List;
importiere java.util.Map;
 
importiere com.zzg.entity.TCard;
 
öffentliche Schnittstelle TCardMapper {
 int deleteByPrimaryKey(Integer sid);
 
 int insert(TCard-Datensatz);
 
 int insertSelective(TCard-Datensatz);
 
 TCard selectByPrimaryKey(Integer sid);
 
 int updateByPrimaryKeySelective(TCard-Datensatz);
 
 int updateByPrimaryKey(TCard-Datensatz);
 
 /**
  * Methodenerweiterung */
 List<TCard> Auswahl(Map<String, Object> Parameter);
 
 Integer-Anzahl (Map<String, Object>-Parameter);
 
 void batchInsert(List<TCard> list);
 
 void batchUpdate(Liste<TCard> Liste);
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zzg.mapper.TCardMapper">
  <resultMap id="BaseResultMap" Typ="com.zzg.entity.TCard">
    <id Spalte="sid" jdbcType="INTEGER" Eigenschaft="sid" />
    <result column="Passwort" jdbcType="VARCHAR" property="Passwort" />
    <Ergebnis Spalte="Status" jdbcType="VARCHAR" Eigenschaft="Status" />
    <Ergebnisspalte="Geld" jdbcType="DECIMAL" Eigenschaft="Geld" />
    <Ergebnisspalte="Sternzeit" jdbcType="DATUM" Eigenschaft="Sternzeit" />
    <Ergebnisspalte="Endzeit" jdbcType="DATUM" Eigenschaft="Endzeit" />
    <Ergebnis Spalte="Studenten-ID" jdbcType="INTEGER" Eigenschaft="Studenten-ID" />
  </resultMap>
  <sql id="Basisspaltenliste">
    sid, Passwort, Status, Geld, Startzeit, Endzeit, Studenten-ID
  </sql>
  <sql id="Bedingung">
  </sql>
  <select id="auswählen" parameterType="map" resultMap="BaseResultMap">
    wählen 
    <include refid="Basisspaltenliste" />
    von t_card
    wobei 1 = 1
    <include refid="Zustand"></include>
  </Auswählen>
  <select id="Anzahl" Parametertyp="Karte" Ergebnistyp="java.lang.Integer">
    wählen 
     Anzahl(1)
    von t_card
    wobei 1 = 1
    <include refid="Zustand"></include>
  </Auswählen>
  <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
    wählen 
    <include refid="Basisspaltenliste" />
    von t_card
    wobei sid = #{sid,jdbcType=INTEGER}
  </Auswählen>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
    von t_card löschen
    wobei sid = #{sid,jdbcType=INTEGER}
  </löschen>
  <insert id="insert" parameterType="com.zzg.entity.TCard">
    in t_card einfügen (sid, Passwort, Status, 
      Geld, Sternzeit, Endzeit, 
      Studenten-ID)
    Werte (#{sid,jdbcType=INTEGER}, #{password,jdbcType=VARCHAR}, #{state,jdbcType=VARCHAR}, 
      #{Geld,jdbcType=DECIMAL}, #{Sternzeit,jdbcType=DATUM}, #{Endzeit,jdbcType=DATUM}, 
      #{studentSid,jdbcType=INTEGER})
  </einfügen>
  <insert id="insertSelective" parameterType="com.zzg.entity.TCard">
    in t_card einfügen
    <trim Präfix="(" Suffix=")" SuffixOverrides=",">
      <if test="sid != null">
        Seite,
      </if>
      <if test="Passwort != null">
        Passwort,
      </if>
      <if test="Zustand != null">
        Zustand,
      </if>
      <if test="Geld != null">
        Geld,
      </if>
      <if test="Sternzeit != null">
        Sternzeit,
      </if>
      <if test="endTime != null">
        Endzeit,
      </if>
      <if test="studentSid != null">
        Studenten-ID,
      </if>
    </trimmen>
    <trim Präfix="Werte("Suffix=")" SuffixOverrides=",">
      <if test="sid != null">
        #{sid,jdbcType=INTEGER},
      </if>
      <if test="Passwort != null">
        #{Passwort,jdbcType=VARCHAR},
      </if>
      <if test="Zustand != null">
        #{Status,jdbcType=VARCHAR},
      </if>
      <if test="Geld != null">
        #{Geld,jdbcType=DECIMAL},
      </if>
      <if test="Sternzeit != null">
        #{starTime,jdbcType=DATUM},
      </if>
      <if test="endTime != null">
        #{endTime,jdbcType=DATE},
      </if>
      <if test="studentSid != null">
        #{studentSid,jdbcType=INTEGER},
      </if>
    </trimmen>
  </einfügen>
  <update id="updateByPrimaryKeySelective" parameterType="com.zzg.entity.TCard">
    t_card aktualisieren
    <Satz>
      <if test="Passwort != null">
        Passwort = #{Passwort,jdbcType=VARCHAR},
      </if>
      <if test="Zustand != null">
        Status = #{Status,jdbcType=VARCHAR},
      </if>
      <if test="Geld != null">
        Geld = #{Geld,jdbcType=DECIMAL},
      </if>
      <if test="Sternzeit != null">
        Sternzeit = #{Sternzeit,jdbcType=DATUM},
      </if>
      <if test="endTime != null">
        Endzeit = #{Endzeit,jdbcType=DATUM},
      </if>
      <if test="studentSid != null">
        student_id = #{studentSid,jdbcType=INTEGER},
      </if>
    </Satz>
    wobei sid = #{sid,jdbcType=INTEGER}
  </Aktualisieren>
  <update id="updateByPrimaryKey" parameterType="com.zzg.entity.TCard">
    t_card aktualisieren
    Passwort festlegen = #{password,jdbcType=VARCHAR},
      Status = #{Status,jdbcType=VARCHAR},
      Geld = #{Geld,jdbcType=DECIMAL},
      Sternzeit = #{Sternzeit,jdbcType=DATUM},
      Endzeit = #{Endzeit,jdbcType=DATUM},
      student_id = #{studentSid,jdbcType=INTEGER}
    wobei sid = #{sid,jdbcType=INTEGER}
  </Aktualisieren>
</mapper>

Servicedefinition

Paket com.zzg.service;
 
importiere java.util.List;
importiere java.util.Map;
 
importiere com.zzg.common.BaseService;
importiere com.zzg.common.entity.PageDate;
importiere com.zzg.common.entity.PageParam;
importiere com.zzg.entity.TCard;
 
öffentliche Schnittstelle TCardService erweitert BaseService<TCard> {
 /**
  * Benutzerdefinierte Seitennummerierung * 
  * @param Parameter
  * @param rb
  * @zurückkehren
  */
 öffentliche PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb);
 
 /**
    * Benutzerdefinierte Abfrage * @param parame
  * @zurückkehren
  */
 öffentliche List<TCard> Auswahl(Map<String, Object> Parameter);
 
 /**
  * Benutzerdefinierte Statistiken * @param parame
  * @zurückkehren
  */
 öffentliche Integer-Anzahl (Map<String, Object>-Parameter);
 
 /**
  * Benutzerdefinierte Batcheinfügung * @param-Liste
  */
 öffentliche void batchInsert(Liste<TCard> Liste);
 
 /**
  * Benutzerdefinierte Batch-Aktualisierung * @param-Liste
  */
 öffentliche void batchUpdate(Liste<TCard> Liste);
 
 /**
  * Datensatz aufladen* @param tCard
  */
 öffentliches Aufladen ohne Vorankündigung (TCard tCard);
 
}
Paket com.zzg.service.impl;
 
importiere java.math.BigDecimal;
importiere java.util.List;
importiere java.util.Map;
 
importiere org.springframework.beans.factory.annotation.Autowired;
importiere org.springframework.stereotype.Service;
 
importiere com.github.pagehelper.PageHelper;
importiere com.github.pagehelper.PageInfo;
importiere com.zzg.common.AbstractService;
importiere com.zzg.common.entity.PageDate;
importiere com.zzg.common.entity.PageParam;
importiere com.zzg.entity.TCard;
importiere com.zzg.mapper.TCardMapper;
importiere com.zzg.service.TCardService;
 
@Service
öffentliche Klasse TCardServiceImpl erweitert AbstractService<TCard> implementiert TCardService {
 @Autowired
 TCardMapper-Mapper;
 
 öffentliche int insert(TCard-Datensatz) {
  // TODO Automatisch generierter Methodenstummel
  returniere Mapper.Insert(Datensatz);
 }
 
 public int insertSelective(TCard-Datensatz) {
  // TODO Automatisch generierter Methodenstummel
  returniere mapper.insertSelective(Datensatz);
 }
 
 öffentliche TCard selectByPrimaryKey(Integer sid) {
  // TODO Automatisch generierter Methodenstummel
  gibt mapper.selectByPrimaryKey(sid) zurück;
 }
 
 public int updateByPrimaryKeySelective(TCard-Datensatz) {
  // TODO Automatisch generierter Methodenstummel
  returniere mapper.updateByPrimaryKeySelective(Datensatz);
 }
 
 public int updateByPrimaryKey(TCard-Datensatz) {
  // TODO Automatisch generierter Methodenstummel
  returniere mapper.updateByPrimaryKey(Datensatz);
 }
 
 öffentliche Leere deleteByPrimaryKey(Integer sid) {
  // TODO Automatisch generierter Methodenstummel
  mapper.deleteByPrimaryKey(sid);
 }
 
 öffentliche PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb) {
  // TODO Automatisch generierter Methodenstummel
  PageHelper.startPage(rb.getPageNo(), rb.getLimit());
  Liste<TCard> rs = mapper.select(parame);
  PageInfo<TCard> pageInfo = neue PageInfo<TCard>(rs);
  gibt super.page zurück (pageInfo.getList(), pageInfo.getPageNum(), pageInfo.getPageSize(), pageInfo.getTotal());
 }
 
 öffentliche Liste<TCard> Auswahl(Map<String, Object> Parameter) {
  // TODO Automatisch generierter Methodenstummel
  returniere Mapper.Select(Parameter);
 }
 
 öffentliche Integer-Anzahl (Map<String, Object> Parameter) {
  // TODO Automatisch generierter Methodenstummel
  returniere Mapper.Anzahl(Parameter);
 }
 
 öffentliche void batchInsert(Liste<TCard> Liste) {
  // TODO Automatisch generierter Methodenstummel
  mapper.batchInsert(Liste);
 }
 
 öffentliche void batchUpdate(Liste<TCard> Liste) {
  // TODO Automatisch generierter Methodenstummel
  mapper.batchUpdate(Liste);
 }
 
 öffentliches Aufladen mit ungültiger Aufladung (TCard tCard) {
  // TODO Automatisch generierter Methodenstummel
  TCard-Objekt = mapper.selectByPrimaryKey(tCard.getSid());
  BigDecimal money = Objekt.getMoney().add(tCard.getMoney());
  Objekt.setMoney(Geld);
  mapper.updateByPrimaryKeySelective(Objekt);
 }
 
}

Controllerdefinition

Paket com.zzg.controller;
 
importiere java.util.List;
importiere java.util.Map;
 
importiere org.slf4j.Logger;
importiere org.slf4j.LoggerFactory;
importiere org.springframework.beans.factory.annotation.Autowired;
importiere org.springframework.stereotype.Controller;
importiere org.springframework.web.bind.annotation.PathVariable;
importiere org.springframework.web.bind.annotation.RequestBody;
importiere org.springframework.web.bind.annotation.RequestMapping;
importiere org.springframework.web.bind.annotation.RequestMethod;
importiere org.springframework.web.bind.annotation.ResponseBody;
importiere com.zzg.common.AbstractController;
importiere com.zzg.common.entity.PageDate;
importiere com.zzg.common.entity.PageParam;
importiere com.zzg.common.entity.Result;
importiere com.zzg.entity.TCard;
importiere com.zzg.service.TCardService;
 
@Regler
@RequestMapping("/api/Karte")
öffentliche Klasse CardController erweitert AbstractController {
 // Protokollierung public static final Logger log = LoggerFactory.getLogger(CardController.class);
  
  @Autowired
  TCardService Kartenservice;
  
  @RequestMapping(Wert = "/findPage", Methode = RequestMethod.POST)
  @AntwortBody
  öffentliches Ergebnis findPage(@RequestBody Map<String, Object> parame) {
   PageParam rb = super.initPageBounds(parame);
   PageDate<TCard> Seitenliste = cardService.selectPage(parame, rb);
   gib ein neues Ergebnis zurück().ok().setData(pageList);
  }
  
  @RequestMapping(Wert = "/finden", Methode = RequestMethod.GET)
  @AntwortBody
  öffentliches Ergebnis finden() {
   List<TCard> Liste = cardService.select(null);
   gib ein neues Ergebnis zurück().ok().setData(Liste);
  }
 
  @RequestMapping(Wert = "/findBySid/{sid}", Methode = RequestMethod.GET)
  @AntwortBody
  öffentliches Ergebnis findBySid(@PathVariable("sid") Integer sid) {
   TCard-Objekt = cardService.selectByPrimaryKey(sid);
   gib ein neues Ergebnis zurück().ok().setData(Objekt);
  }
 
  @RequestMapping(Wert = "/deleteBySid/{sid}", Methode = RequestMethod.GET)
  @AntwortBody
  öffentliches Ergebnis deleteBySid(@PathVariable("sid") Integer sid) {
   cardService.deleteByPrimaryKey(sid);
   gib ein neues Ergebnis zurück().ok();
  }
 
  @RequestMapping(Wert = "/update", Methode = RequestMethod.POST)
  @AntwortBody
  öffentliches Ergebnis-Update(@RequestBody TCard-Karte) {
   int num = cardService.updateByPrimaryKeySelective(Karte);
   wenn (Zahl > 0) {
    gib ein neues Ergebnis zurück().ok();
   }
   returniere neues Ergebnis().error("Aktualisierung fehlgeschlagen");
  }
  
  @RequestMapping(Wert = "/aufladen", Methode = RequestMethod.POST)
  @AntwortBody
  öffentliches Ergebnis aufladen(@RequestBody TCard Karte) {
   cardService.aufladen(Karte);
   returniere neues Ergebnis().error("Aufladen erfolgreich");
  }
 
  @RequestMapping(Wert = "/Einfügen", Methode = RequestMethod.POST)
  @AntwortBody
  öffentliches Ergebnis einfügen(@RequestBody TCard Karte) {
   int num = cardService.insertSelective(Karte);
   wenn (Zahl > 0) {
    gib ein neues Ergebnis zurück().ok();
   }
   returniere neues Ergebnis().error("Addition fehlgeschlagen");
  }
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • Vue-Formular-Formularübermittlung + asynchrone Ajax-Anforderung + Paging-Effekt
  • Vue.js implementiert die Paging-Abfragefunktion
  • Beispielcode zum Schreiben eines Pagers mit Vue
  • Vue.js realisiert die Entwicklung unendlicher Lade- und Paging-Funktionen
  • Beispiel für die Paginierung einer Vue.js-Tabelle
  • Die Vue-Komponentenbibliothek ElementUI realisiert den Paging-Effekt einer Tabellenliste
  • So verwenden Sie die ElementUI-Paginierungskomponente Paginierung in Vue
  • Das Vue-Projekt realisiert den Paging-Effekt
  • Vue + iview realisiert Paging- und Abfragefunktionen
  • Kapselung der Vue+iview-Paging-Komponente
  • Vue implementiert Paging-Funktion

<<:  Schritte zum Exportieren der Felder und zugehörigen Attribute von MySQL-Tabellen

>>:  Erstellen Sie eine virtuelle Servermaschine in VMware Workstation Pro (grafisches Tutorial)

Artikel empfehlen

Zusammenfassung der MySQL-Datums- und Zeitfunktionen (MySQL 5.X)

1. MySQL erhält die aktuelle Datums- und Uhrzeitf...

Implementierung des WeChat-Applet-Nachrichten-Pushs in Nodejs

Auswählen oder Erstellen einer Abonnementnachrich...

Beispiele für die Verwendung von Docker und Docker-Compose

Docker ist eine Open-Source-Container-Engine, mit...

So sichern und wiederherstellen Sie die MySQL-Datenbank, wenn sie zu groß ist

Befehl: mysqlhotcopy Dieser Befehl sperrt die Tab...

So installieren Sie ElasticSearch auf Docker in einem Artikel

Inhaltsverzeichnis Vorwort 1. Docker installieren...

Die perfekte Lösung zum Hervorheben von Schlüsselwörtern in HTML

Bei der Arbeit an einem Projekt bin ich kürzlich ...

So verwenden Sie das Datums-Plugin vue-bootstrap-datetimepicker in vue-cli 3

Nachfragehintergrund In letzter Zeit plane ich, V...

So lernen Sie algorithmische Komplexität mit JavaScript

Inhaltsverzeichnis Überblick Was ist die O-Notati...

Vue implementiert Drag & Drop für mehrspaltiges Layout

In diesem Artikel wird der spezifische Code von V...

So erhalten Sie den tatsächlichen Pfad des aktuellen Skripts in Linux

1. Holen Sie sich den tatsächlichen Pfad des aktu...