讲师分页查询接口 | 学习笔记

简介: 快速学习讲师分页查询接口

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot)讲师分页查询接口学习笔记,与课程紧密连接,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/667/detail/11468


讲师分页查询接口


内容介绍:

一、复习回顾

二、讲师列表页

三、对比之前代码区别


一、复习回顾

本节讲解名师部分:

包括列表、详情部分。在之前内容中实现了名师页面静态效果,并整合了代码。

其中讲解到一个知识点:

在实现的页面上无论是点击课程或者名师,路径都是固定的,叫做固定路由。

现在点击某一个讲师,因为每一个讲师的id都不同,所以设置的路径也不同,例如第一个讲师 id 为1,第二个讲师id可能为2,第三个可能为3,这就叫做动态路由。

所以有两种路由,一个是固定,一个是动态。固定路由在 pages 里建立页面,如图有讲师 teacher,列表 index,有课程 course,列表 index

image.png

动态路由怎么创建页面呢?

将页面用下划线开头,后面加上参数名称,这就叫动态路由,例如_id.vue。根据 id得到课程的详情,就用到了动态路由。

总结:

固定路由用 index,动态路由用下划线开头。

以上为之前内容中名师页面静态效果的整合


二、讲师列表页

接下来讲解讲师列表页:

先做一个简单分析,依然按照前后端开发的流程,先写接口,然后测试,没有问题在前端调接口在页面中显示,这就是前后端的过程。

快速分析如何做到名师列表功能:

打开页面,点击名师进入到页面后,通过数据库来查数据,如图可以看到数据有一个特点:需要分页,所以查询就是分页查询

image.png

在查询中会有两个细节:

在现在页面中有八个讲师,即在显示过程中需要考虑页面的样式美观。

页面中的分页功能:

在之前后台系统中用的是 Element-ui 组件,但在此处页面中做比较底层的分页。

接下来编写代码,首先写第一个:

分页查询名师的接口

打开后端,因为是讲师部分,我们将代码写在 edu 中,又因为是前台管理系统,所以写在 front 中,新建一个 Controller 名为 TeacherFrontController。

在代码 public class TeacheFrontController 上方添加代码:

import org.springframework.web.bind.annotation.RestController;

import org.springframework.web.bind.annotation.RestController;

@RestController

@RequestMapping(“/eduservice/teacherfront”)

@CrossOrigin

添加完上面两个注释后,在主函数中输入代码,

即:

public class TeacheFrontController{

@Autowired    //此处会导包:

import org.springframework.web.bind.annotation.Autowired;

private EduTeacherService teacherService;

}

接下来继续在主函数代码中写入分页查询讲师的方法

//1.分页查询讲师的方法

@PostMapping(“getTeacherFrontList/{page}/{limit}”)//分页中应该有当前页和每次记录数,当前页为page,每页记录数为limit

//传完参数后再来写一个方法

public R getTeacherFrontList(@PathVariable long page,@PathVariable long limit){

return R.ok();//在方法中先 return 一个值防止报错

}

该方法写完后再来做具体分页,先new一个对象,然后起名,再=new对象,传入两个值:当前页和每页记录数,

代码为:

public R getTeacherFrontList(@PathVariable long page,@PathVariable long limit){

Page<EduTeacher> pageTeacher = new Page<>(page,limit);//此处需要引入page的mybatisplus对象和EduTeacher对象

//引入后来调用teacherService方法,输入代码:

teacherService.getTeacherFrontList(pageTeacher);

return R.ok();

}


三、对比之前代码区别

与之前讲师分页中的代码区别:

之前讲师分页中的代码:

return R.ok().data(“total”,total).data(“rows”,records);

传的是两个值:总记录数 total 和每页数据的 list 集合 records

用到的是 Element-ui 方式,而现在选用最原始的方式,所以返回的值就不能为两个值,而是要把分页中的所有值都返回

返回所有值有很多方法,下面讲解采用最通用的方式:

将 teacherService一行代码换为 Map 结构,,然后将 map 返回,在页面中通过map进行取值,修改为 Map<String,Object> map =teacherService.getTeacherFrontList(pageTeacher)

