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 interfacesvue-router
: vue. js Official route managervue-lazyload
: A Vue module that lazily loads images in an applicationvue-awesome-swiper
: VUE sliding effects plug-in based on Swiper packagefastclick
: Eliminates the 300-millisecond delay between a physical click and the trigger click event on a mobile browserbetter-scroll
: plug-in to solve the needs of various rolling scenarios on the mobile terminalaxios
: Requests back-end API datavuex
: 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.
- When the component needs to be used on the scroll navigation bar, the component style switches to the right, as follows:
- 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.