vue列表进入详情页实现上一篇下一篇功能
概述:需求就是需要可以看列表,然后点击列表的右侧详情看详情,通过详情来实现新增上一份,下一份按钮来实现直接看之后的详情。
网上的解决方法有很多
1.后台获取将全量的id,前台再去直接取下一个id方式。(获取全部的id,对于大数据来说,前后台负担都比较大)
2.查询列表的时候直接获取所有的数据和详情,直接前台处理下一份。(这样无法解决分页问题,而且前台负担太大)
我采取的方法是:
查询列表的时候,列表中包含查询条件queryForm,详情中点击下一份的是时候,将查询条件和当前id传给后台调用获取下一页数据内容。
一、前端处理
1.1 listIndex.vue,注:备份选择的查询条件queryBakForm,传给详情页的时候一起传过去 ,
必须要做Object - - ->> json转化
const fetchData = async () => {state.listLoading = trueconst {retCode, success, data, msg} = await getReviewList(state.queryForm)state.list = data.records;//此处备份查询数据 state.queryBakForm = state.queryForm;state.total = data.total;state.listLoading = false}const handleReview = (row) => {if (row.id)router.push({path: '/reviewManage/reviewReportDetail',query: {id: row.id,reportType: row.reportType,queryBakForm:JSON.stringify(state.queryBakForm)},//此处必须做类型转化,否则接收的对象为'[Object Object]'})}
1.2 detail.vue,注:后台接口通过封装的nextChangeReview直接查询下一页的所有详细信息, 然后刷新路由,刷新页面
必须要做 json - - ->> Object转化,object的内容保持一致
<el-button type="primary" @click="nextChange(0)" >上一份</el-button>
<el-button type="primary" @click="nextChange(1)" >下一份</el-button>
const nextChange = async (next) => {state.queryBakForm = JSON.parse(route.query.queryBakForm);state.queryBakForm.id = route.query.id;state.queryBakForm.isNext = next;state.listLoading = true;const {retCode, success, data, msg} = await nextChangeReview(state.queryBakForm)if (retCode == 0) {if(data == null){if(next=='0'){proxy.$baseMessage("已经是第一份报告!", 'success', 'vab-hey-message-success');}else if(next=='1'){proxy.$baseMessage("已经是最后一份报告!", 'success', 'vab-hey-message-success');}else{proxy.$baseMessage("输入错误!", 'success', 'vab-hey-message-success');}}else{// 修改路由,刷新数据router.push({path: '/reviewManage/reviewReportDetail',query: {id: data.id,reportType: data.reportType,queryBakForm:JSON.stringify(state.queryBakForm)//此处必须做类型转化,否则接收的对象为'[Object Object]'}})state.form = data;//一些值做初始化处理state.btnClick = false;}} else {proxy.$baseMessage(msg, 'error', 'vab-hey-message-error');}}
二、后端处理
下一页思路:
1.通过条件和下一份标志,来查询出下一份的id
2.将此id直接调用查询详情页方法
2.1.查询下一份数据id的数据库语句 (注:数据库是mysql,id是顺序变大的)
<select id="getNextChangeModify" resultMap="reviewDetailDtoMap">select rr.id, rr.report_typefrom review_report rrwhere rr.is_delete = '0'<if test="data.uploadTimeStart != null ">and DATE(rr.report_upload_time) <![CDATA[>=]]> #{data.uploadTimeStart}</if><if test="data.uploadTimeEnd != null ">and DATE(rr.report_upload_time) <![CDATA[<=]]> #{data.uploadTimeEnd}</if>...........等等查询条件...........<if test="data.isNext == '1'.toString()">and rr.id <![CDATA[<]]> #{data.id} order by rr.id desc</if><if test="data.isNext == '0'.toString()">and rr.id <![CDATA[>]]> #{data.id} order by rr.id asc</if>limit 1</select>
2.2调用根据返回的数据调用详情页
。。。这就直接引用原来的详情数据的大方法,都不需要重新写。。。
总结
以上就是我遇到的情况,简单的做个分享,如果有帮助帮你,不要吝啬你的小赞哦!
相关文章:
vue列表进入详情页实现上一篇下一篇功能
概述:需求就是需要可以看列表,然后点击列表的右侧详情看详情,通过详情来实现新增上一份,下一份按钮来实现直接看之后的详情。 网上的解决方法有很多 1.后台获取将全量的id,前台再去直接取下一个id方式。(…...
kalman的python实现
前面的kalman都是matlab的,这里在理解的基础上,尝试使用python实现,力求理解更多的内涵。 需要的包 import numpy as np import matplotlib.pyplot as plt 代码 KF algorith demo by Leo 2020.01.06 ZJG CAMPUS,ZJU import numpy as np…...
查找算法:线性查找,golang实现
目录 前言 线性查找 代码示例 1. 算法包 2. 线性查找代码 3. 模拟程序 4. 运行程序 循环次数 假如目标值正好在数组中的第一位 假如目标值正好在数组中的第五位 假如目标值正好在数组中的最后一位 假如目标值不在数组中 线性查找的思想 1. 顺序遍历 2. 比较 3.…...
【图像识别】十大数据集合集!
本文将为您介绍10个经典、热门的数据集,希望对您在选择适合的数据集时有所帮助。 1 DanishFungi2020 发布方: Google 发布时间: 2021 简介: 补充材料:丹麦真菌 2020 - 不仅仅是另一个图像识别数据集为了支持细粒度植…...
C++ | Leetcode C++题解之第312题戳气球
题目: 题解: class Solution { public:int maxCoins(vector<int>& nums) {int n nums.size();vector<vector<int>> rec(n 2, vector<int>(n 2));vector<int> val(n 2);val[0] val[n 1] 1;for (int i 1; i &l…...
SSM学习11:springboot基础
教学视频 黑马程序员SpringBoot3Vue3全套视频教程,springbootvue企业级全栈开发从基础、实战到面试一套通关 springboot基础 搭建项目 修改配置文件 修改application.yml(后缀名不对,可以改成这个),配置数据库 spr…...
【前端 18】安装Node.js
Node.js 安装指南 在今天的博客中,我们将一起探讨如何在您的计算机上安装Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它允许你在服务器端运行 JavaScript 代码。无论您是前端开发者希望探索全栈开发,还是后端开发者寻…...
C#/Winform入门、进阶、强化、扩展、知识体系完善等知识点学习、性能优化、源码分析专栏分享
场景 作为一名C#的Winform开发者,势必经历过从入门到自学、从基础到进阶、从学习到强化的过程。 当经历过几年企业级开发的磨炼,再回头看之前的开发过程、成长阶段发现确实是走了好多的弯路。 作为一名终身学习的信奉者,秉承Java体系需持续…...
springboot的表现层/控制层controller开发
第一步:新建文件和注入业务层对象 需要使用的注解: 第一个声明是restful风格开发 第二个是需要设置网页访问路径 RestController RequestMapping("/fuels")//http://localhost/fuels注入服务层对象: Autowiredprivate FuelServ…...
前端使用html2canvas在页面截图并导出,以及截图中含有图片时的跨域问题解决
1.引入html2canvas npm 安装或cdn引入 npm install html2canvas <script src"https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> 2.使用 html2canvas // 假设你有一个 id 为 "capture" 的元素 h…...
道可云元宇宙每日资讯|第十二届互联网安全大会在北京开幕
道可云元宇宙每日简报(2024年8月2日)讯,今日元宇宙新鲜事有: 第十二届互联网安全大会在北京开幕 7月31日,第十二届互联网安全大会(ISC.AI 2024)在北京国家会议中心盛大开幕。 本届大会以“打造…...
前端面试基础题(微信公众号:前端面试成长之路)
BFC、IFC、GFC、FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC。 到底什么是BFC、IFC、GFC和FFC Whats FC? 一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并…...
https执行过程,特点,作用
还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,ech…...
【优秀python案例】基于Python的豆瓣电影TOP250爬虫与可视化设计与实现
摘要:伴随着当代社会物质水平的不断提高,人们越来越注重精神享受,看电影成为人们日常生活中重要的组成成分。本文将针对豆瓣上热门电影评论进行爬取,应用可视化分析更为形象地了解该电影的动态。该系统可以使得人们实时了解到有关…...
如何设计一个测试用例
前言👀~ 上一章我们介绍了什么是软件测试以及软件测试的一些基础概念,今天来聊聊如何设计一个测试用例,涉及到黑盒测试的测试方法 基于需求进行测试用例的设计 基于需求的具体设计方法 等价类 边界值 判定表法 正交表法 场景设计法 …...
黄金和原油市场波动背后的经济信号
黄金市场的波动与经济数据影响 周四,黄金市场经历了一天内的剧烈波动,从早盘的高点到纽约时段的急剧下跌。现货黄金价格最初上涨至2462.29美元/盎司,但随后迅速跌至最低的2434.72美元/盎司。最终,黄金收盘价报2445.84美元/盎司&am…...
【Python数值分析】革命:引领【数学建模】新时代的插值与拟合前沿技术
目录 编辑 第一部分:插值的基本原理及应用 1. 插值的基本原理 1.1 插值多项式 1.2 拉格朗日插值 1.3 牛顿插值 1.4 样条插值 2. 插值的Python实现 2.1 使用 NumPy 进行插值 2.2 使用 SciPy 进行插值 2.2.1 一维插值 编辑 2.2.2 二维插值 3. 插值…...
PCL-基于超体聚类的LCCP点云分割
目录 一、LCCP方法二、代码实现三、实验结果四、总结五、相关链接 一、LCCP方法 LCCP指的是Local Convexity-Constrained Patch,即局部凸约束补丁的意思。LCCP方法的基本思想是在图像中找到局部区域内的凸结构,并将这些结构用于分割图像或提取特征。这种…...
git 推送时出现错误 Locking support detected on remote “origin“
背景:代码托管是局域网搭建的gitlab 按照提示配置 lfs.locksverify true 还是没有用。 网上搜索了一番,其中有人提到可能时服务器磁盘满了,连到服务器上 df -h 查看, 发现根目录已经写满了: 使用命令行: d…...
劳动仲裁经验篇【赶紧收藏】
【劳动仲裁】纯经验干货分享,点个关注防止需要时找不到! 当公司决定搞你心态,变相逼退你时,无非就那么些手段,只要你能正确应对,并做好收集证据的准备,就不住畏惧。合理利用法律的武器维护自身…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明: 想象一下,你正在用eNSP搭建一个虚拟的网络世界,里面有虚拟的路由器、交换机、电脑(PC)等等。这些设备都在你的电脑里面“运行”,它们之间可以互相通信,就像一个封闭的小王国。 但是&#…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上,看到基于小智 AI DIY 玩具的演示,感觉有点意思,想着自己也来试试。 如果只是想烧录现成的固件,乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外,还提供了基于网页版的 ESP LA…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
uniapp中使用aixos 报错
问题: 在uniapp中使用aixos,运行后报如下错误: AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构: 传统SMO中LPF会带来相位延迟和幅值衰减,并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF),可以去除高次谐波,并且不用相位补偿就可以获得一个误差较小的转子位…...
comfyui 工作流中 图生视频 如何增加视频的长度到5秒
comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗? 在ComfyUI中实现图生视频并延长到5秒,需要结合多个扩展和技巧。以下是完整解决方案: 核心工作流配置(24fps下5秒120帧) #mermaid-svg-yP…...