return R.ok().data(map);

接下来写

Service,在 EduTeacherService 中创建方法 getTeacherFrontList,

此处为 interface,再找到它的实现类,在实现类中实现该方法,实现类的代码如下:public class EduTeacherServiceImpl extends ServiceImpl <EduTeacherMapper,EduTeacher> implements EduTeacherService{

//1 分页查询讲师的方法

@Overridepublic Map<String,Object>getTeacherFrontList(Page<EduTeacher>pageParam) {

return null;

}

}

在该代码中继续输入:

QueryWrapper<EduTeacher>wrapper=new QueryWrapper<>();

wrapper.orderByDesc(...columns:”id”);//根据讲师的排序来添加条件

//把分页数据封装到pageTeacher对象

baseMapper.selectPage(pageTeacher,wrapper);

因为现在不是要返回 pageTeacher 对象,而是要返回 map 集合。所以要取出分页数据放到map集合中,继续输入代码:

//把分页数据获取出来,放到map集合

Map<String,Object> map = new HashMap<>();

再在该代码上方输入代码获取值:

List<EduTeacher> records = pageParam. getRecords();//每页数据的list集合

long current = pageParam. getCurrent () ;//当前页

long pages = pageParam. getPages() ;//总页数

long size = pageParam. getSize() ;//每页记录数

long total = pageParam. getTotal() ;//总记录数

boolean hasNext = pageParam. hasNext () ;//表示当前是否有下一页

boolean hasPrevious = pageParam. hasPrevious() ;//当前是否有上一页

之后继续放到map集合中,在代码map<String,Object>下输入

map. put(“items" , records) ;

map. put ( ”current" ,current) ;

map. put (”pages" , pages) ;

map. put("size", size) ;

map. put (" total” ,total) ;

map. put ("hasNext”, hasNext) ;

map. put (" hasPrevious" , hasPrevious) ;

之后做最后一步,需要将map进行返回

return map;

以上就做到了接口部分。这么做的目的是因为我们现在要手动写分页,所以该分页中需要所有数据,需要将所有数据进行返回。

做法是将分页数据取出放到map集合中然后进行 return 在前端数据中进行取。在实际开发中,选取相对简单的方式,就推荐之前内容中的 Element-ui 方式。

最后来启动测试一下,启动 EduApplication,启动之后打开端口号,8001来查看分页查询讲师的功能。

相关文章
|
前端开发 API 数据库
讲师分页查询前端 | 学习笔记
快速学习讲师分页查询前端
讲师分页查询前端 | 学习笔记
|
开发者 微服务
讲师分页查询(分页添加) | 学习笔记
快速学习讲师分页查询(分页添加)
讲师分页查询(分页添加) | 学习笔记
|
开发者 微服务
后台讲师管理模块-分页查询 | 学习笔记
快速学习后台讲师管理模块-分页查询
|
前端开发 API 网络架构
讲师详情前端 | 学习笔记
快速学习讲师详情前端
讲师详情前端 | 学习笔记
|
存储 Java 对象存储
讲师管理-上传讲师头像(后端接口实现) | 学习笔记
快速学习讲师管理-上传讲师头像(后端接口实现)
讲师管理-上传讲师头像(后端接口实现) | 学习笔记
|
缓存 前端开发 JavaScript
讲师管理前端-讲师列表(2) | 学习笔记
快速学习讲师管理前端-讲师列表(2)
讲师管理前端-讲师列表(2) | 学习笔记
|
前端开发 开发者 微服务
讲师详情接口 | 学习笔记
快速学习讲师详情接口
讲师详情接口 | 学习笔记
|
JSON 数据格式 开发者
后台讲师管理模块-讲师删除 | 学习笔记
快速学习后台讲师管理模块-讲师删除
后台讲师管理模块-讲师删除 | 学习笔记
|
前端开发 JavaScript API
课程详情功能前端整合 | 学习笔记
简介:快速学习课程详情功能前端整合
104 0
课程详情功能前端整合 | 学习笔记
|
负载均衡
Springcloud实战:开发课程查询功能(二)
Springcloud实战:开发课程查询功能(二)
Springcloud实战:开发课程查询功能(二)