VUE+SpringBootはページング機能を実装します

VUE+SpringBootはページング機能を実装します

この記事では主に、Vue + SpringBoot でページ分割されたリストデータを実装する方法を紹介します。

1. エフェクト表示

2. VUEコード

VUE ビュー定義

<el-行>
            <el-テーブル
                :data="テーブルデータ"
                スタイル="幅: 100%">
                <el-テーブル列
                    v-for="(データ、インデックス) in tableHeader"
                    :key="インデックス"
                    :prop="データ.prop"
                    :label="データラベル"
                    :min-width="データ['min-width']"
                    :align="データ.align">
                </el-table-column>
                <el-テーブル列
                    ラベル="操作"
                    最小幅="240">
                    <テンプレート スロット スコープ="スコープ">
                        <el-button type="success" size="mini" @click="toRecharge(scope)">再チャージ</el-button>
                        <el-button size="mini" @click="toView(scope)">表示</el-button>
                        <el-button type="primary" size="mini" @click="toEdit(scope)">編集</el-button>
                        <el-button type="danger" size="mini" @click="deleteCard(scope)">削除</el-button>
                    </テンプレート>
                </el-table-column>
            </el-table>
            <br>
            <el-ページネーション
                @size-change="ハンドルサイズ変更"
                @current-change="現在の変更を処理する"
                :current-page="ページ区切りページインデックス"
                :ページサイズ="[5, 10, 20, 30, 40]"
                :page-size=ページネーション.ページサイズ
                layout="total, sizes, prev, pager, next, jumper"
                :total=ページネーション合計>
            </el-pagination>
</el-row>

要点:

データ型の定義:

tableData: バックグラウンド データ モデル定義を定義します。

tableHeader: テーブルと背景データ間のバインディング関係を定義します。

pagination: ページング データ モデルを定義します。主に (pageIndex: 現在のページ、pageSize: ページ サイズ、total: レコードの合計数) が含まれます。

メソッド定義:

handleSizeChange: ページサイズを更新する

handleCurrentChange: 現在のページを更新する

VUE モデル定義 (データ)

テーブルデータ: [],
        ページネーション:
            ページインデックス: 1,
            ページサイズ: 10,
            合計: 0,
        },
        テーブルヘッダー: [
                    {
                        プロパティ: 'sid'、
                        ラベル: '番号'、
                        配置: '左'
                    },
                    {
                        プロパティ: 'パスワード'、
                        ラベル: 'パスワード'、
                        配置: '左'
                    },
                    {
                        プロパティ: '状態'、
                        ラベル: 'ステータス'、
                        配置: '左'
                    },
                    {
                        小道具: 'お金'、
                        ラベル: '金額',
                        配置: '左'
                    },
                    {
                        プロパティ: 'studentSid',
                        ラベル: '学生SID'、
                        配置: '左'
                    }
 
                ]

VUEデータの初期化

VUE メソッド定義: 関連データをロードするためにバックグラウンド データ インターフェイスを要求します (メソッド)

初期化（）{
        var 自己 = これ
         this.$axios({
            メソッド:'post',
            url:'/card/findPage',
            データ:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize},
            ヘッダー:{
                'Content-Type':'application/json;charset=utf-8' //ここを変更するだけです}
        }).then(res => {
            コンソールログ(res);
           自己ページネーション合計 = res.data.data.total_count;
           self.tableData = res.data.data.list;
 
        })
          .catch(関数 (エラー) {
            コンソール.log(エラー)
          })
        },
        ハンドルサイズ変更(val) {
                this.pagination.pageSize = val;
                this.pagination.pageIndex = 1;
                これを初期化します。
        },
        現在の変更を処理する(val) {
                this.pagination.pageIndex = val;
                これを初期化します。
        },

VUE 宣言サイクル関数定義: VUE メソッド定義を呼び出して、データ初期化プロセスを完了します。

VUE 宣言サイクル関数 mounted() で、init を呼び出してデータ初期化プロセスを完了します。

