bili-video

Imitation bilibili video website project, unofficial website, this project is for study and reference only!!

One, foreword

Due to the epidemic, I stayed at home for a long time, so I consolidated and learned front-end knowledge during this period. However, after studying for a period of time, I felt that I had mastered some technologies but had nothing to do, so the idea of doing a project came into my mind. What do you want to do when you have this idea? During a visit to B station, SORRY, I touched it.

From the beginning of this project to make the business analysis, let me have a strong determination to long-term maintenance of the project, the project either from the data interface, or technical, I go work of liver, midway in trouble really want to give up the idea of, because the data interface of the project is a difficult problem at the beginning, Because there is no standardized data interface document on the Internet at present, but we finally overcome it. After the project is basically completed, we will sort out the data interface used in this project for your reference. I front-end cabbage a tree, big guys light spray, hee hee hee hee.

Enter the GitHub project repository (welcome star and Pr)

Enter the preview of project launch (it is recommended to open it using Chrome)

[Note] This project is still rough at the present stage, and will be improved and optimized in the future.

Project function module

Home page

  • Switcher components
  • Caroute diagram component
  • Scroll component (better scroll secondary encapsulation)
  • Video recommendation List
  • Loading component
  • Confirm the component

Video player page

  • Video player
  • Video introduction
  • Video is recommended
  • Video review

Search page

  • Popular search tags
  • Search history
  • Anti – shake search keywords and highlighting
  • List of search results

Video partition

  • Partition classification video list

Video Partition Leaderboard

  • Partition video leaderboard list

Real data source

  • Some video data obtained through my own research
  • Partial video data provided by SocialSisterYi on GitHub (thanks for saving me a lot of work)

Data interface used in this project: Project data interface

Note: All apis used in this project are placed in the SRC/API folder

Ii. Project Introduction

Overall project structure

The directory structure

Only the contents of the SRC folder are described here

├ ─ API// Data request interface, related functions, and basic configuration├ ─ base// Basic UI components├ ─ common// Common styles, tool-like functions, and icon ICONS├ ─ components// Core functional components├ ─ the router// Route configuration file└ ─ storeVuex status management file
  App.vue           / / the root component
  main.js           // Import file
Copy the code

Technology stack

  • vue2.5: a set of progressive frameworks for building user interfaces
  • vue-router: vue. js Official route manager
  • vue-lazyload: A Vue module that lazily loads images in an application
  • vue-awesome-swiper: VUE sliding effects plug-in based on Swiper package
  • fastclick: Eliminates the 300-millisecond delay between a physical click and the trigger click event on a mobile browser
  • better-scroll: plug-in to solve the needs of various rolling scenarios on the mobile terminal
  • axios: Requests back-end API data
  • vuex: State management mode developed specifically for vue.js applications

Project problems

  • The performance of the current project is poor and there is much room for optimization, so the performance will be optimized after the completion of the project development
  • Do not contain Spaces in the search box. If there are Spaces in the search box, the code cannot be compiled
  • The search box must be cleared and entered before the search prompt is displayed
  • The player’s playback function is not compatible with Safari
  • The design idea of video-list module in the project is wrong

(The above problems are found but not yet solved by this dish chicken, and will be dealt with later)

Three, function introduction

Front part

Video player page

Search page

Video leaderboards

Video partition page

Five, part of the functional code display

Search box anti – shake core code

/ / image stabilization
export function debounce (func, delay) {
  let timer
  return function (. args) {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout((a)= > {
      func.apply(this, args)
    }, delay)
  }
}
Copy the code

Highlight the search term core code

// Highlight keywords
export function setHighlight (keyword, item, className) {
  let s = new Set(a)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
}
Copy the code

Switch labels on Switcher

Features: This component provides two states, to provide silky interactive animation, this component is flexible, the bottom move bar automatically changes according to the width of the element. You just pass in the list array that you want to display. Responds to the subscript of the current location to the calling component when clicked.

  1. When the component needs to be used on the scroll navigation bar, the component style switches to the right, as follows:
  2. When the component needs to be used on a toggle TAB that does not require scrolling, the component style switches to center as follows:
<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: (a)= >[]},indexTab: {
      type: Number.default: 0
    },
    displayType: {
      type: String.// Start is on the left and around is on the middle
      default: 'start'}},computed: {
    switcherType () {
      return this.displayType === 'start' ? 'switcher-start' : 'switcher-around'
    }
  },
  created () {
    setTimeout((a)= > {
      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>
Copy the code

Iv. Future expectations

At present, there are still many functions in this project, so I will realize the remaining functions as soon as possible in the future, presenting a perfect WebApp project. At the same time, I am also very happy to see your star and raise PR. This project is still under development.