基于java的微信小程序的实现（七）视频首页的前后端开发
文章目录
- 1.效果演示
- 2.编写分页查询全部视频的接口开发
- 1.需求分析
- 2.创建一个pageResult类，作为分页结果的返回值
- 3.创建一个VideosVo类
- 4.代码实现
- 3.小程序端实现页面首页的展示
- 1.需求分析
- 2.代码实现
1.效果演示
2.编写分页查询全部视频的接口开发
1.需求分析
该接口会查询数据库中全部的视频内容，因为视频内容过多，要采用分页查询，这里我们使用Pageable对查询结果进行分页处理，另外，在前端显示视频的内容时候还需要额外的显示用户的头像和昵称信息，所以在进行视频列表查询的时候要关联的查询出用户的昵称和头像地址，并且要让新发布的视频放在前面显示，所以还需要按照视频发布时间做一个降序排列，并放在一个新的包装类里面返回给前端，因为要返回分页数据，所以我们还要自定义一个分页结果的类，作为该接口的返回值。
2.创建一个pageResult类，作为分页结果的返回值
@Data
public class PageResult {
//当前页数
private Integer page;
//总页数
private Integer totalPage;
//总记录数
private Long totalElements;
//每页的数据结果
private List rows;
}
3.创建一个VideosVo类
@Data
public class VideosVo {
/**
* 下面为新添加的两个字段，分别为用户头像的信息和昵称
*/
private String faceImage;
private String nickname;
private String id;
private String userId;
private String audioId;
private String videoDesc;
private String videoPath;
private Float videoSeconds;
private Integer videoWidth;
private Integer videoHeight;
private String coverPath;
private Long likeCounts;
private Integer status;
private Date createTime;
}
4.代码实现
dao层
/**
* 因为这里我们需要做一些复杂的关联查询，所以继承了JpaSpecificationExecutor接口
*/
public interface VideosDao extends JpaRepository,JpaSpecificationExecutor {
}
service层
/**
* 查询全部的视频，分页
* @param searchValue
* @param pageNum
* @param size
* @return
*/
@Override
@Transactional
public PageResult findAllVideos( Integer pageNum, Integer size) {
//创建一个分页结果类
PageResult pageResult =new PageResult();
List videosVoList =new ArrayList();
Page videosPage=null;
//对搜索的关键字进行查询，如果数据库中没有，就新添加一条数据，如果有，就在num上做+1的操作
if (StringUtils.isEmpty(searchValue)){
//创建一个排序条件，降序排列，按照创建日期排序
Sort sort =new Sort(Sort.Direction.DESC,"createTime");
//将页数，和每页大小以及排序条件传入分页对象
Pageable pageable =new PageRequest(pageNum-1,size,sort);
//返回一个page列表
videosPage= videosDao.findAll(pageable);
}
//将当前为第几页传入分页结果中
pageResult.setPage(pageNum);
//传入总页数
pageResult.setTotalPage(videosPage.getTotalPages());
//传入总记录数
pageResult.setTotalElements(videosPage.getTotalElements());
//通过对page中的对象进行遍历，做数据收集，最后返回videosVoList
for (Videos v:videosPage
) {
VideosVo videosVo =new VideosVo();
Users users = usersDao.findOne(v.getUserId());
BeanUtils.copyProperties(users,videosVo);
BeanUtils.copyProperties(v,videosVo);
videosVoList.add(videosVo);
}
//将videosVoList存入分页结果中
pageResult.setRows(videosVoList);
return pageResult;
}
controller层
//默认每页显示数据数
private final Integer SIZE=4;
@ApiOperation(value = "查询视频列表", notes = "查询视频列表")
@PostMapping(value = "/findVideoList")
public LexJSONResult findAll(@RequestParam(value = "searchValue",defaultValue = "",required = false) String searchValue, @RequestParam(value = "pageNum",defaultValue = "1" ,required = false) Integer pageNum){
PageResult pageResult = videosService.findAllVideos(searchValue,pageNum, SIZE);
return LexJSONResult.ok(pageResult);
}
3.小程序端实现页面首页的展示
1.需求分析
用户在打开小程序的时候会进入该页面，该页面在加载时会调用查询视频列表的接口，页面会将返回的数据渲染出来，在页面初始加载的时候，默认page为1，将查询视频列表的方法抽离出来，以方便调用，让用户进行上拉触底时会触发触底事件，并获取当前页面的page，以及当前的videoList，调用查询视频的方法，将page+1，在这里要进行页数判断，如果page+1后的结果=总页数，提示用户已经是最后一页了，并将新查询到的videoList，和原来的videoList进行拼接，并渲染在页面上，让用户进行上拉触顶是，会触发上拉触顶事件，会调用查询视频的方法，并且将page设为1，清空原来的videoList。
2.代码实现
const app = getApp()
Page({
data: {
// 用于分页的属性
page:1,
//视频列表
videoList:[],
//总页数
totalPage:"",
//屏幕宽度
screenWidth: 350,
//搜索关键字
searchValue:""
},
onLoad:function(params){
var me=this;
var page=me.data.page;
//该方法为可以获取用户手机的屏幕宽度
var screenWidth= wx.getSystemInfoSync().screenWidth;
var serverUrl=app.serverUrl;
var searchValue=params.searchValue;
me.setData({
screenWidth: screenWidth
})
wx.showLoading({
title: '加载中',
})
me.findAllVideos(page);
},
//封装一个查询视频列表的方法
findAllVideos:function(page){
var me =this;
var serverUrl=app.serverUrl;
//调用查询视频接口
wx.request({
url: serverUrl + '/video/findVideoList?searchValue=' + searchValue+'&pageNum=' + page,
method: 'POST',
success: function (res) {
//隐藏掉两个加载动画
wx.hideLoading();
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
console.log(res.data);
//如果返回的rows长度为0说明，用户查询的视频不存在
if (res.data.data.rows.length==0){
wx.showToast({
title: '你搜索的视频不存在QAQ',
icon:"none",
duration:4000
})
}
//获取到当前页数
var page = res.data.data.page;
//如果当前页数为1就清空videoList
if (page === 1) {
me.setData({
videoList: []
})
}
//获取到返回的videoList
var videoList = res.data.data.rows;
//获取页面原来的newVideoList
var newVideoList = me.data.videoList;
me.setData({
//将原来的videoList和新查询到的videoList进行拼接并赋值给data中的videoList
videoList: newVideoList.concat(videoList),
page: page,
totalPage: res.data.data.totalPage,
serverUrl: serverUrl
})
}
})
},
//触顶事件
onPullDownRefresh:function(){
var me =this;
//页面顶端显示加载中符号
wx.showNavigationBarLoading();
//查询第一页的内容
me.findAllVideos(1);
},
//触底事件
onReachBottom:function(){
var me =this;
//获取页面当前的页数
var currentPage=me.data.page;
//获取总页数
var totalPage = me.data.totalPage;
wx.showLoading({
title: '加载中',
})
//判断是否与总页数相等，如果相等则不能下拉
if (currentPage === totalPage){
wx.showToast({
title: '已经是最后一页了QAQ',
icon:"none"
})
return;
}
var page=currentPage+1
me.findAllVideos(page);
wx.hideLoading();
},
//当用户点击某个视频时候，会进入视频详情页
showVideoInfo:function(e){
var me =this;
//获取用当前点击视频的索引值
var arr=e.target.dataset.arrindex;
//获取视频列表
var videoList=me.data.videoList;
//因为要整体作为参数传递到下个页面，所以将该videoVo对象转换为字符串传递给下个页面
var video=JSON.stringify (videoList[arr]);
wx.redirectTo({
url: '../videoinfo/videoinfo?video='+video,
})
}
})