マウント: 関数 () {
      この.init()
 }

3. SpringBootコード

エンティティ定義

パッケージ com.zzg.entity;
 
java.math.BigDecimal をインポートします。
java.util.Date をインポートします。
 
org.springframework.format.annotation.DateTimeFormat をインポートします。
 
com.fasterxml.jackson.annotation.JsonFormat をインポートします。
com.zzg.common.BaseModel をインポートします。
 
パブリッククラスTCardはBaseModelを拡張します{
    /**
  * 
  */
 プライベート静的最終long serialVersionUID = 1035674221133528445L;
 
 プライベート整数sid;
 
    プライベート文字列パスワード;
 
    プライベート文字列状態;
 
    プライベート BigDecimal マネー;
    
    @DateTimeFormat(パターン="yyyy-MM-dd")
    @JsonFormat(パターン="yyyy-MM-dd",タイムゾーン="GMT+8")
    プライベート日付 starTime;
 
    @DateTimeFormat(パターン="yyyy-MM-dd")
    @JsonFormat(パターン="yyyy-MM-dd",タイムゾーン="GMT+8")
    プライベート日付終了時間;
 
    プライベート整数 studentSid;
 
    パブリック整数 getSid() {
        sid を返します。
    }
 
    パブリックvoid setSid(整数sid) {
        this.sid = sid;
    }
 
    パブリック文字列getPassword() {
        パスワードを返却します。
    }
 
    パブリック void setPassword(文字列パスワード) {
        this.password = password == null ? null : password.trim();
    }
 
    パブリック文字列getState() {
        状態を返します。
    }
 
    パブリック void setState(文字列状態) {
        this.state = state == null ? null : state.trim();
    }
 
    パブリックBigDecimal getMoney() {
        お金を返す;
    }
 
    パブリックvoid setMoney(BigDecimal money) {
        this.money = お金;
    }
 
    パブリック日付 getStarTime() {
        starTime を返します。
    }
 
    パブリック void setStarTime(Date starTime) {
        this.starTime = スタータイム;
    }
 
    パブリック日付 getEndTime() {
        終了時間を返します。
    }
 
    パブリック void setEndTime(日付終了時刻) {
        this.endTime = 終了時間;
    }
 
    パブリック整数 getStudentSid() {
        studentSid を返します。
    }
 
    パブリック void setStudentSid(整数 学生 ID) {
        this.studentSid = 学生のSid;
    }
}

マッパーの定義

パッケージ com.zzg.mapper;
 
java.util.List をインポートします。
java.util.Map をインポートします。
 
com.zzg.entity.TCard をインポートします。
 
