本文主要是介绍vue2.0 + springBoot2.6.3 实现仿b站综合性网站，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
简介
线上地址：http://61.183.42.66:44041/
代码地址：
- 后台：pilipili-back: 仿pilipili的后端部分 - Gitee.com
- 前台：pilipili-front: 仿p站的前端部分 - Gitee.com
首页样式参考博客：vue.js 仿哔哩哔哩的网站(低仿bilibili)_仿b站网页制作代码-CSDN博客
更新日志：
2023-12-25：发布1.0版本
2024-01-20：发布2.0版本
项目介绍：
个人练习用的综合性网站，以前端的api接口为准，后台接口有很多没用到。
我前端比较菜，只会用vue2，开发理念是不出错就行。
后端没用虚拟机，一切服务器和工具都是在windows系统中安装配置的。
例如：直播的rtmp推拉流Nginx服务器，发布公网的frp工具。
redis，RocketMq。
前端启动项目，npm i，下载好依赖后就可以启动了。
后端启动项目，下载好依赖后直接启动就行，不需要开启任何外部工具。
开发环境：
1. Windows 64位 16GB内存 2. IntelliJ IDEA 2020.3 3. JDK 1.8 （JDK1.8是写项目的Java最低限度版本了） 4. VsCode 1.82.3 5. node-v14.15.0
涉及技术和中间件：
前端：vue 2.0 + elementUI
后端：SpringBoot 2.6.3 + mysql 5.7 + Nginx + redis 3.2.1 + Rocketmq 4.4 + WebSocket +
maven配置：
一、登录功能
前端代码，包含了登录部分和用户部分
1、登录页面
仿照的ruoyi系统的登录页面
2、个人设置页
仿照的ruoyi系统的用户设置页面
3、个人中心
仿照b站的个人中心
二、视频功能
前端代码，不包含视频观看页
1、首页
仿照b站的首页
2、视频观看页
前端参考：Vue中实现视频播放——vue-video-player、dplayer-CSDN博客
video采用的Dplayer，实测vue-video-player也行，配置是默认的最简单的配置。
前端代码video部分
后端参考：java 实现断点续传服务_断点续传java-CSDN博客
视频播放采用了断点续传，分片请求的设计，在网络速度很慢的时候依然能快速观看视频。
通过downloadVideo()接口在前后端之间开启长连接，后端返回206状态码建立长连接，然后由前端的vue-Dplayer自动控制断点的起止位置，完成断点续传。
3、搜索页
仿照b站的搜索页
4、投稿页
难点就一个，视频文件一般比较大，所以要有断点续传功能。
前端参考：【java】java实现大文件的分片上传与下载（springboot+vue3)_java分片下载-CSDN博客
原作者是用vue3实现的，我的主要工作是将vue3转成vue2
后端参考：同前端
我借鉴了分片上传，分片下载是采用的206协议开启断点续传，来达到分片下载功能。
为了方便，视频是存在本地的，也可以根据需要存在Oss、FastDFS等服务器里。
三、直播功能
前端代码
1、列表
2、开启直播
开启直播的核心就是直播推流拉流，在进行了各种尝试后，发现在网页端进行推流太复杂了，所以暂时不在前端做了。
目前我是通过定时任务的方式，在java后台进行直播推流的，推流到Nginx服务器里。拉流也是从该Nginx服务器拉取。
目前主流的做法应该是借用第三方工具，例如七牛云，来实现直播推流功能。
参考博客：Vue中如何进行屏幕录制与直播推流_vue录屏功能-CSDN博客
在windows下搭建、配置nginx流媒体服务器，并进行rtmp流的推流、拉流测试_推流检测ip-CSDN博客
JavaCV之rtmp推流（FLV和M3U8）_javaac进行mov进行推流-CSDN博客
JavaCV推流实战(MP4文件)_javacv 推流本地mp4-CSDN博客
3、观看直播
前端参考：【视频直播流】vue flv视频直播流 flv rtmp vue 直播视频流_vue-video-player 支持flv格式播放吗 vue-CSDN博客
和视频播放器唯一的区别就是，加了一行live:true
后端参考：同开启直播，就是创建Nginx直播服务器
四、聊天室功能
前端代码，主要难在前端的MyChat页面
1、列表
2、创建聊天室
3、前往聊天
前端参考：SpringBoot+Vue 单页面多组WebSocket_一个页面多个websocket连接-CSDN博客
样式参考：寻国记的个人空间-寻国记个人主页-哔哩哔哩视频
当点击聊天室栏目时打开对应的webSocket，和后台建立webSocket通信，开启实时聊天功能，关闭浏览器时关闭全部的webSocket
后端参考：springBoot集成webSocket并使用postMan进行测试_postman ws请求-CSDN博客
通过webSocket工具开启长连接，接收chatId和session，来区分是哪个浏览器的会话请求，根据token获取用户信息，来收发消息
五、其他功能
1、发布公网
参考博客：搭建frp进行内网穿透_frp内网穿透-CSDN博客
b站也有frp相关推荐和教程，我使用的是樱花frp免费版。
这样省掉了很多麻烦，不用配置路由、网络、虚拟机。相当于挂了个代理，其他人访问代理就能跳转到我的项目本地。
这是前端访问后台时的配置，本地测试用8081，访问frp用http://61.183.42.66:49027
2、支付功能
我使用了支付宝、微信扫码支付，根据网上的教程做的，会继续优化。
参考博客：Java接入微信支付超级详细教程——从入门到精通_java开发公网使用微信支付需要做什么-CSDN博客
这篇关于vue2.0 + springBoot2.6.3 实现仿b站综合性网站的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
