文章目录
一、前端部分
1. 检索关键词短视频列表
搜索关键词查询短视频列表
// 根据搜索关键词查询短视频列表
fetchList(page) {
uni.stopPullDownRefresh();
var me = this;
page = page + 1;
var search = me.search;
var userId = getApp().getUserInfoSession().id;
var serverUrl = app.globalData.serverUrl;
uni.request({
method: "GET",
header: {
headerUserId: userId,
headerUserToken: app.getUserSessionToken()
},
url: serverUrl + "/vlog/indexList?userId=" + userId + "&search=" + search + "&page=" + page + "&pageSize=10",
success(result) {
if (result.data.status == 200) {
var waterList = result.data.data.rows;
var totalPage = result.data.data.total;
me.waterList = me.waterList.concat(waterList);
me.page = page;
me.totalPage = totalPage;
if (waterList == null || waterList == undefined || waterList.length == 0) {
uni.showToast({
title: "没有结果~"
})
}
}
uni.stopPullDownRefresh();
}
});
}
2. 选中某一个短视频
goToVlog(vlogId) {
uni.navigateTo({
url: "../vlog/vlog?vlogId=" + vlogId
})
},
3. 短视频详情
// 根据用户userId和vlogId查询短视频详情和首页一样只是没有tab页
displayVideoPaging(page, needClearList) {
// 查询首页短视频列表
var me = this;
var vlogId = me.vlogId;
var myUserInfo = getApp().getUserInfoSession();
var userId = "";
if (myUserInfo != null) {
userId = myUserInfo.id;
}
var userId = getApp().getUserInfoSession().id;
var serverUrl = app.globalData.serverUrl;
uni.request({
method: "GET",
header: {
headerUserId: userId,
headerUserToken: app.getUserSessionToken()
},
url: serverUrl + "/vlog/detail?userId=" + userId + "&vlogId=" + vlogId,
success(result) {
if (result.data.status == 200) {
var vlog = result.data.data;
var playerList = [];
playerList.push(vlog);
me.playerList = playerList;
me.freshCommentCounts();
me.setThisVlogInfo();
} else {
uni.showToast({
title: result.data.msg,
icon: "none",`在这里插入代码片`
duration: 3000
});
}
}
});
}
二、后端部分
2.1. 短视频入口
/**
* 根据视频主键查询vlog详情
*
* @param userId 用户主键ID
* @param vlogId 视频主键ID
* @return
*/
@GetMapping("detail")
public GraceJSONResult detail(@RequestParam(defaultValue = "") String userId,
@RequestParam String vlogId) {
return GraceJSONResult.ok(vlogService.getVlogDetailById(userId, vlogId));
}
2.2. 短视频接口层
/**
* 根据视频主键查询vlog详情
*/
public IndexVlogVO getVlogDetailById(String userId, String vlogId);
2.3. 短视频服务层
/**
* 根据视频主键查询vlog详情
*
* @param userId
* @param vlogId
* @return
*/
@Override
public IndexVlogVO getVlogDetailById(String userId, String vlogId) {
Map<String, Object> map = new HashMap<>();
map.put("vlogId", vlogId);
List<IndexVlogVO> list = vlogMapperCustom.getVlogDetailById(map);
if (list != null && list.size() > 0 && !list.isEmpty()) {
IndexVlogVO vlogVO = list.get(0);
// return vlogVO;
return setterVO(vlogVO, userId);
}
return null;
}
2.4. 持久层-接口
/**
* 根据视频主键查询vlog详情
*
* @param map
* @return
*/
public List<IndexVlogVO> getVlogDetailById(@Param("paramMap") Map<String, Object> map);
2.5. 持久层- xml
<!--根据视频主键查询vlog详情-->
<select id="getVlogDetailById" parameterType="map" resultType="com.gblfy.vo.IndexVlogVO">
SELECT v.id as vlogId,
v.vloger_id as vlogerId,
u.face as vlogerFace,
u.nickname as vlogerName,
v.title as content,
v.url as url,
v.cover as cover,
v.width as width,
v.height as height,
v.like_counts as likeCounts,
v.comments_counts as commentsCounts,
v.is_private as isPrivate
FROM vlog v
LEFT JOIN
users u
ON
v.vloger_id = u.id
WHERE v.id = #{paramMap.vlogId}
</select>
三、效果图鉴赏
3.1. 搜索页面
3.2. 短视频列表
3.3. 短视频详情