Vue2.0+ElementUI+PageHelperで実装されたテーブルページング機能

序文

最近、いくつかのフロントエンドプロジェクトに取り組んでおり、ページにいくつかのテーブルを表示する必要があります。テーブルのページネーションにはさまざまな方法がありますが、マクロ的な観点からは物理ページングと論理ページングに分けられます。論理ページング（つまりフロントエンドページング）はすべてのデータをキャッシュしてからページに表示するので、データ量が多いとブラウザの速度に影響します。そこで検討した結果、バックエンドページングを使用しました。バックエンドページングの特徴は、現在のページのデータを要求し、ページ番号が変わるかページあたりのデータ量が変わるたびに要求を再送信することです。ここで使用される主なテクノロジーは次のとおりです。

春
スプリングMVC
マイバティス
Vue.js 2.0 の新機能
要素UI

バックエンドデータベースは MySQL を使用しますが、PageHelper プラグインはさまざまなデータベースと互換性があるため、他のデータベースも使用できます。 PageHelper の本質は、MyBatis SQL ステートメントの実行前にページングを実行するためのインターセプターを挿入することであり、これにより基本的に 2 つの制限パラメータが追加されます。 PageHelper の設定と使用方法については、「Spring + Mybatis はページングに PageHelper プラグインを使用する」の記事を参照してください。ここでは繰り返しません。

フロントエンドでは、最近人気の vuejs フレームワーク 2.0 を使用します。これは、AngularJS に似ていますが、より軽量な mvvm アーキテクチャフレームワークです。使用される UI フレームワークは、Ele.me チームによってリリースされた elementUI フレームワークです。これは、当社のフロントエンドフレームワークと完全に統合され、多くのコンポーネントをカプセル化する vuejs ベースのフレームワークであり、開発が非常に便利になります。
以下は、基本的な追加、削除、変更、およびクエリ機能を実装したこのデモのスクリーンショットです。テーブルの並べ替えは、elementUI テーブルコントロールの組み込み属性であり、簡単に設定できます。

文章

以下はプログラムのスクリーンショットです。右クリックして新しいタブで画像を開くと、より鮮明に見ることができます。

スクリーンショット

フロントエンドのコードを見てみましょう。まず、インポートされたファイル:

    <link rel="スタイルシート" href="/core/element-ui/lib/theme-default/index.css" rel="外部nofollow" >
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/json2.js"></script>
    <script src="./js/vue.min.js"></script>  
    <script src="./js/vue-resource.js"></script>
    <script src="./element-ui/lib/index.js"></script>

最初の行と最後の行は、ElementUI のインポートパッケージです。ソースファイルは、ElementUI の公式 Web サイトからダウンロードするか、CDN を使用して直接インポートできます。

<!-- スタイルをインポート -->
<link rel="スタイルシート" href="https://unpkg.com/element-ui/lib/theme-default/index.css" rel="外部 nofollow" >
<!-- コンポーネント ライブラリをインポートします-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

最後から 2 番目の行 vue-resource は vuejs の ajax プラグインであり、XMLHttpRequest または JSONP を介してリクエストを開始し、応答を処理できます。簡単に言えば、Ajax リクエストを送信するために使用できます。

次はスタイル

    <スタイル>
      .el-選択 .el-入力 {
        幅: 110ピクセル;
      }
 
      .el-table .info-row {
            背景: #c9e5f5;
      }   
 
      #トップ{
          背景:#20A0FF;
          パディング:5px;
          オーバーフロー:非表示
      }
    </スタイル>

HTML 本文

    <div id="テスト">             
 
        <div id="top">          
            <span style="float:right;"> 
                <el-button type="text" @click="add" style="color:white">追加</el-button>  
                <el-button type="text" @click="deletenames" style="color:white">一括削除</el-button>        
            </span>                     
        </div>  
 
 
        <br/>
 
        <div style="margin-top:15px">
           <el-input placeholder="コンテンツを入力してください" v-model="criteria" style="padding-bottom:10px;">
              <el-select v-model="select" slot="prepend" placeholder="選択してください">
                 <el-option ラベル="id" 値="1"></el-option>
                 <el-option ラベル="名前" 値="2"></el-option>
              </el-select>
              <el-button slot="追加" icon="検索" v-on:click="検索"></el-button>
          </el-input>       
 
          <el-テーブル
            ref="テストテーブル"       
            :data="テーブルデータ"
            スタイル="幅:100%"
            国境
            :default-sort = "{prop: 'id', order: '昇順'}"
            @selection-change="選択変更処理"   
            @row-click="ハンドルクリック"
            :行クラス名 = "tableRowClassName"
            >
            <el-テーブル列
              タイプ="選択"
              >
            </el-table-column>
            <el-テーブル列
              プロパティ="id"
              ラベル="ID"
              並べ替え可能
              オーバーフローツールチップを表示>
            </el-table-column>
            <el-テーブル列
              プロパティ="名前"
              label="名前"
              並べ替え可能>
            </el-table-column>
            <el-table-column label="操作">
              <テンプレートスコープ="スコープ">
                <el-ボタン
                  サイズ="小"
                  タイプ="プライマリ"
                  @click="handleEdit(scope.$index, scope.row)">編集</el-button>
                <el-ボタン
                  サイズ="小"
                  タイプ="危険"
                  @click="handleDelete(scope.$index, scope.row)">削除</el-button>
              </テンプレート>
            </el-table-column>
          </el-table>
 
          <div align="center">
              <el-ページネーション
                  @size-change="ハンドルサイズ変更"
                  @current-change="現在の変更を処理する"
                  :current-page="現在のページ"
                  :ページサイズ="[10, 20, 30, 40]"
                  :page-size="ページサイズ"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="合計数">
              </el-pagination>
          </div>
        </div> 
    </div>
 
    <フッターの位置合わせ="center">
        <p>&copy; Vue.js 2.0 + ElementUI ページング デモ</p>
    </フッター>

