广告
返回顶部
首页 > 资讯 > 数据库 >Vue+ElementUI 实现分页功能-mysql数据
  • 682
分享到

Vue+ElementUI 实现分页功能-mysql数据

2024-04-02 19:04:59 682人浏览 泡泡鱼
摘要

目录1.问题2.解决2.1分页组件2.2获取数据库数据的函数:getData():2.3页面加载完成,需要请求第一页的数据3.分析4.结果1.问题 当数据库中数据比较多时,就要每次只

1.问题

数据库中数据比较多时,就要每次只查询一部分来缓解服务器和页面的压力。这里使用elementui的 Pagination 分页 组件,配合Mysqllimit语句,实现分页查询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():

参数为offsetlimit,向后端请求数据,待会儿解释。这里使用了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);
    }

下面是后端数据:php + mysql

现在数据表中总共有10条数据:

前端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['type'];
//获取前端的参数 开始和结束number
if ( !isset( $_POST['offset'] ) ) {
 echo 0;
 exit();
};
$offset = ( int )$_POST['offset'];

if ( !isset( $_POST['limit'] ) ) {
 echo 0;
 exit();
};
$limit = ( int )$_POST['limit'];
//分页查询数据库
$sql = "SELECT * FROM posts where type='$type'  order by id desc LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);

$sqlGetCount = "SELECT COUNT(*) cnt FROM posts where type='$type'";
$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('data'=>$arr),array('total'=>(int)$rescnt['cnt'])));
 
} else {
    echo 0;
}
mysqli_close( $conn );
?>

这里使用了mysqllimit实现一次只查询一部分数据,前端传来了参数offsetlimit

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条数据。
当我点击第二页时:触发handleCurrentChange()函数:

此时参数val=2,则offest = 8, limit = 8
就会查询第9~17条数据,如果没有17条数据,也会返回查询到9条后的所有数据。例如目前我数据库就10条数据,那么返回第9条和第10条两条数据。

同时select.php中页返回了总数据条数total:


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

在这里插入图片描述

前端页面获取到total值后赋值给this.total(绑定了Pagination的total属性,也就是总数据条数)。Pagination根据:page-size="8"属性就会将数据自动分页。例如后端返回的total为10,则分成两页。

4.结果

注意:你的limit参数一定要和Paginationpage-size属性一致,也就时一次查询一页数据。而offset就是当前的页数。

到此这篇关于Vue+ElementUI 实现分页查询-mysql数据的文章就介绍到这了,更多相关Vue+ElementUI 实现分页查询内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

您可能感兴趣的文档:

--结束END--

本文标题: Vue+ElementUI 实现分页功能-mysql数据

