首页 > 其他分享 >一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!

一个基于 SpringBoot + Vue 复刻高仿B站的视频网站!

时间:2024-07-29 09:28:47浏览次数:15  
标签:teriteri 视频 Vue SpringBoot git https com 复刻

大家好,我是 Java陈序员

今天,给大家介绍一个开源的视频网站,复刻高仿B站!

关注微信公众号:【Java陈序员】,获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。

项目介绍

Teriteri —— 一个采用前后端分离的模式,参考 Bilibili PC 端,基于 SpringBoot + Vue3 实现的弹幕视频网站。

目前实现的功能:

  • 首页视频随机推荐
  • 用户注册登录
  • 个人中心信息修改
  • 视频投稿
  • 视频审核
  • 内容搜索(视频 + 用户)
  • 视频详情页(观看 + 点赞 + 收藏 + 弹幕 + 评论)
  • 消息系统(聊天等)
  • 个人空间(用户作品 + 收藏夹等)

暂停开发的功能:

  • 视频分区
  • 用户动态
  • 观看历史
  • 热门排行
  • 数据统计
  • 推荐算法

技术栈:

  • 前端:Vue3 + Element-Plus
  • 后端:SpringBoot + MyBatis-Plus + JWT + Netty
  • 数据库:MySQL + Redis + ElasticSearch

项目截图

前台首页

视频播放

视频搜索

视频投稿

视频审核

视频审核是后台管理中的功能,后台管理目前只开发了视频审核功能。

个人中心

个人空间

聊天对话

快速上手

开发环境:

  • 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站,可惜还有一些功能没开发。但是瑕不掩瑜,仍是一个非常好的开源项目,部署也很简单,大家快去围观体验吧~

最后

推荐的开源项目已经收录到 GitHub 项目,欢迎 Star

https://github.com/chenyl8848/great-open-source-project

或者访问网站,进行在线浏览:

https://chencoding.top:8090/#/

大家的点赞、收藏和评论都是对作者的支持,如文章对你有帮助还请点赞转发支持下,谢谢!

标签:teriteri,视频,Vue,SpringBoot,git,https,com,复刻
From: https://www.cnblogs.com/codechen8848/p/18327510

相关文章

  • Vue3 - 最新详细实现安装使用 Google 谷歌地图教程,提供搜索城市名称及地点(搜索关键字
    前言如果您需要Vue2版本,请访问这篇文章。在vue3|nuxt3网站开发中,详解实现接入谷歌google地图申请密钥及相关配置完整流程,附带使用谷歌地图相关功能示例代码,支持地图渲染展示、在地图上标点、全球地图搜索及搜索框相关联想关键词、地图导航、用户当前位置经纬度......
  • Vuex和Pinia详解
    Vuex基础知识Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的核心构成要素包括:State(状态):存储应用的状态。Getter(获取器):从状态中派生出状态。Mutation(突变):同步地更......
  • SpringBoot2.7还是任性的,就是不支持Logback1.3,你能奈他何
    开心一刻今天上午,同事群中的刘总私聊我刘总:你来公司多久了我:一年了,刘总刘总:你还年轻,机会还很多,年底了,公司要裁员刘总语重心长的继续说到:以后我们常联系,无论以后你遇到什么困难,找我,我会尽量帮你!我:所以了,我是被裁了吗,呵,我爸知道吗?刘总:知道,今天上午保安部已经出名单了,你爸也在......
  • vue js事件方法调用api并返回值
    //确认confirm(id){if(this.isEdit&&this.form.list!==undefined&&this.form.list.length<=0){this.$notify({title:'表身为空时不能确认',type:'error'})}else{this.confirmLoading=trueinCo......
  • 70%的人都答错了的面试题,vue3的ref是如何实现响应式的?
    前言最近在我的vue源码交流群有位面试官分享了一道他的面试题:vue3的ref是如何实现响应式的?下面有不少小伙伴回答的是Proxy,其实这些小伙伴只回答对了一半。当ref接收的是一个对象时确实是依靠Proxy去实现响应式的。但是ref还可以接收 string、number 或 boolean 这样的......
  • [代码详细教程+文档+PPT+源码等]SpringBoot/SSM/Shiro物流管理系统|快递[包运行成功+
    一、项目介绍《基于SpringBoot/MybatisPlus/Shiro/Bootstrap物流管理系统》该项目含有源码、文档、答辩ppt、代码详细讲解教程等资料、配套开发软件、软件安装教程、项目发布教程等前端使用技术:HTML5,h-ui、JavaScript、jQuery等后端使用技术:SpringBoot/MybatisPlus/Shiro......
  • vue路由处理
    npminstall-g@vue/clivuecreatevue3-dynamic-routingcdvue3-dynamic-routing```npminstallvue-router@nextvuex@next 我们先定义一个简单的权限模型,以便后续使用。 在实际应用中,权限模型会更加复杂,我们可以根据实际需求进行扩展```javascript//src/store/inde......
  • springboot学生宿舍管理系统
    源码+数据库+文档(LW)。开发技术:springbootmysqlhtml。内容:学生宿舍管理系统的主要使用者分为管理员、宿管员、学生和维修员,实现功能包括管理员:首页、系统用户(管理员、学生、宿管员、维修员)、楼宇管理、宿舍管理、学生管理、申请换寝、请假报备、报修申请、......
  • SpringBoot奶茶店点餐系统
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容SpringBoot奶茶店点餐系统开题报告一、选题背景随着奶茶行业的快速发展和消费者口味的多样化,传统的点餐方式已经无法满足现代顾客对便捷、高效体......
  • vue2 - 详细实现“视频切片/分段加载“播放大视频,解决视频过大加载播放缓慢问题,vue处
    效果图在vue2、nuxt2项目开发中,详解vue视频分片加载,所谓“边播放边加载”,利用axios分段请求后端服务器每次只拿一小段视频慢慢缓存播放,让非常大的视频(例如电影,很长的视频播放太慢)流畅播放,vue2实现将video视频进行切片网络请求加载提升视频加载速度,详细解决视频分段下载......