网站建设内容3000字,域名更新自动转跳,阿里云网站空间做商城流程,wordpress集成文库插件概述#xff1a;需求就是需要可以看列表#xff0c;然后点击列表的右侧详情看详情#xff0c;通过详情来实现新增上一份#xff0c;下一份按钮来实现直接看之后的详情。
网上的解决方法有很多
1.后台获取将全量的id#xff0c;前台再去直接取下一个id方式。#xff08;…
概述需求就是需要可以看列表然后点击列表的右侧详情看详情通过详情来实现新增上一份下一份按钮来实现直接看之后的详情。
网上的解决方法有很多
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 typeprimary clicknextChange(0) 上一份/el-button
el-button typeprimary clicknextChange(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(next0){proxy.$baseMessage(已经是第一份报告, success, vab-hey-message-success);}else if(next1){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 idgetNextChangeModify resultMapreviewDetailDtoMapselect rr.id, rr.report_typefrom review_report rrwhere rr.is_delete 0if testdata.uploadTimeStart ! null and DATE(rr.report_upload_time) ![CDATA[]] #{data.uploadTimeStart}/ifif testdata.uploadTimeEnd ! null and DATE(rr.report_upload_time) ![CDATA[]] #{data.uploadTimeEnd}/if...........等等查询条件...........if testdata.isNext 1.toString()and rr.id ![CDATA[]] #{data.id} order by rr.id desc/ifif testdata.isNext 0.toString()and rr.id ![CDATA[]] #{data.id} order by rr.id asc/iflimit 1/select
2.2调用根据返回的数据调用详情页
。。。这就直接引用原来的详情数据的大方法都不需要重新写。。。 总结
以上就是我遇到的情况简单的做个分享如果有帮助帮你不要吝啬你的小赞哦
