【实用github项目】一个基于vue3搭建的视频网站平台客户端

本文最后更新于 2024-05-12，

若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我删除。

本站只有Telegram群组为唯一交流群组，点击加入

文章内容有误？申请成为本站文章修订者或作者？向站长提出申请

Teriteri

视频演示：
- 用 SpringBoot + Vue 复刻了一个B站作为毕设项目(bilibili.com)
后端代码：
- xunlu129/teriteri-backend: 一个基于 springboot + mybatis-plus 搭建的视频网站平台后端 (github.com)
客户端代码：
- xunlu129/teriteri-client: 一个基于 vue3 搭建的视频网站平台客户端 (github.com)
管理员端代码：
- xunlu129/teriteri-admin: 一个基于 vue3 搭建的视频网站平台管理员端 (github.com)

其他由于时间问题，暂停开发的功能：

首先：要体验完整功能，三个端的代码必须版本一致，前端启动依赖后端，所以建议先启动好后端后再启动前端，以防出现一些问题报错。
鉴于很多小伙伴对ES都不是很了解，这份ES笔记可供参考：Elasticsearch笔记，笔记内容部分是在linux系统上操作的，windows上可以对照修改一下。注意其中要安装两个分词插件。

在项目根目录下（src同级目录）创建 public/chunk/ 文件夹，即创建public文件夹后再在里面创建chunk文件夹，用于存储上传的视频分片。如果不创建，在上传视频时会出异常。
项目使用 阿里云OSS 存储视频，请自行准备，当然代码也有提供上传本地的方法（已注掉），但是没有写怎么观看视频，要是不嫌麻烦可以自行补写，不过本地视频的话，前端要通过读数据流播放可能非常困难，因此，本人还是建议开通一个阿里云对象存储，省时省力，而且也不贵。
项目使用的 ElasticSearch 版本为 7.17.16，如果使用其他版本，请更改 pom.xml 内对应的 version 。ES的索引创建，可以运行测试类 ApplicationTests 中的 createIndex 方法自动创建。
另外，如果运行测试类 ApplicationTests 中的函数时出现 websocket 相关的报错，可以先把 WebSocketConfig 类里的全部东西注掉，记得测试完后还原回去。
项目使用 application.yml 文件作为启动配置，因此不要在 application.properties 中写东西，或者你把配置信息全部写到pro也行。把 resources 中的 application 文件加上后缀 .yml 即可，需要根据自己服务器信息填写好其中带 *** 号的配置信息。注意个人信息泄露风险！！！
注意Netty服务占用7071端口，如果需要更换，请在 IMServer 类中设置。

准备好以上说的后，就可以启动项目了：

1、下载Maven依赖

2、启动BackendApplication

轮播图是在 carousel.json 写死的，可以改成你自己的，目前轮播的是OSS上的资源，只开了 localhost:8787 的白名单，所以如果服务端口改成其他会出现图片加载失败的情况。
一些图标库可以在阿里巴巴矢量图标库上找，因为现在用的是创建的图标库，指不定哪天改几下，旧的图标就用不了了。
注意代理端口号和后端匹配

剩下没什么好注意的，启动就完事了：

1、下载依赖
npm install

2、启动项目
npm run serve