SpringBoot+vue实现评论区分页效果

2026/9/21 1:32:51 拓冰建站浏览量

当评论区含大量数据时，一次性查询速度很慢，所以使用分页，实现分页效果。

前端：

					<h3>评论</h3><div><div style="font-size:14px;padding:10px;" v-for="r in form.remark"><!-- 	评论: --><div><span style="color: #007AFF;">{{r.account}}</span> <br /><span>{{r.content}}</span><br /><span>{{r.remarkTime}}</span><br /></div></div><el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange":current-page="1" :page-sizes="[2, 4, 6, 8, 10]" :page-size="3"layout="total, sizes, prev, pager, next, jumper" :total="form.total"></el-pagination></div>

javaScrip向后端传数据

form: {remark: [],pageNum: 1,pageSize: 4,total: 0,
},handleSizeChange(val) {this.form.pageSize = val;this.form.pageNum = 1;this.remarkFind();},handleCurrentChange(val) {this.form.pageNum = val;this.remarkFind();},remarkFind() {this.$http.get("remark/remark/findRemark/?id=" + id+"&pageNum="+this.form.pageNum+"&pageSize="+this.form.pageSize).then(resp => {this.form.remark = resp.data.data.list;this.form.total = resp.data.data.total;// console.log(this.form.remark);})

后端web层：

    @GetMapping("/findRemark/")CommonData findRemark(Integer id, @Param("pageNum")Integer pageNum,@Param("pageSize")Integer pageSize){return remarkService.findRemark(id,pageNum,pageSize);}

service层

    public CommonData findRemark(Integer id,Integer pageNum,Integer pageSize) {PageHelper.startPage(pageNum,pageSize);Integer newsinfoid=id;List<Remark> r=remarkDao.findRemark(newsinfoid);PageInfo<Remark>pageInfo=new PageInfo<>(r);return new CommonData(200,pageInfo,"查询成功！");}

Dao层：

    List<Remark> findRemark(Integer newsinfoid);

MyBatis：

    <select id="findRemark" resultType="remark">SELECTu.account,r.content,r.remark_timeFROMremark rINNER JOIN USER uON u.id = r.useridWHERE r.state = 1AND r.newsinfoid = #{newsinfoid} order by remark_time desc</select>

需要注意的是不要在sql语句最后加分号";"

不然你就会产生这样的错误

### SQL: SELECT u.account, r.content, r.remark_time FROM remark r INNER JOIN USER u ON u.id = r.userid WHERE r.state = 1 AND r.newsinfoid = ? order by remark_time desc; LIMIT ?
### Cause: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'LIMIT 4' at line 10
; bad SQL grammar []; nested exception is java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'LIMIT 4' at line 10

因为分页是SpringBoot已经封装好的，会在sql语句中自动加上limit去分页查询，加了分号springboot添加limit查询会产生语法错误

建站实战干货

SpringBoot+vue实现评论区分页效果