vue+elementUi+axios实现分页

文章目录

  • vue+elementUi+axios实现分页
      • 1.代码实现
          • 【HTML】
          • **【Servlet层】**
          • **【Service层】**
          • **【Dao层】**
      • 2.总结步骤
      • 3.实现要点
      • 4.注意事项
      • 4.注意事项

注:此项目 前端html后端采用 mybatis、servlet实现

1.代码实现

【HTML】

1.在html部分编写表格:

<div id="Max"><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="16"><div class="grid-content bg-purple-light"><div id="xuanran"><template><el-table:data="newMsg"style="width: 100%"><el-table-columnlabel="学号"width="180"><template slot-scope="scope"><el-checkbox @change="DuoAdd(scope.row.id)">{{ scope.row.id }}</el-checkbox></template></el-table-column><el-table-columnlabel="姓名"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.name }}</span></template></el-table-column><el-table-columnlabel="工作"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.job }}</span></template></el-table-column><el-table-columnlabel="薪资"width="180"><template slot-scope="scope"><span style="margin-left: 10px">{{ scope.row.salary}}</span></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-buttonsize="mini"type="success" plain@click="SelectOne(scope.row.id);dialogFormVisible1 = true;"><iclass="el-icon-upload"></i>更新</el-button><el-button size="mini"type="danger" plain@click="DeleteDate(scope.row.id)"><i class="el-icon-delete-solid"></i>删除</el-button></template></el-table-column></el-table></template><!-- 分页组件 --><div class="pagination-container"><el-paginationsmalllayout="prev, pager, next":total="total":current-page="currentPage":page-size="pageSize"@current-change="handlePageChange"></el-pagination></div></div></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col></el-row></div>

2.在new Vue的data中加入分页所需要的属性:

total: 0, // 总数据量
currentPage: 1, // 当前页码
pageSize: 9 ,// 每页显示数量

3.在**method**部分编写分页实现方法:

//渲染数据
GetDate() {const start = (this.currentPage - 1) * this.pageSize;const loading = this.$loading({lock: true,text: '玩命加载中....',spinner: 'el-icon-loading',background: 'rgba(0, 0, 0, 0.7)'});axios.get('/VueProject2_war_exploded/MyServlet?method=queryRecord',{params: {page: start,pageSize: this.pageSize}}).then(response => {loading.close();this.newMsg = response.data.list;this.total = response.data.total;}).catch(err => {console.log(err);});
},
// 处理页码变化
handlePageChange(newPage) {this.currentPage = newPage;this.GetDate();
},
【Servlet层】
/*** 分页** @param req* @param resp* @throws Exception*/
public void queryRecord(ServletRequest req, ServletResponse resp) throws Exception {req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();int start = Integer.parseInt(req.getParameter("page"));int pageSize = Integer.parseInt(req.getParameter("pageSize"));MyService myService = new MyService();PageResult pageResult = myService.queryRecordFenye(start, pageSize);String s = JSON.toJSONString(pageResult);//集合转换成json字符串准备传回前端;writer.write(s);writer.flush();writer.close();
}
【Service层】
/*** 分页* @param start* @param pageSize* @return*/
public PageResult queryRecordFenye(int start, int pageSize) {SqlSession gc = GC();EmpDao mapper = gc.getMapper(EmpDao.class);List<Emp> list = new ArrayList<>();int total ;List<Emp> emps = mapper.selectAll();total = emps.size();List<Emp> emps1 = mapper.queryRecord(start, pageSize);list.addAll(emps1);return new PageResult(total, list);
}
【Dao层】
@Select("select * from emp limit #{start},#{pageSize}")
/*** 分页查询*/
List<Emp> queryRecord(@Param("start") int start, @Param("pageSize") int pageSize);

2.总结步骤

  1. 前端添加分页组件,绑定相关变量和事件。
  2. 前端调整数据获取方法,传递分页参数,处理分页数据。
  3. 后端提供分页接口和总记录数接口。

这样,用户的分页功能就能正常工作了。

3.实现要点

  • 使用el-pagination组件实现分页效果
  • 通过axios发送GET请求获取分页数据
  • 页码变化时自动重新加载数据
  • 需要计算start参数((当前页-1)*每页数量)
  • 需要同时执行两个SQL查询:获取总数和获取分页数据
  • 返回包含总数和分页数据的复合对象
  • 注意数据库字段名与实体类属性的对应关系

