bili-video
Проект веб-сайта имитации билибили, неофициальный веб-сайт, этот проект предназначен только для изучения и ознакомления! !
Введение
Из-за эпидемии я долго сидел дома, поэтому за это время закрепил и усвоил фронтенд знания, но после обучения какое-то время есть ощущение, что я освоил некоторые технологии, но не некуда применить, поэтому пришла в голову идея сделать проект. После этой идеи, что вы хотите сделать? Когда я однажды был на станции B, извините, я сделал это (имитация видео Bilibili, веб-приложение)
После проведения бизнес-анализа этого проекта с самого начала у меня есть твердая решимость поддерживать этот проект в течение длительного времени Будь то интерфейс данных или применение технологий, я много работал и столкнулся с трудностями в середине , У меня есть идея отказаться, потому что интерфейс данных этого проекта был проблемой в начале. Поскольку в Интернете нет стандартного документа, связанного с интерфейсом данных, он был наконец преодолен. После того, как проект в основном завершен, он будет отсортирован для использования в этом проекте Интерфейс данных для справки. Передо мной пекинская капуста, и большие парни слегка брызгают, хи-хи-хи.
Войдите в репозиторий проекта GitHub.(Добро пожаловать в звездочку и упомяните пр.)
Войдите в онлайн-предварительный просмотр проекта(рекомендуется использовать хром для открытия)
[Примечание] Текущий этап этого проекта все еще относительно грубый, и в будущем он будет улучшен и оптимизирован!
Функциональный модуль проекта
титульная страница
- компонент переключателя
- Карусельный компонент
- компонент прокрутки (улучшенная вторичная инкапсуляция прокрутки)
- Список рекомендуемых видео
- компонент загрузки
- подтвердить компонент
Страница воспроизведения видео
- видео-плеер
- Видео введение
- Видеорекомендация
- видео обзор
страница поиска
- Популярные поисковые теги
- История поиска
- Ключевые слова для поиска с защитой от сотрясений и выделение
- список результатов поиска
Видео раздел
- Список видео классификации разделов
Таблица лидеров дивизиона видео
- Список лидеров дивизиона видео
реальный источник данных
- Часть видеоданных, полученных в результате моего собственного исследования
- от GitHubSocialSisterYiЧасть предоставленных видеоданных (спасибо, что сэкономили мне много работы)
Интерфейсы данных, используемые в этом проекте:интерфейс данных проекта
Примечание. Все 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: Плагин эффекта скольжения Vue на основе пакета swiper. -
fastclick: устраняет задержку в 300 мс между физическим кликом и инициированием события клика в мобильных браузерах. -
better-scroll: подключаемый модуль, который решает различные сценарии прокрутки на мобильном терминале. -
axios: запрашивать данные API серверной части -
vuex: шаблон управления состоянием, разработанный специально для приложений Vue.js.
проблема проекта
- Производительность текущего проекта низкая, и есть много возможностей для оптимизации, поэтому производительность будет оптимизирована после разработки проекта.
- Содержимое окна поиска не может содержать пробелы, если они есть, это вызовет проблему, что код не может быть скомпилирован в результатах поиска.
- В поле поиска необходимо очистить текстовое поле и ввести его, чтобы отобразить запрос на поиск.
- Функция воспроизведения плеера несовместима с браузером Safari, что приводит к невозможности воспроизведения
- Дизайнерская идея модуля видео-листа в проекте неверна
(Вышеуказанные проблемы - это проблемы, которые курица обнаружила, но не решила, и они будут рассмотрены позже)
3. Введение в функцию
Домашний раздел
Страница воспроизведения видео
страница поиска
Таблица лидеров видео
Страница раздела видео
Пять, часть отображения функционального кода
Основной код защиты от сотрясений окна поиска
// 防抖
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
}
Компонент переключателя реализует эффект переключения меток.
Функция: этот компонент имеет два состояния.Чтобы обеспечить плавную интерактивную анимацию, компонент обладает высокой гибкостью, а нижняя движущаяся полоса будет автоматически изменяться в зависимости от ширины элемента. Просто передайте массив списков, которые необходимо отобразить. Когда происходит щелчок, он будет реагировать на индекс текущей позиции вызывающего компонента.
- Когда компонент необходимо использовать на панели навигации с прокруткой, стиль компонента переключается на правый макет следующим образом:
- Когда компонент необходимо использовать на вкладке переключения, которая не требует прокрутки, стиль компонента переключается на расположение по центру следующим образом:
<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. Будущие ожидания
В настоящее время в этом проекте еще много функций, которые еще не реализованы, поэтому остальные функции будут реализованы как можно скорее в будущем, и будет представлен полный проект веб-приложения. очень рад за звезду и пр. Хи хи хи, этот проект все еще упорно работает над развитием. . . .