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

文章目录

• ​​一、前端部分​​

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

3.2. 短视频列表

3.3. 短视频详情