パブリックインターフェースTCardMapper{
 int 主キーによって削除(Integer sid);
 
 int 挿入(TCard レコード);
 
 int insertSelective(TCard レコード);
 
 TCard selectByPrimaryKey(Integer sid);
 
 int updateByPrimaryKeySelective(TCard レコード);
 
 int updateByPrimaryKey(TCard レコード);
 
 /**
  * メソッド拡張 */
 List<TCard> を選択します(Map<String, Object> パラメータ);
 
 整数カウント(Map<String, Object> パラメータ);
 
 void バッチ挿入(List<TCard> リスト);
 
 void バッチ更新(List<TCard> リスト);
}
<?xml バージョン="1.0" エンコーディング="UTF-8"?>
<!DOCTYPE マッパー PUBLIC "-//mybatis.org//DTD マッパー 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<マッパー名前空間="com.zzg.mapper.TCardMapper">
  <resultMap id="BaseResultMap" タイプ="com.zzg.entity.TCard">
    <id 列="sid" jdbcType="INTEGER" プロパティ="sid" />
    <結果列="パスワード" jdbcType="VARCHAR" プロパティ="パスワード" />
    <結果列="state" jdbcType="VARCHAR" プロパティ="state" />
    <結果列="money" jdbcType="DECIMAL" プロパティ="money" />
    <結果列="star_time" jdbcType="DATE" プロパティ="starTime" />
    <結果列="end_time" jdbcType="DATE" プロパティ="endTime" />
    <結果列="student_sid" jdbcType="INTEGER" プロパティ="studentSid" />
  </結果マップ>
  <sql id="ベース列リスト">
    sid、パスワード、状態、お金、スタータイム、終了時間、学生のsid
  </sql>
  <sql id="条件">
  </sql>
  <select id="select" パラメータタイプ="map" resultMap="BaseResultMap">
    選択 
    <include refid="ベース列リスト" />
    t_cardより
    ここで1 = 1
    <include refid="条件"></include>
  </選択>
  <select id="count" パラメータタイプ="map" 結果タイプ="java.lang.Integer">
    選択 
     カウント(1)
    t_cardより
    ここで1 = 1
    <include refid="条件"></include>
  </選択>
  <select id="selectByPrimaryKey" パラメータタイプ="java.lang.Integer" resultMap="BaseResultMap">
    選択 
    <include refid="ベース列リスト" />
    t_cardより
    ここで、sid = #{sid,jdbcType=INTEGER}
  </選択>
  <delete id="deleteByPrimaryKey" パラメータタイプ="java.lang.Integer">
    t_cardから削除
    ここで、sid = #{sid,jdbcType=INTEGER}
  </削除>
  <挿入id="挿入" パラメータタイプ="com.zzg.entity.TCard">
    t_cardに挿入（sid、パスワード、状態、 
      お金、スタータイム、終了時間、 
      学生ID
    値（#{sid,jdbcType=INTEGER}、#{password,jdbcType=VARCHAR}、#{state,jdbcType=VARCHAR}、 
      #{money,jdbcType=DECIMAL}, #{starTime,jdbcType=DATE}, #{endTime,jdbcType=DATE}, 
      #{学生ID、jdbcType=INTEGER})
  </挿入>
  <挿入id="挿入選択" パラメータタイプ="com.zzg.entity.TCard">
    t_cardに挿入
    <trim prefix="(" suffix=")" suffixOverrides=",">
      <if test="sid != null">
        シド、
      </if>
      <if test="パスワード != null">
        パスワード、
      </if>
      <if テスト="状態 != null">
        州、
      </if>
      <if test="お金 != null">
        お金、
      </if>
      <if test="starTime != null">
        スタータイム、
      </if>
      <if test="endTime != null">
        終了時間、
      </if>
      <if test="学生ID != null">
        学生ID、
      </if>
    </トリム>
    <trim prefix="値（" suffix="）" suffixOverrides=",">
      <if test="sid != null">
        #{sid,jdbcType=INTEGER},
      </if>
      <if test="パスワード != null">
        #{パスワード,jdbcType=VARCHAR},
      </if>
      <if テスト="状態 != null">
        #{状態、jdbcType=VARCHAR},
      </if>
      <if test="お金 != null">
        #{money,jdbcType=DECIMAL},
      </if>
      <if test="starTime != null">
        #{starTime,jdbcType=DATE},
      </if>
      <if test="endTime != null">
        #{endTime,jdbcType=DATE},
      </if>
      <if test="学生ID != null">
        #{studentSid,jdbcType=INTEGER},
      </if>
    </トリム>
  </挿入>
  <更新 id="updateByPrimaryKeySelective" パラメータタイプ="com.zzg.entity.TCard">
    t_card を更新
    <設定>
      <if test="パスワード != null">
        パスワード = #{password,jdbcType=VARCHAR},
      </if>
      <if テスト="状態 != null">
        状態 = #{状態、jdbcType=VARCHAR}、
      </if>
      <if test="お金 != null">
        お金 = #{お金,jdbcType=DECIMAL},
      </if>
      <if test="starTime != null">
        star_time = #{starTime,jdbcType=DATE},
      </if>
      <if test="endTime != null">
        end_time = #{endTime,jdbcType=DATE},
      </if>
      <if test="学生ID != null">
        学生_sid = #{学生Sid,jdbcType=INTEGER},
      </if>
    </set>
    ここで、sid = #{sid,jdbcType=INTEGER}
  </更新>
  <更新 id="updateByPrimaryKey" パラメータタイプ="com.zzg.entity.TCard">
    t_card を更新
    パスワードを #{password,jdbcType=VARCHAR} に設定します。
      状態 = #{状態、jdbcType=VARCHAR}、
      お金 = #{お金,jdbcType=DECIMAL},
      star_time = #{starTime,jdbcType=DATE},
      end_time = #{endTime,jdbcType=DATE},
      学生_sid = #{学生ID、jdbcType=INTEGER}
    ここで、sid = #{sid,jdbcType=INTEGER}
  </更新>
