0
点赞
收藏
分享

微信扫一扫

抖音实战~搜索页面~视频详情


抖音实战~搜索页面~视频详情_详情页

文章目录

  • ​​一、前端部分​​
  • ​​1. 检索关键词短视频列表​​
  • ​​2. 选中某一个短视频​​
  • ​​3. 短视频详情​​
  • ​​二、后端部分​​
  • ​​2.1. 短视频入口​​
  • ​​2.2. 短视频接口层​​
  • ​​2.3. 短视频服务层​​
  • ​​2.4. 持久层-接口​​
  • ​​2.5. 持久层- xml​​
  • ​​三、效果图鉴赏​​
  • ​​3.1. 搜索页面​​
  • ​​3.2. 短视频列表​​
  • ​​3.3. 短视频详情​​
一、前端部分
1. 检索关键词短视频列表

搜索关键词查询短视频列表

(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. 短视频详情

(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. 短视频入口

("detail")
public GraceJSONResult detail(@RequestParam(defaultValue = "") String userId,
@RequestParam String vlogId) {
return GraceJSONResult.ok(vlogService.getVlogDetailById(userId, vlogId));
}

2.2. 短视频接口层

(String userId, String vlogId);

2.3. 短视频服务层

(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. 持久层-接口

<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. 搜索页面

抖音实战~搜索页面~视频详情_搜索_02

3.2. 短视频列表

抖音实战~搜索页面~视频详情_详情页_03

3.3. 短视频详情

抖音实战~搜索页面~视频详情_详情页


举报

相关推荐

0 条评论