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

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

前端：

					<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">
        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 = #{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