一、前端部分

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*/@Overridepublic 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 isPrivateFROM vlog vLEFT JOINusers uONv.vloger_id = u.idWHERE v.id = #{paramMap.vlogId}</select>

三、效果图鉴赏

3.1. 搜索页面

3.2. 短视频列表

3.3. 短视频详情