我 | 在这里
⭐ 全栈开发攻城狮、全网10W+粉丝、2022博客之星后端领域Top1、专家博主。
🎓擅长 指导毕设 | 论文指导 | 系统开发 | 毕业答辩 | 系统讲解等。已指导60+位同学顺利毕业
✈️个人公众号:乡下小哥编程。回复 Java全套视频教程 或 前端全套视频教程 即可获取 300G+ 教程资料,以及大量毕设项目源码。
🐬专注干货知识分享、项目实战案例开发分享
🚪 传送门:Github毕设源码仓库
传送门:完整文章
前言
国庆回家的高铁上遇到一个公司的主管,和他交流了一路。他说他们公司大部分招聘的是交大、复旦的硕士和博士。带项目的是在国外留学或者深造过几年的博士,无形中自己压力山大。别人的行业领域也是高端领域,比我目前这个高大尚多了。希望有机会能进入他那个行业~~~
他真的是一个很善谈的人,毕竟是到管理层了。他入行十几年,前几年也是走了很多弯路,试过不同的行业。它本身是个专科,但是现在却和这么多大佬大交道,的确是非常的不容易。和他的交流,自己也学到蛮多。对自己的职业发展也有一定的影响。
一步一个脚印,慢慢来~~~
Vue+JPA实现页面分页
1.1 后端代码实现
特别注意这里的分页参数、是从0开始。前端传来的参数要特别注意、这里前端开始页设置成1,后端要处理。
2. 分页参数
-
page 参数应从 0 开始,即第一页对应 page = 0。确保传入的 page 参数在合理范围内,避免超出总页数。
-
size 参数表示每页返回的记录数量,确保该参数为正数并且设定得当。
控制层
/**
* @description:TODO 板块分页查询
* @date: 2024/8/15 15:54
* @param: page
* @param: size
* @return: java.util.List<com.zyz.forum.domain.ArticleType>
**/
@PostMapping("/getallarticletypepage")
Result getAllArticleTypePage(Integer page,Integer size){
Page<ArticleType> pages = articleTypeService.getallArticleTypePage(page-1, size);
// 将 Page<ArticleType> 转换为 List<ArticleType>
List<ArticleType> articlesList = pages.getContent();
Long total = pages.getTotalElements();
HashMap<String, Object> map = new HashMap<>();
map.put("articlesList",articlesList);
map.put("total",total);
return Result.ok().data("result",map);
}
服务层接口
Page<ArticleType> getallArticleTypePage(Integer page, Integer size);
服务层接口具体实现
创建时间最新优先展示
@Override
public Page<ArticleType> getallArticleTypePage(Integer page, Integer size) {
Pageable pageable= PageRequest.of(page,size, Sort.Direction.DESC,"typeCreateTime");
//调用dao层实现
return articleTypeRepositry.findAll(pageable);
}
封装的返回实体类
package com.zyz.forum.common;
import lombok.Data;
import java.util.HashMap;
import java.util.Map;
/**
* @BelongsProject: forum_system
* @BelongsPackage: com.zyz.forum.common
* @CreateTime: 2024-08-15 16:03
* @Description: TODO定义统一接口返回类
* @Version: 1.0
*/
@Data
public class Result {
private Boolean success;
private Integer code;
private String message;
private Map<String,Object> data = new HashMap<>();
private Result(){}
/**
* 使用链式编程
*/
public static Result ok(){
Result result = new Result();
result.setSuccess(true);
result.setCode(0);
result.setMessage("成功");
return result;
}
public static Result error(String message){
Result result = new Result();
result.setSuccess(false);
result.setCode(-200);
result.setMessage(message);
return result;
}
/**
* 自定义返回成功与否
* @param success
* @return
*/
public Result success(Boolean success){
this.setSuccess(success);
return this;
}
public Result message(String message){
this.setMessage(message);
return this;
}
public Result code(Integer code){
this.setCode(code);
return this;
}
public Result data(String key, Object value){
this.data.put(key,value);
return this;
}
public Result data(Map<String,Object> map){
this.setData(map);
return this;
}
}
1.2 前端代码实现
分页组件
<!--分页组件-->
<div style="text-align: left">
<el-row>
<el-col :span="12">
<el-pagination
style="margin: 15px 0px"
background
layout="prev, pager, next, jumper, total, sizes"
:page-size="size"
:current-page="now"
:page-sizes="[2, 4, 6, 8]"
@current-change="findPage"
@size-change="findSize"
:total="total"
>
</el-pagination>
</el-col>
</el-row>
</div>
1.3 效果展示
传送门:完整文章
公众号回复如下内容即可获取对应资料
例如:
数字 1、表示获取后端开发学习资料
数字 2、表示获取前端开发学习资料
数字 3、表示获取 软考中级设计师资料
数字 4、表示获取后端常用在线免费学习资料
数字 5、计算机毕业设计优秀论文模板
数字 6、前后端分离项目案例源码
数字 7、SSM项目案例源码
数字 8、视频轮播图全部案例源码
数字 9、商城系统项目 前后端分离源码
数字10:商城系统源码 前后端分离项目【毕业设计系统】
数字11:毕业论文答辩PPT模板案例
数字666:前后端项目架构功能讲解【毕设版】
数字6666:毕设常见答辩问题文档【6000+字】
更多。。。