Bagaimana Vue+ElementUI melaksanakan fungsi paging untuk menanyakan data mysql

1. Masalah

Apabila terdapat banyak data dalam pangkalan data, anda perlu menanyakan sebahagian sahaja pada satu masa untuk melegakan tekanan pada pelayan dan halaman. Di sini kami menggunakan komponen Penomboran elementui dan pernyataan mysql limit untuk melaksanakan pertanyaan paging data mysql.

Gambar berikut ialah gaya halaman muka surat yang paling asas:

Sudah tentu, acara yang sepadan perlu diperkenalkan kepada laksanakan perubahan halaman. Hanya tanya pangkalan data.

2. Selesaikan

2.1 Komponen halaman

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

data: Mulakan jumlah bilangan item data (total ) ialah 1, pageNum iaitu nombor halaman semasa ialah halaman pertama.

2.2 Fungsi untuk mendapatkan data pangkalan data: getData():

Parameternya ialah offset, limit, minta data daripada bahagian belakang , dijelaskan kemudian. Parameter siri qs digunakan di sini. Anda boleh rujuk blog saya yang lain: Vue + ElementUI + ViewerGambar tidak boleh dipratonton selepas membelok halaman Masalah komunikasi tak segerak komponen induk dan anak Vue. Fungsi qs dijelaskan di dalamnya.

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 Halaman dimuatkan dan data halaman pertama perlu diminta

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

Perubahan halaman mencetuskan fungsi handleCurrentChange(), iaitu mengklik pada pusingan halaman, di mana Parameter val ialah nombor halaman semasa, gunakan Parameter baharu,

panggil getData untuk menanyakan data pada halaman yang berbeza:

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

Berikut ialah data hujung belakang: php + mysqlphp + mysql<br>

Kini terdapat sejumlah 10 keping data dalam jadual data:

Halaman hadapan getDataDiminta select.phpFail

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 );
?>

Di sini kami menggunakan mysql's limit untuk bertanya hanya sebahagian daripada data pada satu masa, dan parameter offset dan limit.

Pernyataan SQL:

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

3 Analisis

LIMIT $limit OFFSET $offset di sini bermaksud daripada $offest Bermula dari nilai, pertanyaan $limit kepingan data.

Contohnya, $limit = 8, $offest = 0: bermaksud menanyakan 8 keping data pertama dalam pangkalan data, bermula dari 0 (tidak termasuk 0, indeks mysql bermula dari 0), Pertanyaan 8 item, iaitu, 1~8 keping data.
Apabila saya mengklik pada halaman kedua: mencetuskan fungsi handleCurrentChange(）:

Pada masa ini parameternya ialah val=2, kemudian offest = 8, limit = 8.
Data ke-9 hingga ke-17 akan disoal Jika tiada data ke-17, semua data selepas data ke-9 akan dikembalikan. Sebagai contoh, pangkalan data saya pada masa ini hanya mempunyai 10 keping data, jadi keping ke-9 dan ke-10 data akan dikembalikan.

Pada masa yang sama, halaman tengah select.php mengembalikan jumlah bilangan data:

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

Halaman akhir hadapan memperoleh kepada total (atribut this.total terikat, iaitu jumlah bilangan item data). Pagination的totalData akan dinomborkan secara automatik berdasarkan atribut:Pagination. Sebagai contoh, jika jumlah yang dikembalikan oleh bahagian belakang ialah 10, ia akan dibahagikan kepada dua halaman. page-size="8"

4. Keputusan

Halaman dimuatkan: Oleh kerana saya mencari dalam susunan terbalik berdasarkan id, saya mendapat yang ke-3 ~10 keping data (jumlah 8 keping).

Klik halaman kedua atau butang pusing halaman: Dapatkan data pertama dan kedua.

Nota: Parameter anda mesti konsisten dengan atribut limit Pagination, yang bermaksud anda boleh bertanya satu halaman data pada satu masa. Dan page-size ialah nombor halaman semasa. offset

Atas ialah kandungan terperinci Bagaimana Vue+ElementUI melaksanakan fungsi paging untuk menanyakan data mysql. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!