VUE + SpringBoot implementiert die Paging-Funktion

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

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'
                    }
 
                ]

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

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

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

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>

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

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