[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9014":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":14,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":21,"hasPages":21,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},9014,"teriteri-client","xunlu129\u002Fteriteri-client","xunlu129","一个基于 vue3 搭建的视频网站平台客户端","",null,"Vue",1082,175,3,7,0,1,16,58.84,"MIT License",false,"main",[],"2026-06-12 04:00:42","# 一个用Springboot + Vue开发的仿B站项目\n\n\n\n## 项目：Teriteri\n\n- 使用 java 语言复刻了一个B站，实现了一个弹幕视频网站所具备的大部分功能。\n- 采用前后端分离模式开发，web端分为客户端和后台管理。本项目主要实现客户端各功能，后台管理只写了视频审核。\n- 项目界面纯手搓，因此开发缓慢，总耗时7个多月。\n\n\n\n## 项目地址：\n\n- **视频演示：**\n  - [我用 SpringBoot + Vue 复刻了一个B站作为毕设项目(bilibili.com)](https:\u002F\u002Fwww.bilibili.com\u002Fvideo\u002FBV1pM4m1D7Vt)\n\n- **后端代码：**\n  - [xunlu129\u002Fteriteri-backend: 一个基于 springboot + mybatis-plus 搭建的视频网站平台后端 (github.com)](https:\u002F\u002Fgithub.com\u002Fxunlu129\u002Fteriteri-backend)\n\n- **客户端代码：**\n  - [xunlu129\u002Fteriteri-client: 一个基于 vue3 搭建的视频网站平台客户端 (github.com)](https:\u002F\u002Fgithub.com\u002Fxunlu129\u002Fteriteri-client)\n\n- **管理员端代码：**\n  - [xunlu129\u002Fteriteri-admin: 一个基于 vue3 搭建的视频网站平台管理员端 (github.com)](https:\u002F\u002Fgithub.com\u002Fxunlu129\u002Fteriteri-admin)\n\n### ==**代码都拿了，顺手帮忙给我视频点个赞，给代码点个star呗，拜托了，这对我真的很重要![0EF500CA](README.assets\u002F0EF500CA.png)**==\n\n### ==**声明：本项目只用作学习参考，无任何商业用途，对于项目中的部分图片来源，我已注明出处，若他人使用本项目造成的侵权问题，本人概不负责**==\n\n\n\n## 技术线\n\n- **前端（web端）：**\n  - Vue3全家桶 + Element-Plus + Axios等\n\n- **后端（服务端）：**\n  - SpringBoot2.7 + MyBatis-Plus + JWT + Netty等\n\n- **数据库：**\n  - MySQL + Redis + ElasticSearch7.17.16\n\n- **开发环境：**\n  - NodeJs: 16.16.0 + JDK: 1.8\n\n\n\n## 项目功能\n\n- **首页视频随机推荐**\n- **用户注册登录**\n- **个人中心信息修改**\n- **视频投稿**\n- **视频审核**\n- **内容搜索（视频 + 用户）**\n- **视频详情页（观看 + 点赞 + 收藏 + 弹幕 + 评论）**\n- **消息系统（聊天等）**\n- **个人空间（用户作品 + 收藏夹等）**\n\n其他由于时间问题，暂停开发的功能：\n\n- 视频分区\n- 用户动态\n- 观看历史\n- 热门排行\n- 数据统计\n- 推荐算法\n\n\n\n## 代码部署注意事项\n\n- 首先：要体验完整功能，三个端的代码必须版本一致，前端启动依赖后端，所以建议先启动好后端后再启动前端，以防出现一些问题报错。\n- 鉴于很多小伙伴对ES都不是很了解，我自己整理了一份ES笔记可供参考：[Elasticsearch笔记](.\u002Felasticsearch.md) ，笔记内容部分是在linux系统上操作的，windows上可以对照修改一下。**注意其中要安装两个分词插件。**\n\n### 数据库\n\n1. 除了 category 表是固有数据，其他表我是没有提供数据的。\n2. 由于没有初始数据，注册一个新用户后，修改 `user表` 的 `role` 属性为 1 或者 2 ，该用户就是管理员了，方能登录管理员端。\n3. 除了第二点以外，其他情况尽量不要直接修改数据库，防止 MySQL 和 Redis 和 ES 数据不一致出问题。\n\n### 后端\n\n1. 项目使用 `阿里云OSS` 存储视频，请自行准备，当然代码也有提供上传本地的方法（已注掉），但是没有写怎么观看视频，要是不嫌麻烦可以自行补写，不过本地视频的话，前端要通过读数据流播放可能非常困难，因此，本人还是建议开通一个阿里云对象存储，省时省力，而且也不贵。\n2. 项目使用的 `ElasticSearch` 版本为 `7.17.16`，如果使用其他版本，请更改 `pom.xml` 内对应的 `version` 。ES的索引创建，可以运行测试类 `ApplicationTests` 中的 `createIndex` 方法自动创建。\n3. 项目使用 `application.yml` 文件作为启动配置，因此不要在 `application.properties` 中写东西，或者你把配置信息全部写到pro也行。把 resources 中的 `application` 文件加上后缀 `.yml` 即可，需要根据自己服务器信息填写好其中带 `***` 号的配置信息。**注意个人信息泄露风险！！！**\n4. 注意Netty服务占用**7071**端口，如果需要更换，请在 `IMServer` 类中设置。\n\n准备好以上说的后，就可以启动项目了：\n\n```bash\n1、下载Maven依赖\n\n2、启动BackendApplication\n```\n\n### 前端\n\n1. 轮播图是在 `carousel.json` 写死的，可以改成你自己的，目前轮播的是我OSS上的资源，我只开了 localhost:8787 的白名单，所以如果服务端口改成其他会出现图片加载失败的情况。\n2. 一些图标库可以在阿里巴巴矢量图标库上找，因为现在用的是我创建的图标库，指不定哪天我改几下，旧的图标就用不了了。\n3. 注意代理端口号和后端匹配，在 `vue.config.js` 和 `.env.development` 中修改。\n\n剩下没什么好注意的，启动就完事了：\n\n```bash\n1、下载依赖\nnpm install\n\n2、启动项目\nnpm run serve\n```\n\n### ==**最后注意一下版权问题**==\n\n\n\n## 界面展示\n\n### 网站首页\n\n![image-20240415162456125](README.assets\u002Fimage-20240415162456125.png)\n\n### 创作中心\n\n![image-20240415165805944](README.assets\u002Fimage-20240415165805944.png)\n\n![image-20240415170725088](README.assets\u002Fimage-20240415170725088.png)\n\n![image-20240415170948347](README.assets\u002Fimage-20240415170948347.png)\n\n### 视频审核\n\n![image-20240415171701224](README.assets\u002Fimage-20240415171701224.png)\n\n![image-20240415171759941](README.assets\u002Fimage-20240415171759941.png)\n\n### 视频详情页\n\n![image-20240415173743314](README.assets\u002Fimage-20240415173743314.png)\n\n![image-20240415174054777](README.assets\u002Fimage-20240415174054777.png)\n\n### 搜索页面\n\n![image-20240415174815293](README.assets\u002Fimage-20240415174815293.png)\n\n![image-20240415175047210](README.assets\u002Fimage-20240415175047210.png)\n\n![image-20240415174616748](README.assets\u002Fimage-20240415174616748.png)\n\n![image-20240415174842325](README.assets\u002Fimage-20240415174842325.png)\n\n![image-20240415175335504](README.assets\u002Fimage-20240415175335504.png)\n\n![image-20240415175456058](README.assets\u002Fimage-20240415175456058.png)\n\n### 个人中心\n\n![image-20240415175625450](README.assets\u002Fimage-20240415175625450.png)\n\n![image-20240415175654208](README.assets\u002Fimage-20240415175654208.png)\n\n![image-20240415175708364](README.assets\u002Fimage-20240415175708364.png)\n\n### 消息中心\n\n![image-20240415180214595](README.assets\u002Fimage-20240415180214595.png)","Teriteri-client 是一个基于 Vue3 搭建的仿 B 站视频网站平台客户端。该项目实现了包括首页视频推荐、用户注册登录、个人中心信息修改、视频投稿与审核、内容搜索以及视频详情页（含观看、点赞、收藏、弹幕和评论）等功能，采用前后端分离模式开发，前端使用了 Vue3 全家桶、Element-Plus 和 Axios 等技术栈。适用于需要构建具有丰富互动功能的在线视频社区场景，如教育平台、兴趣小组或任何希望拥有类似B站体验的项目。",2,"2026-06-11 03:20:47","top_language"]