目錄
2.1分頁元件
2.2取得資料庫資料的函數:getData():
2.3頁面載入完成,需要請求第一頁的資料
3.分析
首頁 資料庫 mysql教程 Vue+ElementUI如何實作分頁功能查詢mysql數據

Vue+ElementUI如何實作分頁功能查詢mysql數據

Jun 01, 2023 pm 04:19 PM
mysql vue elementui

    1.問題

    當資料庫中資料比較多時,就要每次只查詢一部分來緩解伺服器和頁面的壓力。這裡使用elementui的 Pagination 分頁 元件,配合mysqllimit語句,實作分頁查詢mysql資料。

    下圖是最基本的分頁樣式:

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    #當然要引入對應的事件,來實現頁面改變就查詢資料庫。

    Vue+ElementUI如何實作分頁功能查詢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也就是目前頁數為第一頁。

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    2.2取得資料庫資料的函數:getData():

    參數為offsetlimit,向後端請求數據,待會兒解釋。這裡使用了qs序列化參數。可以參考我的另一篇部落格:Vue ElementUI Viewer翻頁後圖片無法預覽 Vue父子元件非同步通訊問題 裡面解釋了qs的功能。

    getData(offset,limit){
          this.axios.post(&#39;/php/select.php&#39;, qs.stringify({
            offset: offset,
            limit: limit,
            type: &#39;失物招领&#39;
          }), { headers: { &#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39; } }).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);
        }
    登入後複製

    以下是後端資料:php mysql<br/>

    現在資料表中總共有10條資料:

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    #前端getData請求的select.php檔案

    select.php:

    <?php
    $servername = "localhost";
    $username = "用户名";
    $password = "密码";
    $dbname = "数据库名称";
    
    // 创建连接
    $conn = new mysqli($servername, $username, $password, $dbname);
    // Check connection
    if ($conn->connect_error) {
        die("连接失败: " . $conn->connect_error);
    } 
    
    $type = $_POST[&#39;type&#39;];
    //获取前端的参数 开始和结束number
    if ( !isset( $_POST[&#39;offset&#39;] ) ) {
     echo 0;
     exit();
    };
    $offset = ( int )$_POST[&#39;offset&#39;];
    
    if ( !isset( $_POST[&#39;limit&#39;] ) ) {
     echo 0;
     exit();
    };
    $limit = ( int )$_POST[&#39;limit&#39;];
    //分页查询数据库
    $sql = "SELECT * FROM posts where type=&#39;$type&#39;  order by id desc LIMIT $limit OFFSET $offset";
    $result = $conn->query($sql);
    
    $sqlGetCount = "SELECT COUNT(*) cnt FROM posts where type=&#39;$type&#39;";
    $rescnt = $conn->query($sqlGetCount);
    $rescnt = $rescnt->fetch_assoc();
    $arr = array();
    if ($result->num_rows > 0) {
     while ( $row = $result->fetch_assoc() ) {
        array_push( $arr, $row );
    }
     //echo json_encode( $arr, JSON_UNESCAPED_UNICODE );
     echo json_encode(array_merge(array(&#39;data&#39;=>$arr),array(&#39;total&#39;=>(int)$rescnt[&#39;cnt&#39;])));
     
    } else {
        echo 0;
    }
    mysqli_close( $conn );
    ?>
    登入後複製

    這裡使用了mysqllimit實作一次只查詢一部分數據,前端傳來了參數offsetlimit

    sql語句:

    "SELECT * FROM posts where type=&#39;$type&#39;  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條資料。
    當我點擊第二頁:觸發handleCurrentChange()函數:

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    此時參數 val=2,則offest = 8, limit = 8
    就會查詢第9~17條數據,如果沒有17條數據,也會回傳查詢到9條後的所有數據。例如目前我資料庫就10條數據,那麼回傳第9條和第10條兩條數據。

    同時select.php中頁傳回了總資料條數total:

    #
    SELECT COUNT(*) cnt FROM posts where type=&#39;$type&#39;
    登入後複製

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    前端頁面取得到total值後賦值給this.total(綁定了Pagination的total屬性,也就是總資料條數)。 Pagination根據:page-size="8"屬性就會將資料自動分頁。例如後端回傳的total為10,則分成兩頁。

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    4.結果

    頁面載入完成:因為我是根據id逆序查詢,所以我取得了第3 ~10條(共8條)數據。

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    點選第二頁或翻頁按鈕:取得第1、2條資料。

    Vue+ElementUI如何實作分頁功能查詢mysql數據

    注意:你的limit參數一定要和Paginationpage-size 屬性一致,也就時一次查詢一頁資料。而offset就是目前的頁數。

    以上是Vue+ElementUI如何實作分頁功能查詢mysql數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱門文章

    <🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    北端:融合系統,解釋
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌
    Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
    3 週前 By 尊渡假赌尊渡假赌尊渡假赌

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    熱門話題

    Java教學
    1666
    14
    CakePHP 教程
    1425
    52
    Laravel 教程
    1325
    25
    PHP教程
    1272
    29
    C# 教程
    1251
    24
    laravel入門實例 laravel入門實例 Apr 18, 2025 pm 12:45 PM

    Laravel 是一款 PHP 框架,用於輕鬆構建 Web 應用程序。它提供一系列強大的功能,包括:安裝: 使用 Composer 全局安裝 Laravel CLI,並在項目目錄中創建應用程序。路由: 在 routes/web.php 中定義 URL 和處理函數之間的關係。視圖: 在 resources/views 中創建視圖以呈現應用程序的界面。數據庫集成: 提供與 MySQL 等數據庫的開箱即用集成,並使用遷移來創建和修改表。模型和控制器: 模型表示數據庫實體,控制器處理 HTTP 請求。

    MySQL和PhpMyAdmin:核心功能和功能 MySQL和PhpMyAdmin:核心功能和功能 Apr 22, 2025 am 12:12 AM

    MySQL和phpMyAdmin是強大的數據庫管理工具。 1)MySQL用於創建數據庫和表、執行DML和SQL查詢。 2)phpMyAdmin提供直觀界面進行數據庫管理、表結構管理、數據操作和用戶權限管理。

    MySQL與其他編程語言:一種比較 MySQL與其他編程語言:一種比較 Apr 19, 2025 am 12:22 AM

    MySQL与其他编程语言相比,主要用于存储和管理数据,而其他语言如Python、Java、C 则用于逻辑处理和应用开发。MySQL以其高性能、可扩展性和跨平台支持著称,适合数据管理需求,而其他语言在各自领域如数据分析、企业应用和系统编程中各有优势。

    解決數據庫連接問題:使用minii/db庫的實際案例 解決數據庫連接問題:使用minii/db庫的實際案例 Apr 18, 2025 am 07:09 AM

    在開發一個小型應用時,我遇到了一個棘手的問題:需要快速集成一個輕量級的數據庫操作庫。嘗試了多個庫後,我發現它們要么功能過多,要么兼容性不佳。最終,我找到了minii/db,這是一個基於Yii2的簡化版本,完美地解決了我的問題。

    laravel框架安裝方法 laravel框架安裝方法 Apr 18, 2025 pm 12:54 PM

    文章摘要:本文提供了詳細分步說明,指導讀者如何輕鬆安裝 Laravel 框架。 Laravel 是一個功能強大的 PHP 框架,它 упростил 和加快了 web 應用程序的開發過程。本教程涵蓋了從系統要求到配置數據庫和設置路由等各個方面的安裝過程。通過遵循這些步驟,讀者可以快速高效地為他們的 Laravel 項目打下堅實的基礎。

    解決MySQL模式問題:TheliaMySQLModesChecker模塊的使用體驗 解決MySQL模式問題:TheliaMySQLModesChecker模塊的使用體驗 Apr 18, 2025 am 08:42 AM

    在使用Thelia開發電商網站時,我遇到了一個棘手的問題:MySQL模式設置不當,導致某些功能無法正常運行。經過一番探索,我找到了一個名為TheliaMySQLModesChecker的模塊,它能夠自動修復Thelia所需的MySQL模式,徹底解決了我的困擾。

    在MySQL中解釋外鍵的目的。 在MySQL中解釋外鍵的目的。 Apr 25, 2025 am 12:17 AM

    在MySQL中,外鍵的作用是建立表與表之間的關係,確保數據的一致性和完整性。外鍵通過引用完整性檢查和級聯操作維護數據的有效性,使用時需注意性能優化和避免常見錯誤。

    比較和對比Mysql和Mariadb。 比較和對比Mysql和Mariadb。 Apr 26, 2025 am 12:08 AM

    MySQL和MariaDB的主要區別在於性能、功能和許可證:1.MySQL由Oracle開發,MariaDB是其分支。 2.MariaDB在高負載環境中性能可能更好。 3.MariaDB提供了更多的存儲引擎和功能。 4.MySQL採用雙重許可證,MariaDB完全開源。選擇時應考慮現有基礎設施、性能需求、功能需求和許可證成本。

    See all articles