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

推薦する

Vue-Routerのインストールプロセスと原理の詳細

目次1. フロントエンドルーティングの実装原則2. vue-Routerの基本的な使い方2.1. イ...

CSS でよく発生する問題の整理 (ロゴのハッキング/コンテナの固定/画像の垂直方向の中央揃え)

1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...

CSS を使用して画像の色を変更する 100 の方法 (収集する価値あり)

序文「画像処理というと、PhotoShop などの画像処理ツールを思い浮かべることが多いです。フロン...

Webフロントエンドツール、Sublime Text 2の紹介

Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...

JavaScriptカルーセルの実装について

今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね？今日はカルーセル画像の真髄を簡...

負荷分散と動的および静的分離操作を実現するDocker NginxコンテナとTomcatコンテナ

Tomcat8 イメージをダウンロード [root@localhost ~]# docker sea...

UTF-8 ファイルの Unicode 署名 BOM (バイト オーダー マーク) の問題

最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...

Node.js を使用して png 画像に透明なピクセルがあるかどうかを判断する方法

背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...

CSS3はNESゲームコンソールのサンプルコードを実装します

成果を達成する実装コードhtml <input type="radio" ...

MySQLユーザー権限テーブルについての簡単な説明

MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

MySQL トリガー: 複数のトリガー操作の作成例の分析

この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...

純粋な CSS ドロップダウン メニュー

成果を達成する実装コードhtml <div id="コンテナ"> &...

MySQL 5.5 の導入に関する問題

MySQL の導入現在、会社ではプラットフォーム運用を通じてMySQLを導入しています。金曜日、プラ...

スネークゲームを作るための Pygame コード

目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...