次のステップは、Vue インスタンスを作成することです。ここでは ES5 が使用されています。

    <スクリプト>
    var vue = 新しい Vue({         
            el:"#テスト",
            データ： {       
                //テーブルの現在のページデータ tableData: [],
 
                //複数選択配列 multipleSelection: [],
 
                // リクエストされた URL
                url:'newstu/querystudentbypage',
 
                //検索条件: ''、
 
                //ドロップダウンメニューオプションの選択: ''
 
                //デフォルトのページサイズ: 10,
 
                //デフォルトの強調表示された行データ ID
                ハイライトID: -1,
 
                //現在のページ番号 currentPage: 1,
 
                //クエリページ番号開始: 1,
 
                //デフォルトの合計データ totalCount: 1000,
            },
 
            メソッド: {
 
                //サーバーからデータを読み込む loadData: function(criteria, pageNum, pageSize){                    
                    this.$http.get(this.url,{parameter:criteria, pageNum:pageNum, pageSize:pageSize}).then(function(res){
                        this.tableData = res.data.pagestudentdata;
                        this.totalCount = res.data.number;
                    }、関数（）{
                        console.log('失敗');
                    });                 
                },
 
                //複数選択レスポンス handleSelectionChange: function(val) {
                    this.multipleSelection = val;
                },
 
                //行のクリック応答 handleclick: function(row, event, column){
                    this.highlightId = 行ID;
                },
 
                //編集ハンドルEdit: function(index, row) {
                    this.$prompt('新しい名前を入力してください', 'prompt', {
                          confirmButtonText: '確認'、
                          cancelButtonText: 'キャンセル'、
                        }).then(({ 値 }) => {
                            if(値==''||値==null)
                                戻る;
                            this.$http.post('newstu/update',{"id":row.id,"name":value},{emulateJSON: true}).then(function(res){
                                this.loadData(this.criteria、this.currentPage、this.pagesize);                              
                            }、関数（）{
                                console.log('失敗');
                            });
                        }).catch(() => {
 
                    });
                },
 
 
                // 単一行の削除 handleDelete: function(index, row) {
                    var 配列 = [];
                    配列をプッシュします(行ID)。
                    this.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).then(function(res){
                        this.loadData(this.criteria、this.currentPage、this.pagesize);
                    }、関数（）{
                        console.log('失敗');
                    });
                },
 
                //検索検索: function(){
                    this.loadData(this.criteria、this.currentPage、this.pagesize);
                },
 
                //addadd: 関数(){
                        this.$prompt('名前を入力してください', 'prompt', {
                          confirmButtonText: '確認'、
                          cancelButtonText: 'キャンセル'、
                        }).then(({ 値 }) => {
                            if(値==''||値==null)
                                戻る;
                            this.$http.post('newstu/add',{"name":value},{emulateJSON: true}).then(function(res){
                                this.loadData(this.criteria、this.currentPage、this.pagesize);
                            }、関数（）{
                                console.log('失敗');
                            });
                        }).catch(() => {
 
                    });
 
                },
 
                //複数の削除 deletenames: function(){
                    if(this.multipleSelection.length==0)
                        戻る;
                    var 配列 = [];
                    this.multipleSelection.forEach((item) => {
                        配列をプッシュします(item.id);
                    })
                    this.$http.post('newstu/delete',{"array":array},{emulateJSON: true}).then(function(res){
                        this.loadData(this.criteria、this.currentPage、this.pagesize);
                    }、関数（）{
                        console.log('失敗');
                    });
                },
 
                //現在クリックされている行のクラスを変更し、現在の行を強調表示します。tableRowClassName: function(row, index){
                   行ID == this.highlightIdの場合
                   {
                      'info-row' を返します。
                   }
                },
 
                //ページごとに表示されるデータの量を変更する handleSizeChange: function(val) {
                    this.pagesize = val;
                    this.loadData(this.criteria、this.currentPage、this.pagesize);
                },
 
                //ページ番号の変更 handleCurrentChange: function(val) {
                    this.currentPage = val;
                    this.loadData(this.criteria、this.currentPage、this.pagesize);
                },        
 
            },      
 
 
          });
 
          // データを読み込みます vue.loadData(vue.criteria, vue.currentPage, vue.pagesize);
    </スクリプト>

