Vue+ElementUI が MySQL データをクエリするためのページング関数を実装する方法

1. 問題

データベース内に大量のデータがある場合、一度にクエリを実行できるのはその一部のみです。サーバーとページへの負担を軽減します。ここでは、elementui の Pagination コンポーネントと mysql の limit ステートメントを使用して、mysql データのページング クエリを実装します。

次の図は最も基本的なページング スタイルです:

もちろん、対応するイベントを導入する必要があります。ページの変更はデータベースにクエリを実行するだけです。

2.

2.1 ページング コンポーネント

<el-pagination
        background
        layout="prev, pager, next"
        :page-size="8"
        :total="total"
        :current-page="pageNum"
        @current-change="handleCurrentChange">
</el-pagination>

data を解決します: の総数を初期化します。データ項目 (total) は 1、pageNum は現在のページ番号が最初のページであることを意味します。

2.2 データベースデータを取得する関数: getData():

パラメータは offset、limit 、バックエンドからのデータをリクエストします。これについては後で説明します。ここでは qs シリアル化パラメータが使用されます。私の他のブログを参照してください: Vue ElementUI Viewerページをめくった後、画像がプレビューできない Vue の親コンポーネントと子コンポーネント間の非同期通信の問題で、qs の機能が説明されています。

getData(offset,limit){
      this.axios.post('/php/select.php', qs.stringify({
        offset: offset,
        limit: limit,
        type: '失物招领'
      }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => {
        if(res.data === 0){
          this.total = 0;
          this.list = [];
          return;
        }
        this.total = res.data.total
        this.list = res.data.data
        this.loading = false
      }).catch((err) => {
        this.$message.error(err)
      })
    }

2.3 ページがロードされ、最初のページのデータを要求する必要があります。

created () {
    this.getData(0,8);
  },

ページ変更により handleCurrentChange() 関数がトリガーされます。つまり、クリックしてページをめくります。val パラメータは現在のページ番号です。新しいパラメータを使用します。

getData を呼び出して、別のページのデータをクエリします。

handleCurrentChange(val){
      this.list = [] //清空上一页数据
      this.getData((val-1)*8,8);
    }

以下は裏面です。 -end data: php mysql<br/>

データ テーブルには合計 10 個のデータがあります:

フロントエンドgetDataリクエスト select.php ファイル

select.php:

ここでは

mysql の <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;?php $servername = &quot;localhost&quot;; $username = &quot;用户名&quot;; $password = &quot;密码&quot;; $dbname = &quot;数据库名称&quot;; // 创建连接 $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn-&gt;connect_error) { die(&quot;连接失败: &quot; . $conn-&gt;connect_error); } $type = $_POST[&amp;#39;type&amp;#39;]; //获取前端的参数 开始和结束number if ( !isset( $_POST[&amp;#39;offset&amp;#39;] ) ) { echo 0; exit(); }; $offset = ( int )$_POST[&amp;#39;offset&amp;#39;]; if ( !isset( $_POST[&amp;#39;limit&amp;#39;] ) ) { echo 0; exit(); }; $limit = ( int )$_POST[&amp;#39;limit&amp;#39;]; //分页查询数据库 $sql = &quot;SELECT * FROM posts where type=&amp;#39;$type&amp;#39; order by id desc LIMIT $limit OFFSET $offset&quot;; $result = $conn-&gt;query($sql); $sqlGetCount = &quot;SELECT COUNT(*) cnt FROM posts where type=&amp;#39;$type&amp;#39;&quot;; $rescnt = $conn-&gt;query($sqlGetCount); $rescnt = $rescnt-&gt;fetch_assoc(); $arr = array(); if ($result-&gt;num_rows &gt; 0) { while ( $row = $result-&gt;fetch_assoc() ) { array_push( $arr, $row ); } //echo json_encode( $arr, JSON_UNESCAPED_UNICODE ); echo json_encode(array_merge(array(&amp;#39;data&amp;#39;=&gt;$arr),array(&amp;#39;total&amp;#39;=&gt;(int)$rescnt[&amp;#39;cnt&amp;#39;]))); } else { echo 0; } mysqli_close( $conn ); ?&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>## が使用されています。 #limit は、一度にデータの一部のみのクエリを実装し、パラメータ offset と limit はフロントエンドから渡されます。

sql ステートメント:

"SELECT * FROM posts where type='$type'  order by id desc LIMIT $limit OFFSET $offset"

3.

の分析はこちら

LIMIT $limit OFFSET $offset は、$offest の値から開始して、 $limit 個のデータをクエリすることを意味します。

たとえば、$limit = 8, $offest = 0: は、データベース内の最初の 8 個のデータを 0 からクエリすることを意味します (0 を除く、mysql インデックスが開始されます)。 0から）、8項目、つまり1～8個のデータをクエリします。
2 ページ目をクリックすると: Trigger handleCurrentChange() Function:

このときのパラメータ

val=2、次に offest = 8、limit = 8。 9 番目から 17 番目のデータを問い合わせます 17 番目のデータがない場合は、9 番目以降のデータをすべて返します。たとえば、データベースには現在 10 個のデータしかないため、9 番目と 10 番目のデータが返されます。

同時に、select.php のページはデータの合計数を返します。

SELECT COUNT(*) cnt FROM posts where type='$type'

フロントエンド ページの取得

total 値は this.total に割り当てられます (データの合計数である Pagination の total 属性にバインドされています)アイテム）。 Pagination:page-size="8"プロパティに従って、データは自動的にページ付けされます。たとえば、バックエンドによって返される合計が 10 の場合、2 ページに分割されます。

4. 結果

ページが読み込まれます: ID に基づいて逆の順序でクエリを実行したため、 3番目～10個のデータ（合計8個）を取得しました。

2 番目のページまたはページめくりボタンをクリックします。 1 番目と 2 番目のデータを取得します。

注: limit パラメータは、Pagination## の page-size と一致している必要があります。 #属性は一貫しています。つまり、一度に 1 ページのデータがクエリされます。 offset は現在のページ番号です。

以上がVue+ElementUI が MySQL データをクエリするためのページング関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。