</マッパー>

サービス定義

パッケージ com.zzg.service;
 
java.util.List をインポートします。
java.util.Map をインポートします。
 
com.zzg.common.BaseService をインポートします。
com.zzg.common.entity.PageDate をインポートします。
com.zzg.common.entity.PageParam をインポートします。
com.zzg.entity.TCard をインポートします。
 
パブリックインターフェースTCardServiceはBaseService<TCard>を拡張します。
 /**
  * カスタムページネーション * 
  * @param パラメータ
  * @param rb
  * @戻る
  */
 パブリック PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb);
 
 /**
    * カスタムクエリ * @param パラメータ
  * @戻る
  */
 パブリック List<TCard> select(Map<String, Object> parame);
 
 /**
  * カスタム統計 * @param パラメータ
  * @戻る
  */
 パブリック整数カウント(Map<String, Object> パラメータ);
 
 /**
  * カスタムバッチ挿入 * @param リスト
  */
 パブリック void batchInsert(List<TCard> list);
 
 /**
  * カスタムバッチ更新 * @param リスト
  */
 パブリック void batchUpdate(List<TCard> list);
 
 /**
  * 再チャージ記録* @param tCard
  */
 パブリックvoid recharge(TCard tCard);
 
}
パッケージ com.zzg.service.impl;
 
java.math.BigDecimal をインポートします。
java.util.List をインポートします。
java.util.Map をインポートします。
 
org.springframework.beans.factory.annotation.Autowired をインポートします。
org.springframework.stereotype.Service をインポートします。
 
com.github.pagehelper.PageHelper をインポートします。
com.github.pagehelper.PageInfo をインポートします。
com.zzg.common.AbstractService をインポートします。
com.zzg.common.entity.PageDate をインポートします。
com.zzg.common.entity.PageParam をインポートします。
com.zzg.entity.TCard をインポートします。
com.zzg.mapper.TCardMapper をインポートします。
com.zzg.service.TCardService をインポートします。
 