それでは、上記のコードについて簡単に説明しましょう。tableData は、テーブルの現在のページに表示されるデータの配列です。Web ページが読み込まれると、最初に loadData メソッドが実行されます。criteria は現在の検索条件で、デフォルトでは空です。2 番目のパラメーターは現在のページ番号で、デフォルトでは最初のページです。3 番目のパラメーターは offset で、これはクエリする番号、つまり各ページに含まれるデータの量です。ページ番号またはページあたりのデータ量が変わるたびに、これらのパラメータの新しい値をパラメータとしてこのメソッドが再度呼び出されます。コントローラーのコードを見てみましょう:

    @レスポンス本文
    @RequestMapping(値 = "/querystudentbypage", メソッド = RequestMethod.GET)  
    public Map<String, Object> querystudentbypage(@RequestParam(value="parameter")String パラメータ、 
            @RequestParam(value="pageNum")int ページ番号、@RequestParam(value="pageSize")int ページサイズ) 
    {  
        ページ<Student> page = iNewStudentService.selectStudents(parameter, pageNum, pageSize);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pagestudentdata", ページ);
        map.put("数値", page.getTotal());
        マップを返します。
    }

ce実装コード:

    public Page<Student> selectStudents(String パラメータ、int pageNum、int pageSize)
    {
        Page<Student> page = PageHelper.startPage(pageNum, pageSize);
        newstudentMapper.selectStudents(パラメータ);
        ページに戻る;
    }

Mybatis コード

    <select id="selectStudents" resultMap="新しい学生結果マップ">
        id=#{parameter} または CONCAT('%',#{parameter},'%') のような名前の学生から id、name を選択します。  
    </選択>

注: コードを簡潔にするために、ここではユーザー入力はあいまいに処理されます。データテーブルの id フィールドはユーザー入力と同じか、name フィールドにユーザー入力が含まれており、クエリを実行できます。

上記のサービス実装クラスと mabatis コードから、 SQL ステートメントに制限を手動で追加したのではなく、newstudentMapper.selectStudents(parameter); の前に Page page = PageHelper.startPage(pageNum, pageSize) を追加したことがわかります。このコードは PageHelper への呼び出しです。PageHelper がどのように実装されているか (実際には Interceptor を通じて) を心配する必要はありません。物理的なページングを行うには、このコードのみが必要です。これは、それに続く SQL クエリで動作し、ページング後に現在のページコードを返します。
コントローラー内のマップに 2 つの値が配置されていることがわかります。1 つは返されたリストで、もう 1 つはデータの合計量です。フロントエンドのテーブルコントロールはこのリストを使用し、ページングコントロールはデータの合計量を使用します。 startPage パラメータに注意してください。最初のパラメータは要求するページ番号で、2 番目のパラメータは要求されたページのデータ量です。これら 2 つは、フロントエンドリクエストによって送信されたパラメータに対応する必要があります。

プログラムの他の基本的な機能には、追加、変更、削除、一括削除などがあります。フロントエンドのコードは説明されており、バックエンドは単にデータベースを呼び出すだけなので、バックエンドのコードはここには貼り付けません。

注記：
テーブル行のクリックによるハイライト機能は、ElementUI テーブルコントロールに highlight-current-row 属性を追加することで設定できますが、ハイライトの色は CSS ファイルにカプセル化されています。ここではこの属性を使用しませんでしたが、クラススタイルをカスタマイズし、行がクリックされたときにカスタマイズされたスタイルを現在の行に割り当てました。 ElementUI 自体のハイライトカラーに満足できず、CSS ファイルを変更したくない場合は、この記事に示すように行クリック応答をカスタマイズできます。

最後に

フロントエンドコントロールとして、vuejs は近年ますます人気が高まっています。コミュニティは非常に活発で、それに匹敵するオープンソースプロジェクトライブラリが多数あります。詳細なリストについては、Vue オープンソースプロジェクトライブラリの概要を参照してください。 vuejs がオープンソースライブラリと統合されれば、フロントエンド開発の効率が大幅に向上します。特に私のようなフロントエンドにあまり詳しくないバックエンドエンジニアにとっては、公式サイトのチュートリアルや例を参考にフロントエンド開発を行うこともできます。 ES6 を使用するとモジュール化が容易になります。

ElementUI は非常に優れたコンポーネントライブラリでもあり、テーブル、フォーム、時刻と日付のピッカーなどのよく使用されるコンポーネントに対して優れたカプセル化とインターフェイスを備えています。

PageHelper は、中国人によって書かれた Mybatis ページングプラグインです。パフォーマンスが非常に優れており、現在主流のデータベースをすべてサポートしており、非常に使いやすいです。

フロントエンド開発に必要なことはバックエンド開発に比べてそれほど多くなく、より多くの経験の蓄積が必要です。ここではフロントエンド開発の学習プロセスを記録します。

Vue2.0+ElementUI+PageHelperで実装したテーブルページング機能に関する記事はこれで終わりです。Vue2.0 ElementUI PageHelperのテーブルページングに関するより詳しい内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: