今天,给大家介绍一个开源的视频网站,复刻高仿B站!
项目介绍
Teriteri —— 一个采用前后端分离的模式,参考 Bilibili PC 端,基于 SpringBoot + Vue3 实现的弹幕视频网站。
![图片[1]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-1f84315f172fd035cb22827f49f687a3.png)
目前实现的功能:
- 首页视频随机推荐
- 用户注册登录
- 个人中心信息修改
- 视频投稿
- 视频审核
- 内容搜索(视频 + 用户)
- 视频详情页(观看 + 点赞 + 收藏 + 弹幕 + 评论)
- 消息系统(聊天等)
- 个人空间(用户作品 + 收藏夹等)
暂停开发的功能:
- 视频分区
- 用户动态
- 观看历史
- 热门排行
- 数据统计
- 推荐算法
技术栈:
- 前端:Vue3 + Element-Plus
- 后端:SpringBoot + MyBatis-Plus + JWT + Netty
- 数据库:MySQL + Redis + ElasticSearch
项目截图
前台首页![图片[2]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-19dfe70242109a9e9e92c46b4decac01.png)
视频播放![图片[3]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-d04cde502eea01d169e38095e911c6e3.png)
![图片[4]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-87b15047446892945fbe354c02315444.png)
视频搜索![图片[5]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-2893ae102a57dc0515a6c1528d7bf9b8.png)
视频投稿![图片[6]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-c7c31169e996b0b76e8294e107d45f88.png)
![图片[7]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-2bccb00974633e38a63ad532842d8db4.png)
![图片[8]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-6e2700eb9bb831f54aa23394fb5d3dda.png)
视频审核![图片[9]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-dd5463a4ff04e489e0ed095fdd2a136c.png)
![图片[10]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-2964edbc2d127416435da9fdb93c55d7.png)
视频审核是后台管理中的功能,后台管理目前只开发了视频审核功能。
个人中心![图片[11]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-1e500c0b1d7a1c657d24eb5c19efb751.png)
个人空间![图片[12]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-1247a1baf1958be57a28855c9b98cd7e.png)
聊天对话![图片[13]-一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/frc-34f3f66c8e77110baf1bd46731d687f9.png)
快速上手
开发环境:
- JDK 1.8
- ElasticSearch 7.17.16
- 阿里云OSS
- NodeJs 16.16.0
服务端
1、克隆代码
git clone https://github.com/xunlu129/teriteri-backend.git
2、创建数据库 teriteri
CREATE DATABASE `teriteri` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_bin;
3、在创建好的数据库中,执行 teriteri-backend/database/teriteri.sql 初始化数据库表
4、将项目以 Maven 的形式导入到 IDEA 中
5、将 resources 中的 application 文件加上后缀 .yml,并修改数据库、Redis、Oss、ElasticSearch 的配置信息
需要根据自己服务器信息填写好其中带
***号的配置信息,注意个人信息泄露风险!!!
6、执行主启动类 com.teriteri.backend.BackendApplication 启动项目
前台 Web 端
1、克隆代码
git clone https://github.com/xunlu129/teriteri-client.git
2、安装依赖
npm install
3、启动项目
npm run serve
4、启动成功后浏览器访问 http://localhost:8787
后台管理 Web 端
1、克隆代码
git clone https://github.com/xunlu129/teriteri-admin.git
2、安装依赖
npm install
3、启动项目
npm run serve
4、启动成功后浏览器访问 http://localhost:8788
5、管理员的账号密码需要在前台 Web 端进行注册,同时需要修改 user 表的 role 属性为 1 或者 2,该用户就是管理员了,这样就可以登录管理员端了。
Teriteri 作为一个视频网站,目前实现了大部分的功能,可以说完美复刻了B站,可惜还有一些功能没开发。但是瑕不掩瑜,仍是一个非常好的开源项目,部署也很简单,大家快去围观体验吧~
4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
6 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。








![【免费分享】WordPress 仪表板UI插件 - UiPress Pro v2.3.8[更新]-明恒博客](https://www.zym88.cn/wp-content/uploads/2022/03/2022033105145254-300x150.png)




![[开源] 多端适配社交圈子论坛 star 3k-明恒博客](https://www.zym88.cn/wp-content/uploads/2024/08/640-26-300x139.png)






暂无评论内容