@サービス
パブリッククラスTCardServiceImplはAbstractService<TCard>を拡張し、TCardServiceを実装します。
 オートワイヤード
 TCardMapper マッパー;
 
 パブリック int 挿入(TCard レコード) {
  // TODO 自動生成されたメソッドスタブ
  mapper.insert(レコード) を返します。
 }
 
 パブリック int insertSelective(TCard レコード) {
  // TODO 自動生成されたメソッドスタブ
  mapper.insertSelective(レコード) を返します。
 }
 
 パブリックTCard selectByPrimaryKey(Integer sid) {
  // TODO 自動生成されたメソッドスタブ
  mapper.selectByPrimaryKey(sid) を返します。
 }
 
 パブリック int updateByPrimaryKeySelective(TCard レコード) {
  // TODO 自動生成されたメソッドスタブ
  mapper.updateByPrimaryKeySelective(レコード) を返します。
 }
 
 パブリック int updateByPrimaryKey(TCard レコード) {
  // TODO 自動生成されたメソッドスタブ
  mapper.updateByPrimaryKey(レコード) を返します。
 }
 
 パブリック void deleteByPrimaryKey(Integer sid) {
  // TODO 自動生成されたメソッドスタブ
  mapper.deleteByPrimaryKey(sid);
 }
 
 パブリック PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb) {
  // TODO 自動生成されたメソッドスタブ
  PageHelper.startPage(rb.getPageNo(), rb.getLimit());
  リスト<TCard> rs = mapper.select(parame);
  PageInfo<TCard> pageInfo = 新しい PageInfo<TCard>(rs);
  super.page(pageInfo.getList(), pageInfo.getPageNum(), pageInfo.getPageSize(), pageInfo.getTotal()) を返します。
 }
 
 パブリックList<TCard> select(Map<String, Object> parame) {
  // TODO 自動生成されたメソッドスタブ
  mapper.select(parame) を返します。
 }
 
 パブリック整数カウント(Map<String, Object> パラメータ) {
  // TODO 自動生成されたメソッドスタブ
  mapper.count(parame) を返します。
 }
 
 パブリック void batchInsert(List<TCard> リスト) {
  // TODO 自動生成されたメソッドスタブ
  mapper.batchInsert(リスト);
 }
 
 パブリック void バッチ更新 (List<TCard> リスト) {
  // TODO 自動生成されたメソッドスタブ
  mapper.batchUpdate(リスト);
 }
 
 パブリックvoid recharge(TCard tCard) {
  // TODO 自動生成されたメソッドスタブ
  TCard オブジェクト = mapper.selectByPrimaryKey(tCard.getSid());
  BigDecimal のお金 = object.getMoney().add(tCard.getMoney());
  オブジェクトにMoneyを設定します。
  mapper.updateByPrimaryKeySelective(オブジェクト);
 }
 
}

コントローラの定義

パッケージ com.zzg.controller;
 
java.util.List をインポートします。
java.util.Map をインポートします。
 
org.slf4j.Logger をインポートします。
org.slf4j.LoggerFactory をインポートします。
org.springframework.beans.factory.annotation.Autowired をインポートします。
org.springframework.stereotype.Controller をインポートします。
org.springframework.web.bind.annotation.PathVariable をインポートします。
org.springframework.web.bind.annotation.RequestBody をインポートします。
org.springframework.web.bind.annotation.RequestMapping をインポートします。
org.springframework.web.bind.annotation.RequestMethod をインポートします。
org.springframework.web.bind.annotation.ResponseBody をインポートします。
com.zzg.common.AbstractController をインポートします。
com.zzg.common.entity.PageDate をインポートします。
com.zzg.common.entity.PageParam をインポートします。
com.zzg.common.entity.Result をインポートします。
com.zzg.entity.TCard をインポートします。
com.zzg.service.TCardService をインポートします。
 