4.注意事项

  • 确保后端接口地址正确(示例中使用的是/VueProject2_war_exploded/)
  • 需要添加JSON序列化支持(如Jackson)
  • 页码变化时自动重新加载数据
  • 需要计算start参数((当前页-1)*每页数量)
  • 需要同时执行两个SQL查询:获取总数和获取分页数据
  • 返回包含总数和分页数据的复合对象
  • 注意数据库字段名与实体类属性的对应关系

4.注意事项

  • 确保后端接口地址正确(示例中使用的是/VueProject2_war_exploded/)
  • 需要添加JSON序列化支持(如Jackson)
  • 处理跨域问题(如果前后端分离部署)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/news/907855.shtml
繁体地址,请注明出处:http://hk.pswp.cn/news/907855.shtml
英文地址,请注明出处:http://en.pswp.cn/news/907855.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue-10( 动态路由匹配和路由参数)

动态路由匹配和路由参数 动态路由匹配是 Vue Router 的一个强大功能&#xff0c;它允许你创建灵活且可重用的路由。您可以使用参数来捕获 URL 的动态段&#xff0c;而不是为每个可能的值定义特定路由。这在处理具有唯一标识符的资源&#xff08;如用户配置文件、产品详细信息或…

劫持进程注入

劫持进程注入和远程线程注入的区别就是 远程线程注入是向一个正在运行中的进程注入 而劫持进程注入则是自己打开一个进程(以挂起的方式) 然后再进行注入的操作 这样做的原因是当进程在挂起的状态时他的所有线程都是处于未启用的阶段 这样就可以避免目标进程的反注入线程的…

uni-app学习笔记二十--pages.json页面路由pages设置

uni-app 通过 pages 节点配置应用由哪些页面组成&#xff0c;pages 节点接收一个数组&#xff0c;数组每个项都是一个对象&#xff0c;其属性值如下&#xff1a; 属性类型默认值描述pathString配置页面路径styleObject配置页面窗口表现&#xff0c;配置项参考下方 pageStylene…

VScode编译调试debug,gpu的cuda程序,Nsight

进行下面操作的前提是&#xff0c;我们的环境已经能跑简单的CUDA程序了。 一、安装Nsight 二、创建launch.json文件 {"version": "0.2.0","configurations": [{"name": "CUDA C: Launch","type": "cuda-gdb…

链表题解——合并两个有序链表【LeetCode】

1. 算法思路 这段代码的核心思想是 合并两个有序链表。具体步骤如下&#xff1a; 初始化哨兵节点&#xff1a; 创建一个哨兵节点 dummy&#xff0c;用于简化链表操作&#xff0c;避免处理头节点的特殊情况。使用指针 cur 指向 dummy&#xff0c;用于构建新的链表。 遍历两个链…

K8S集群主机网络端口不通问题排查

一、环境&#xff1a; k8s: v1.23.6 docker: 20.10.14 问题和故障现象&#xff1a;devops主机集群主机节点到端口8082不通&#xff08;网络策略已经申请&#xff0c;并且网络策略已经实施完毕&#xff09;&#xff0c;而且网络实施人员再次确认&#xff0c;网络策…

qemu安装risc-V 64

参考这篇文章https://developer.aliyun.com/article/1323996&#xff0c;其中在wsl下面安装可能会报错环境变量中有空格。 # clean_path.sh#!/bin/bash# 备份旧 PATH OLD_PATH"$PATH"# 过滤掉包含空格、制表符、换行的路径 CLEAN_PATH"" IFS: read -ra PA…

python爬虫:RoboBrowser 的详细使用

更多内容请见: 爬虫和逆向教程-专栏介绍和目录 文章目录 一、RoboBrowser概述1.1 RoboBrowser 介绍1.2 安装 RoboBrowser1.3 与类似工具比较二、基本用法2.1 创建浏览器对象并访问网页2.2 查找元素2.3 填写和提交表单三、高级功能3.1 处理文件上传3.2 处理JavaScript重定向3.3…

CTFSHOW-WEB-36D杯

给你shell 这道题对我这个新手还是有难度的&#xff0c;花了不少时间。首先f12看源码&#xff0c;看到?view_source&#xff0c;点进去看源码 <?php //Its no need to use scanner. Of course if you want, but u will find nothing. error_reporting(0); include "…

CentOS_7.9 2U物理服务器上部署系统简易操作步骤

