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博客