@コントローラ
@リクエストマッピング("/api/card")
パブリッククラスCardControllerはAbstractControllerを拡張します。
 // ログ記録 public static final Logger log = LoggerFactory.getLogger(CardController.class);
  
  オートワイヤード
  TCardService カードサービス;
  
  @RequestMapping(値 = "/findPage", メソッド = RequestMethod.POST)
  @レスポンス本文
  パブリック結果findPage(@RequestBody Map<String, Object> parame) {
   ページパラメータrb = super.initPageBounds(parame);
   PageDate<TCard> pageList = cardService.selectPage(parame, rb);
   新しいResult().ok().setData(pageList)を返します。
  }
  
  @RequestMapping(値 = "/find"、メソッド = RequestMethod.GET)
  @レスポンス本文
  パブリック結果検索() {
   リスト<TCard> リスト = cardService.select(null);
   新しいResult().ok().setData(list)を返します。
  }
 
  @RequestMapping(値 = "/findBySid/{sid}", メソッド = RequestMethod.GET)
  @レスポンス本文
  パブリック結果findBySid(@PathVariable("sid") 整数sid) {
   TCard オブジェクト = cardService.selectByPrimaryKey(sid);
   新しいResult().ok().setData(object)を返します。
  }
 
  @RequestMapping(値 = "/deleteBySid/{sid}", メソッド = RequestMethod.GET)
  @レスポンス本文
  パブリック結果deleteBySid(@PathVariable("sid") Integer sid) {
   cardService.deleteByPrimaryKey(sid);
   新しいResult().ok()を返します。
  }
 
  @RequestMapping(値 = "/update", メソッド = RequestMethod.POST)
  @レスポンス本文
  パブリック結果更新(@RequestBody TCardカード) {
   int num = cardService.updateByPrimaryKeySelective(カード);
   （数値＞0）の場合{
    新しいResult().ok()を返します。
   }
   新しい Result().error("更新に失敗しました"); を返します。
  }
  
  @RequestMapping(値 = "/recharge", メソッド = RequestMethod.POST)
  @レスポンス本文
  パブリック結果再チャージ(@RequestBody TCardカード) {
   cardService.recharge(カード);
   return new Result().error("再充電に成功しました");
  }
 
  @RequestMapping(値 = "/insert", メソッド = RequestMethod.POST)
  @レスポンス本文
  パブリック結果挿入(@RequestBody TCardカード) {
   int num = cardService.insertSelective(カード);
   （数値＞0）の場合{
    新しいResult().ok()を返します。
   }
   return new Result().error("追加に失敗しました");
  }
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Vue フォームのフォーム送信 + Ajax 非同期リクエスト + ページング効果
  • Vue.jsはページングクエリ機能を実装します
  • Vue でページャーを書くためのサンプルコード
  • Vue.jsは無限ロードとページング機能の開発を実現します
  • Vue.js テーブルページングの例
  • VueコンポーネントライブラリElementUIはテーブルリストのページング効果を実現します
  • ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション
  • Vue プロジェクトがページング効果を実現
  • Vue+iviewはページングとクエリ機能を実現します
  • vue+iview ページングコンポーネントのカプセル化
  • Vueはページング機能を実装する

<<:  VMware Workstation Pro でサーバー仮想マシンを構築する (グラフィック チュートリアル)

>>:  mysql binlog (バイナリログ) を表示する方法

推薦する

WeChatアプレットのスケルトン画面の実装例

目次スケルトンスクリーンとはアプレットでスケルトン画面を生成する方法導入方法表示と非表示ユーザーエク...

Zabbix で監視項目と集約されたグラフを設定するためのサンプルコード

1. ローカルマシンを監視するためにZabbixエージェントをインストールするエージェントソフトウェ...

mysql5.7.19 zip 詳細なインストールプロセスと構成

MySQL v5.7.19 正式版（32/64 ビットインストール版および zip 解凍版） 1. ...

JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明

ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...

完全なショッピングカートを実装するためのミニプログラム

ミニプログラムは、参考までに完全なショッピングカート[すべて選択/選択解除して金額を計算/加算と減算...

html-webpack-plugin' を使用してメモリ内に HTML ページ プラグインを生成します。

webpackjs ファイルをパッケージ化するときに、次に示すように、index.html インタ...

JavaScript strictモードの概要 strictを使用する

目次1. 概要1.1 厳密モードとは何ですか? 1.2 厳密モードの目的2. 厳密モードを有効にする...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

Nginx で HTTPS 証明書を構成する詳細なプロセス

1. HttpとHttpsの違いHTTP: インターネットで最も広く使用されているネットワーク プロ...

HTML内のフレームセットタグが正常に表示されない原因の解析と解決方法

<frameset></frameset>は皆さんもよくご存知のものです。こ...

Vue ローカルコンポーネントデータ共有 Vue.observable() の使用

コンポーネントが詳細になるにつれて、複数のコンポーネントが状態を共有する状況に遭遇するでしょう。Vu...

負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。

ラベルテキストと入力の垂直方向の中央揃えを調整するのは簡単ではありません。padding、verti...

Linux システムでのスケジュールされたタスクの紹介

目次1. 計画タスクをカスタマイズする2. 時間を同期する3. 練習する4. セキュリティの問題1....

MySQL 5.7.21 解凍版のインストールと設定方法のグラフィックチュートリアル (win10)

MySQL 5.7.21 解凍版のインストールと設定方法は参考までに。具体的な内容は以下のとおりで...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...