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调用根据返回的数据调用详情页

。。。这就直接引用原来的详情数据的大方法，都不需要重新写。。。

总结

以上就是我遇到的情况，简单的做个分享，如果有帮助帮你，不要吝啬你的小赞哦！