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 (バイナリログ) を表示する方法

推薦する

Ubuntu 18.04 は mysql 5.7.23 をインストールします

以前、Ubuntu 16.04 に MySQL をスムーズにインストールしました。今回、Ubuntu...

Vue ソースコード学習でレスポンシブ性を実装する方法

目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...

MySQL 5.7.21 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.21のインストールに関する注意事項をまとめ、皆さんと共有します。 ...

MongoDB の起動エラーを解決します: 共有ライブラリのロード中にエラーが発生しました: libstdc++.so.6: 共有オブジェクト ファイルを開けません:

MongoDB を起動すると、プロンプトは次のようになります。共有ライブラリのロード中にエラーが発...

一般的なSQL削除ステートメントの原則の違いを理解するだけです

この記事では主に、SQL 削除ステートメント DROP、TRUNCATE、および DELETE の違...

ネイティブ JavaScript を使用して計算機のサンプル コードを開発する

計算機の主な機能は数値計算を実行することです。計算機機能の Web インスタンスを開発すると、js ...

CSS3 フィルターの違いと応用の詳しい説明:ドロップシャドウフィルターとボックスシャドウ

標準 CSS3 を使用して要素の影の効果を実現するには、2 つの手順があります。1 つ目は一般的なb...

CSS変数を使用してスタイルを変更する方法の例

質問js を使用して CSS 疑似クラス スタイルを変更するにはどうすればよいでしょうか?しかし、j...

React コンポーネント間で通信する 3 つの方法 (シンプルで使いやすい)

目次1. 親子コンポーネント通信2. クロスレベルコンポーネント通信1. レイヤーごとに値を渡す2....

MySQL における TIMESTAMPDIFF ケースの詳細な説明

1.構文TIMESTAMPDIFF(unit,begin,end); 単位に従って時間差を返します。...

Vue ポーリング リクエスト ソリューションの完全な例

世論調査の理解実際、ポーリングの焦点はループ自体ではなく、実行間の間隔にあります。 Ajax は非同...

CSSは、マウスを線の上に置くと線全体の色を変える効果を実現します。

まとめ：以下のように、CSS で指定した行にマウスを置いたときに行全体の色を変更する方法を示します。...

vue3 でブロック崩しゲームを開発する方法をステップバイステップで教えます

序文vue3 を使った例をいくつか書いてみましたが、Vue3 のコンポジション API はよく設計さ...

モバイル Web WAP には Bootstrap と jQuery Mobile のどちらを使用すべきか

問題を解決するBootstrap は、次の問題を解決する CSS フレームワークです。デバイス間での...

Docker イメージのプルとタグ操作 pull | tag

Fabric プロジェクトのソースコードを読み直してみたところ、Docker の部分でよくわからな...