抖音實戰~搜尋頁面~視訊詳情

文章目錄

• ​​一、前端部分​​

• ​​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. 短視訊詳情