本文链接: https://www.lsjlt.com/news/160628.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue+ElementUI 实现分页功能-mysql数据
    目录1.问题2.解决2.1分页组件2.2获取数据库数据的函数:getData():2.3页面加载完成,需要请求第一页的数据3.分析4.结果1.问题 当数据库中数据比较多时,就要每次只...
    99+
    2022-11-12
  • Vue+ElementUI如何实现分页功能查询mysql数据
    这篇文章给大家分享的是有关Vue+ElementUI如何实现分页功能查询mysql数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1.问题当数据库中数据比较多时,就要每次只查询一部分来缓解服务器和页面的压力。这...
    99+
    2023-06-22
  • vue+elementUI实现分页效果
    本文实例为大家分享了vue+elementUI实现分页效果的具体代码,供大家参考,具体内容如下 页面中渲染的数据不是所有数据,是需要展示的数据,即当前页的数据,默认第一页的数据,这里...
    99+
    2022-11-13
  • Vue2.0+ElementUI+PageHelper实现的表格分页功能
    前言 最近做了一些前端的项目,要对表格进行一些分页显示。表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部缓存,然后分页显示,这样...
    99+
    2022-11-12
  • vue实现分页功能
    本文实例为大家分享了vue实现分页功能的具体代码,供大家参考,具体内容如下 使用组件分页 自己写分页 一、组件分页 <el-paginatio...
    99+
    2022-11-12
  • vue+elementui实现选项卡功能
    本文实例为大家分享了vue+elementui实现选项卡功的具体代码,供大家参考,具体内容如下 用法: 首先自己先在项目中定义三个组件(顶部TopNav,左侧LeftAside,中间...
    99+
    2022-11-13
  • VUE+SpringBoot实现分页功能
    本文主要介绍一下 Vue + SpringBoot 中如何实现一个分页列表数据。 1、效果展示 2、VUE代码 VUE之视图定义 <el-row> ...
    99+
    2022-11-12
  • Vue+ElementUI实现视频上传功能
    一、前言 项目中需要提供一个视频介绍,使用户能够快速、方便的了解如何使用产品以及注意事项。 前台使用Vue+Element UI中的el-upload组件实现视频上传及进度条展示,后...
    99+
    2022-11-12
  • vue实现简单分页功能
    本文实例为大家分享了vue实现简单的分页功能的具体代码,供大家参考,具体内容如下 <template> <div id="pages">     <di...
    99+
    2022-11-13
  • vue实现表格分页功能
    本文实例为大家分享了vue实现表格分页功能的具体代码,供大家参考,具体内容如下 直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成。重点在于表格...
    99+
    2022-11-12
  • JS处理数据实现分页功能
    这几天有小伙伴讨论起了分页的相关问题,这里我也简单讲下前端如何简单便捷的利用Js(库)写出优雅,好用的分页工具。 分页是个很简单又超多接触的技术点,粗略来讲分如下两种: 真分页&md...
    99+
    2022-11-13
  • vue实现简单的分页功能
    前端Vue实现分页功能,供大家参考,具体内容如下 我们都知道在spring boot项目中安装pagehelper可以实现分页功能,但是在vue中也能在前端实现分页。 1、首先,在d...
    99+
    2022-11-13
  • vue iview如何实现分页功能
    本篇内容介绍了“vue iview如何实现分页功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!子组件<template&g...
    99+
    2023-07-02
  • Vue2.0+ElementUI如何实现表格翻页功能
    这篇文章主要介绍Vue2.0+ElementUI如何实现表格翻页功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Element UI 是一套采用 Vue 2.0 作为基础框架实现的...
    99+
    2022-10-19
  • 如何在MongoDB中实现数据分页功能
    如何在MongoDB中实现数据分页功能概述:在大规模数据的处理过程中,数据分页是一项非常常见且重要的功能。它可以在处理海量数据时,只返回一部分数据,提高性能并降低系统负载。在MongoDB中,实现数据分页功能同样是一项重要的任务。本文将介绍...
    99+
    2023-10-22
    MongoDB 实现 数据分页
  • Android中ListView分页加载数据功能实现
     熟悉Android的朋友们都知道,不管是微博客户端还是新闻客户端,都离不开列表组件,可以说列表组件是Android数据展现方面最重要的组件,我们今天就要讲一讲列表组...
    99+
    2022-06-06
    数据 listview Android
  • vue如何实现简单的分页功能
    这篇文章将为大家详细讲解有关vue如何实现简单的分页功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下我们都知道在spring boot项目中安装pagehelper可以实现分页功能,但是在v...
    99+
    2023-06-29
  • vue如何实现一个分页组功能
    这篇“vue如何实现一个分页组功能”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue如何实现一个分页组功能”文章吧。文件的...
    99+
    2023-07-04
  • 怎么使用elementUI组件实现表格的分页及搜索功能
    今天小编给大家分享一下怎么使用elementUI组件实现表格的分页及搜索功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。主...
    99+
    2023-07-05
  • Vue组件库ElementUI实现表格列表分页效果
    ElementUI实现表格列表分页效果教程,供大家参考,具体内容如下 Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作