Vue2.5打造簡潔視頻webapp

bili-video

仿bilibili視頻網站項目，非官方網站，本項目僅供學習和參考！！

1、前言

因爲疫情緣由，在家待了很長時間，因此在這段時間裏對前端的知識進行了鞏固及學習，然而在學了一段時間之後，有一種掌握了一些技術但卻無處可施的感受，因而腦海中就浮現了作一個項目的念頭。有了這個念頭以後，就開始想作什麼呢？在一次逛B站的時候，對不起，我對它動手了（仿嗶哩嗶哩視頻webapp）

從一開始對這個項目進行業務分析後，讓我有着堅決的決心要長期維護這個項目，這個項目不管是從數據接口，仍是運用技術上，我都煞費心血的肝，中途遇到困難真的有想放棄的念頭，由於這個項目的數據接口一開始就是一個難題，因爲網上目前尚未規範的相關數據接口文檔，可是最後仍是克服了，等項目基本完善後會整理出在這個項目中使用的數據接口供你們參考。本人前端大白菜一棵，大佬們輕噴，嘻嘻嘻。

進入GitHub項目倉庫（歡迎star和提pr）

進入項目上線預覽（建議使用chrome打開）

[注]本項目目前階段還比較粗糙，後續會進行改進和優化哦！

項目功能模塊

首頁

• switcher組件
• 輪播圖組件
• scroll組件（better-scroll二次封裝）
• 視頻推薦列表
• loading組件
• confirm組件

視頻播放頁

• 視頻播放器
• 視頻簡介
• 視頻推薦
• 視頻評論

搜索頁

• 熱門搜索標籤
• 歷史搜索記錄
• 防抖搜索關鍵詞及高亮顯示
• 搜索結果列表

視頻分區

• 分區分類視頻列表

視頻分區排行榜

• 分區視頻排行榜列表

真實數據來源

• 經過本身研究獲取的部分視頻數據
• 由GitHub上的SocialSisterYi提供的部分視頻數據（感謝給我節省了大量工做量）

本項目中所用的的數據接口：項目數據接口

注：本項目全部使用到的api所有放在src/api文件夾中

2、項目介紹

項目總體架構

這是項目大致目前指望的總體架構，可能在後續開發中還會變化。。。

目錄結構

這裏只了介紹src文件夾中的內容

├─api               //數據請求接口、相關函數和基礎配置
├─base              //基礎UI組件
├─common            //通用樣式、工具類函數和icon圖標
├─components        //核心功能組件
├─router            //路由配置文件
└─store             //vuex狀態管理文件
  App.vue           //根組件
  main.js           //入口文件
複製代碼

技術棧

• vue2.5：一套用於構建用戶界面的漸進式框架
• vue-router： Vue.js 官方的路由管理器
• vue-lazyload：在應用程序中懶散加載圖像的Vue模塊
• vue-awesome-swiper：基於swiper封裝的vue滑動特效插件
• fastclick：消除物理點擊和在移動瀏覽器上觸發點擊事件之間300毫秒的延遲
• better-scroll：解決移動端各類滾動場景需求的插件
• axios：請求後端api數據
• vuex：專爲 Vue.js 應用程序開發的狀態管理模式

項目問題

• 目前的項目性能較差，優化空間很是多，因此項目開發完成後會對性能進行優化
• 搜索框的內容中不可帶有空格若是帶有空格，會致使搜索出的結果出現代碼沒法編譯的問題
• 搜索框須要清空文本框後輸入纔可顯示搜索提示詞
• 播放器的播放功能在Safari瀏覽器不兼容，致使沒法播放
• 項目中的video-list模塊設計思路錯誤

（以上問題是本菜雞發現但還未解決的問題，後期會進行處理）

3、功能介紹

首頁部分

視頻播放頁

搜索頁

視頻排行榜

視頻分區頁

5、部分功能代碼展現

搜索框防抖核心代碼

// 防抖
export function debounce (func, delay) {
  let timer
  return function (...args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}
複製代碼

高亮搜索詞核心代碼

// 高亮關鍵詞
export function setHighlight (keyword, item, className) {
  let s = new Set()
  for (let k of keyword) {
    s.add(k)
  }
  s.forEach(function (value) {
    item = item.replace(value, function () {
      return `<em class="${className}">${value}</em>`
    })
  })
  return item
}
複製代碼

switcher組件實現標籤切換效果

功能：該組件提供兩種狀態，爲提供絲滑的交互動畫，該組件靈活度高，底部移動條會自動根據元素寬度變化。只須要傳入須要顯示的列表數組。當發生點擊時會響應當前位置的下標給調用組件。

1. 當組件須要使用在滾動導航欄上時，該組件樣式切換爲靠右排布，以下：

2. 當組件須要使用於不須要滾動的切換tab上時，該組件樣式切換爲居中排布，以下：

<template>
  <div class="switcher" ref="switcher" :class="switcherType">
    <div class="switcher-tab" v-for="(item, index) in list" :key="index" :class="{active : index === indexTab}" @click="switchTab(index)">
      <span>{{item}}</span>
    </div>
    <div ref="anchor" class="switcher-header-anchor"></div>
  </div>
</template>

<script type="text/ecmascript-6"> export default { props: { list: { type: Array, default: () => [] }, indexTab: { type: Number, default: 0 }, displayType: { type: String, // start居左，around居中 default: 'start' } }, computed: { switcherType () { return this.displayType === 'start' ? 'switcher-start' : 'switcher-around' } }, created () { setTimeout(() => { this.moveAnchor(this.indexTab) }, 20) }, methods: { switchTab (index) { if (this.indexTab !== index) { this.$emit('switchTab', index) this.moveAnchor(index) } }, moveAnchor (index) { let tab = this.$refs.switcher.childNodes[index] this.$refs.anchor.style['transform'] = `translateX(${tab.offsetLeft + 16}px)` this.$refs.anchor.style.width = tab.offsetWidth - 32 + 'px' } }, watch: { indexTab (newIndex) { if (newIndex) { this.moveAnchor(newIndex) } } } } </script>

<style lang="stylus" scoped rel="stylesheet/stylus"> @import '~common/stylus/variable.styl'; .switcher { position: relative; display: flex; flex-direction: row; font-size: $font-size-medium; &.switcher-around { justify-content: space-evenly; } &.switcher-start { text-align: left; } .switcher-tab { display: inline-block; text-align: center; vertical-align: middle; height: 40px; line-height: 40px; white-space: nowrap; padding: 0 16px; color: #505050; &.active { color: $color-theme; } } .switcher-header-anchor { display: block; position: absolute; left: 0; bottom: 0; height: 2px; border-radius: 2px; background: $color-theme; transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } } </style>
複製代碼

4、將來指望

目前這個項目還有不少功能還未實現，因此在以後的時間裏儘快將剩餘功能實現，呈現出一個完善的webapp項目出來，同時我也很是樂意你們的star以及提pr的嘻嘻嘻，這個項目還在努力開發中。。。。