近期单位网站革新&#xff0c;鉴于安全加固&#xff0c;计划将原有Windows环境更新到Linux-CentOS 7.9&#xff0c;这版本也没的说&#xff08;绝&#xff09;了&#xff08;版&#xff09;官方停止更新&#xff0c;但无论如何还是被sisi的牵挂着这一大批人&#xff0c;毕竟从接…

LVS-DR高可用-Keepalived

目录 Keepalved双机热备 核心概念 关键组件 工作流程 实例环境 配置keepalived Web服务器配置 Keepalved双机热备 Keepalived双机热备是一种基于VRRP&#xff08;Virtual Router Redundancy Protocol&#xff0c;虚拟路由冗余协议&#xff09;实现的高可用性解决方案&am…

Polar编译码(SCL译码)和LDPC编译码(BP译码)的matlab性能仿真,并对比香农限

目录 1.算法仿真效果 2.算法涉及理论知识概要 2.1香农极限 2.2 Polar码编译码原理与SCL译码 2.3 LDPC码编译码原理与BP译码 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2024b仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a…

AI 产品的 MVP 构建逻辑:Prompt 工程 ≠ 产品工程?(实战增补篇)

一. 系统思维&#xff1a;产品工程的全局把控&#xff08;实战增补篇&#xff09; 1. 某智能风控系统的弹性架构实践 某消费金融公司在开发「30 秒极速贷」产品时&#xff0c;面临两大挑战&#xff1a; Prompt 优化困境&#xff1a;传统风控模型依赖 “提取用户信用报告关键…

Unity程序集

对于Unity的程序集&#xff0c;具体内容可以参考Unity官方文档&#xff0c;程序集定义 - 预定义程序集 比如Unity的默认程序集&#xff0c;Assembly-CSharp.dll&#xff0c;还有其他的比如 Assembly-CSharp-Editor.dll&#xff0c;Assembly-CSharp-firstpass.dll 没有指定或…

【架构艺术】平衡技术架构设计和预期的产品形态

近期笔者因为工作原因&#xff0c;开始启动team内部部分技术项目的重构。在事情启动的过程中&#xff0c;内部对于这件事情的定性和投入有一些争论&#xff0c;但最终还是敲定了下来。其中部分争论点主要在于产品形态&#xff0c;因为事情涉及到跨部门合作&#xff0c;所以产品…

React和原生事件的区别

一、核心差异对比表 维度原生事件React 事件绑定语法HTML 属性&#xff08;onclick&#xff09;或 DOM API&#xff08;addEventListener&#xff09;JSX 中使用驼峰式属性&#xff08;onClick&#xff09;绑定位置直接绑定到具体 DOM 元素统一委托到根节点&#xff08;React …

大模型-modelscope下载和使用chatglm3-6b模型

前言 由于官方chatglm3-6b大模型文件下载比较慢&#xff0c;找到国内modelscope代替方案 1.SDK下载 pip install modelscope2.下载大模型文件 ✅方法1:通过pip下载 1.安装 setuptools 在当前使用的 Python 环境中安装 setuptools pip install setuptools2.通过如下命令安…

【unity游戏开发——编辑器扩展】AssetDatabase公共类在编辑器环境中管理和操作项目中的资源

注意&#xff1a;考虑到编辑器扩展的内容比较多&#xff0c;我将编辑器扩展的内容分开&#xff0c;并全部整合放在【unity游戏开发——编辑器扩展】专栏里&#xff0c;感兴趣的小伙伴可以前往逐一查看学习。 文章目录 前言一、AssetDatabase常用API1、创建资源1.1 API1.2 示例 …

css实现文字渐变

在前端开发中&#xff0c;给文字设置渐变色是完全可以实现的&#xff0c;常用的方式是结合 CSS 的 background、-webkit-background-clip 和 -webkit-text-fill-color 属性。下面是一个常见的实现方法&#xff1a; <!DOCTYPE html> <html lang"zh-CN"> …

WSL 开发环境搭建指南:Java 11 + 中间件全家桶安装实战

在WSL&#xff08;Windows Subsystem for Linux&#xff09;环境下一站式安装开发常用工具&#xff0c;能极大提升工作效率。接下来我将分步为你介绍如何在WSL中安装Java 11、Maven、Redis、MySQL、Nacos、RabbitMQ、RocketMQ、Elasticsearch&#xff08;ES&#xff09;和Node.…