一、前言
由于疫情原因,在家待了很长时间,所以在这段时间里对前端的知识进行了巩固及学习,然而在学了一段时间以后,有一种掌握了一些技术但却无处可施的感觉,于是脑海中就浮现了做一个项目的念头。有了这个念头之后,就开始想做什么呢?在一次逛B站的时候,对不起,我对它动手了(仿哔哩哔哩视频webapp)
从一开始对这个项目进行业务分析后,让我有着坚定的决心要长期维护这个项目,这个项目无论是从数据接口,还是运用技术上,我都煞费心血的肝,中途遇到困难真的有想放弃的念头,因为这个项目的数据接口一开始就是一个难题,由于网上目前还没有规范的相关数据接口文档,但是最后还是克服了,等项目基本完善后会整理出在这个项目中使用的数据接口供大家参考。本人前端大白菜一棵,这个项目对我来说意义非凡,希望大家能支持。
项目源码地址(后续将部署上线)
项目目的
本项目仅仅以学习为目的开发,希望能借助这个项目将所学技术运用实践出来,通过实践以及在项目中遇到的问题,来提高自己的技术能力,通过做项目的方式寻找自己的不足,也希望这个项目能帮助到大家。
项目进度(进度30%)
首页
- switcher组件
- 轮播图组件
- scroll组件(better-scroll二次封装)
- 视频推荐列表
- loading组件
视频播放页
- 视频播放器
- 视频简介
- 视频推荐
- 视频评论
搜索页
- 热门搜索标签
- 历史搜索记录
- 防抖搜索关键词及高亮显示
- 无法搜索具体内容
真实数据来源
- 通过自己研究获取的部分视频数据
- 由GitHub上的SocialSisterYi提供的部分视频数据
本人才学疏浅,若有不足,欢迎指出!
二、项目介绍
项目整体架构
这是项目大体目前期望的整体架构,可能在后续开发中还会变化。。。
技术栈
- vue2.5:一套用于构建用户界面的渐进式框架
- vue-router: Vue.js 官方的路由管理器
- vue-lazyload:在应用程序中懒散加载图像的Vue模块
- vue-awesome-swiper:基于swiper封装的vue滑动特效插件
- fastclick:消除物理点击和在移动浏览器上触发点击事件之间300毫秒的延迟
- better-scroll:解决移动端各种滚动场景需求的插件
- axios:请求后端api数据
- vuex:专为 Vue.js 应用程序开发的状态管理模式
三、功能介绍
首页部分
视频播放页
搜索页
四、未来期望
目前这个项目还有很多功能还未实现,所以在之后的时间里尽快将剩余功能实现,呈现出一个完善的webapp项目出来,同时我也非常乐意大家的star以及提pr的嘻嘻嘻,这个项目还在努力开发中,尽量呈现处最好的一面出来!!!