# CIZZY

## 前言
随着移动互联网和智能手机的普及，短视频应用成为了一种越来越受欢迎的在线娱乐方式。短视频应用可以让用户在短时间内快速浏览和分享有趣的视频内容，也可以让用户通过上传自己的视频来展示自己的才华和创意。本项目的目标是基于七牛云存储和七牛视频相关产品，开发一款高效、稳定、易用的Web端短视频应用，为用户提供更好的视频浏览和管理体验。

## demo视频
demo视频链接：[http://s36ds48k7.hn-bkt.clouddn.com/demo](http://s36ds48k7.hn-bkt.clouddn.com/demo)

## 项目分工

CIZZY-王腾新:
后端所有模块的调试与开发，微服务组件的配置

CIZZY-杨登辉：
前端UI设计、代码实现编写、数据对接、接口测试；
后端用户模块登录、注册、注销、退出设计编写；
共同搭建维护开发环境；

CIZZY-杨金龙:
日志AOP开发，文档编写，开发维护，模块设计

## 运行程序的说明
### 前端运行步骤

在源码运行该项目前请确保你的环境已安装好` NodeJS`、`Vue-Cli`

一、进入 `CIZZY/CIZZY` 目录

二、在与 `package.json` 同级目录下运行 `npm i` 下载项目依赖

三、运行 `npm dev run` 浏览器显示

四、项目打包

在项目打包前、请配置好相关的初始化信息

```
npm init
```
```
npm run build

```

### 参数配置

```
参数配置

application.yml:
	port 端口号
	spring.datasource sql数据库链接
	spring.cloud.nacos nacos配置地址
	spring.cloud.sentinel sentinel配置地址
	spring.cloud.zipkin zipkin配置地址
	spring.data.redis redis地址
	seata seata配置

video-server:
	config:
		QINIU_PRE: 七牛云空间前缀
		ACCESS_KEY, SECRET_KEY, BUCKET: 七牛云用户隐私密钥
		VIDEO_UPLOAD_PATH: 服务器文件缓存路径
```
### 打包项目文件
IDEA 打包 IDEA配置maven版本3.8.8，JDK版本17，点击运行主类，在target目录下生成*-server-0.0.1-SNAPSHOT.jar即为可执行文件

在使用IDEA进行打包前，请确保已经配置了Maven版本3.8.8和JDK版本17。接下来，点击运行主类，在target目录下会生成一个名为*-server-0.0.1-SNAPSHOT.jar的可执行文件。

在运行每个模块的JAR包之前，请确保已正确配置和启动了以下服务器：Nacos、Sentinel、Seata、Zipkin和Prometheus。
Nacos：确保Nacos已成功安装和启动。可以访问Nacos控制台以及相关API来管理和配置你的服务。
Sentinel：确保Sentinel已成功安装和启动。你可以使用Sentinel控制台来配置和管理流控规则，并监控你的应用程序的运行情况。
Seata：确保Seata已成功安装和启动。你需要配置Seata的相关数据库和事务管理器，以便让它能够正确地管理你的分布式事务。
Zipkin：确保Zipkin已成功安装和启动。你可以通过访问Zipkin的Web界面来跟踪和分析你的分布式系统的请求链路。
Prometheus：确保Prometheus已成功安装和启动。你可以配置Prometheus来收集和监控你的应用程序的度量指标，并通过Prometheus的Web界面来查看这些指标。
在确保这些服务器都正确配置和启动后，你可以按照你的应用程序的需要来启动各个模块的JAR包。确保每个模块能够正确连接和使用上述服务器，以便实现你的应用程序的功能和监控需求。

### 运行后端项目
在运行每个模块的JAR包之前，请确保已正确配置和启动了以下服务器：Nacos、Sentinel、Seata、Zipkin和Prometheus。
- Nacos：确保Nacos已成功安装和启动。可以访问Nacos控制台以及相关API来管理和配置你的服务。
- Sentinel：确保Sentinel已成功安装和启动。你可以使用Sentinel控制台来配置和管理流控规则，并监控你的应用程序的运行情况。
- Seata：确保Seata已成功安装和启动。你需要配置Seata的相关数据库和事务管理器，以便让它能够正确地管理你的分布式事务。
- Zipkin：确保Zipkin已成功安装和启动。你可以通过访问Zipkin的Web界面来跟踪和分析你的分布式系统的请求链路。
- Prometheus：确保Prometheus已成功安装和启动。你可以配置Prometheus来收集和监控你的应用程序的度量指标，并通过Prometheus的Web界面来查看这些指标。

在确保这些服务器都正确配置和启动后，你可以按照你的应用程序的需要来启动各个模块的JAR包。确保每个模块能够正确连接和使用上述服务器，以便实现你的应用程序的功能和监控需求。
运行成功以上依赖组件后运行jar包即可。

## 项目介绍
本项目是一款基于Web端的短视频应用，使用七牛云存储和七牛视频相关产品（如视频截帧等）来实现视频的存储、播放和管理等功能。本项目使用Spring Cloud Alibaba框架来实现应用程序的微服务化，提供整套公共微服务服务模块：用户服务、视频服务、关注服务、喜欢服务、评论服务、网关服务、配置中心、日志分析、任务和通知等，支持服务治理、监控和追踪。并通过使用Nacos、Sentinel、Gateway等组件来实现应用程序的各项功能。
该应用的基础功能包括视频播放、内容分类和视频切换等，高级功能包括账户系统、点赞、分享、关注和搜索等。账户系统将使用Spring Security实现用户认证和授权，收藏视频将使用Mysql实现数据持久化。点赞、分享、关注和搜索等功能将使用Spring Cloud Alibaba中的各项组件来实现，如Nacos作为服务注册与发现中心，Sentinel作为流量控制和熔断降级的工具，Gateway作为网关服务，Security作为安全认证组件。
本项目注重界面设计和用户体验，为用户提供更好的视频浏览和管理体验。同时，本项目还注重应用程序的可扩展性和可维护性，使用Spring Cloud Alibaba框架来实现应用程序的微服务化，为后续的功能扩展和维护提供更好的支持。

### 组织结构

### 技术选型

#### 后端技术:
技术 | 名称 | 官网
----|------|----
Spring Boot | 框架  | [https://spring.io/projects/spring-boot](https://spring.io/projects/spring-boot)
SpringMVC | MVC框架  | [http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/#mvc](http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/#mvc)
Spring Cloud Alibaba | 微服务框架  | [https://spring.io/projects/spring-cloud-alibaba](https://spring.io/projects/spring-cloud-alibaba)
MyBatis-Plus | ORM框架  | [https://mybatis.plus/](https://mybatis.plus/)
MyBatis | ORM框架  | [http://www.mybatis.org/mybatis-3/zh/index.html](http://www.mybatis.org/mybatis-3/zh/index.html)
MyBatis Generator | 自动代码生成  | [http://www.mybatis.org/generator/index.html](http://www.mybatis.org/generator/index.html)
Redis | 分布式缓存数据库  | [https://redis.io/](https://redis.io/)
Mysql | 关系型数据库 | [https://www.mysql.com/](https://www.mysql.com/)
QiniuyunOS | 对象云存储  | [http://www.qiniu.com/](http://www.qiniu.com/) 
Nacos | 服务发现、配置管理  | [https://nacos.io/](https://nacos.io/)
Sentinel | 流量控制框架  | [https://github.com/alibaba/Sentinel](https://github.com/alibaba/Sentinel)
OpenFeign | 远程服务调用  | [https://spring.io/projects/spring-cloud-openfeign](https://spring.io/projects/spring-cloud-openfeign) 
Spring Cloud Gateway | 服务网关 | [https://spring.io/projects/spring-cloud-gateway](https://spring.io/projects/spring-cloud-gateway)
Seata | 分布式事务  | [https://seata.io/](https://seata.io/)
Redisson | 服务框架  | [https://redisson.org/](https://redisson.org/)
Zipkin | 链路追踪  | [https://zipkin.io/](https://zipkin.io/)
Prometheus | 监控告警系统 | [https://prometheus.io/docs/introduction/overview/](https://prometheus.io/docs/introduction/overview/)
Grafana | 查询、可视化、警报观测平台 | [https://grafana.com/zh-cn/grafana/](https://grafana.com/zh-cn/grafana/)
Micrometer | Spring3 性能监测数据收集 | [https://micrometer.io](https://micrometer.io)
Log4J | 日志组件  | [http://logging.apache.org/log4j/1.2/](http://logging.apache.org/log4j/1.2/)
Lombok | Java库 | [https://projectlombok.org/](https://projectlombok.org/)
Fastjson | JSON解析库  | [https://github.com/alibaba/fastjson](https://github.com/alibaba/fastjson)
OkHttp | HTTP客户端库  | [https://square.github.io/okhttp/](https://square.github.io/okhttp/) 
Gson | 序列化库  | [https://github.com/google/gson](https://github.com/google/gson)
Maven | 项目构建管理  | [http://maven.apache.org/](http://maven.apache.org/)
Netty-socketio | 实时推送  | [https://github.com/mrniko/netty-socketio](https://github.com/mrniko/netty-socketio)
Swagger2 | 接口测试框架  | [http://swagger.io/](http://swagger.io/)
Hutool | 分布式高效ID生产  | [https://www.hutool.cn/](https://www.hutool.cn/)
Jenkins | 持续集成工具  | [https://jenkins.io/index.html](https://jenkins.io/index.html)
Netty-socketio | 实时推送  | [https://github.com/mrniko/netty-socketio](https://github.com/mrniko/netty-socketio)
PageHelper | MyBatis物理分页插件  | [http://git.oschina.net/free/Mybatis_PageHelper](http://git.oschina.net/free/Mybatis_PageHelper)

#### 前端技术:
技术 | 名称 | 官网
----|------|----
Vue 3 | JavaScript框架  | [https://v3.vuejs.org/](https://v3.vuejs.org/)
Vite | 构建工具  | [https://vitejs.dev/](https://vitejs.dev/)
Vue Router 4 | 路由管理器  | [https://router.vuejs.org/](https://router.vuejs.org/)
Axios| HTTP客户端  | [https://axios-http.com/](https://axios-http.com/)
Pinia | 状态管理库  | [https://pinia.esm.dev/](https://pinia.esm.dev/)
Lodash | 实用工具库  | [https://lodash.com/](https://lodash.com/)
qs | JavaScript库  | [https://github.com/ljharb/qs](https://github.com/ljharb/qs)
Masonry | 流式网格布局库  | [https://masonry.desandro.com/](https://masonry.desandro.com/)
NProgress | 进度条库  | [http://ricostacruz.com/nprogress/](http://ricostacruz.com/nprogress/)
XGPlayer | 视频播放器  | [https://h5player.bytedance.com/](https://h5player.bytedance.com/)
Element Plus | UI组件库  | [https://element-plus.org/](https://element-plus.org/)
Tailwind CSS | CSS框架  | [https://tailwindcss.com/](https://tailwindcss.com/)
Sass | CSS预处理器  | [https://sass-lang.com/](https://sass-lang.com/)
mitt | 发布/订阅库  | [https://github.com/developit/mitt](https://github.com/developit/mitt)

#### 架构图
![输入图片说明](cizzy%E6%9E%B6%E6%9E%84%E5%9B%BE.jpg)

#### 模块介绍

> user-server

用户服务是整个系统的核心服务之一，主要负责用户的注册、登录、认证和授权等功能。用户服务使用Spring Boot和Spring Cloud Alibaba来构建，使用Spring Security来实现用户认证和授权，使用Redis来缓存用户数据，提高性能。

- 注册：用户可以通过提供必要的信息进行注册，包括用户名、密码、邮箱等。
- 登录：已注册用户可以使用用户名和密码进行登录，以获取访问权限。
- 认证和授权：用户服务负责对用户进行身份认证，并根据用户角色和权限授予相应的访问权限。
- 用户信息管理：用户可以查看和编辑个人信息，如头像、昵称、个人简介等。

> video-server

视频服务是整个系统的另一个核心服务，主要负责视频的存储、处理和管理等功能。视频服务使用了七牛云存储来存储视频文件，使用了七牛云的视频处理服务来实现视频截帧等功能，使用Spring Boot和Spring Cloud Alibaba来构建。

- 视频上传：用户可以将自己的视频上传到系统中，以供其他用户观看。
- 视频播放：用户可以观看系统中的视频，包括播放、暂停、进度条拖拽等功能。
- 视频分类：系统可以根据视频的内容对其进行分类，方便用户浏览和搜索。
- 视频推荐：系统可以根据用户的兴趣和观看历史，推荐相关的视频给用户。

> relation-server

- 关注用户：用户可以关注其他用户，以便获取其发布的新视频和动态。
- 取消关注：用户可以取消对其他用户的关注。
- 关注列表：用户可以查看自己关注的用户列表，方便快速访问其发布的内容。
- 粉丝列表：用户可以查看自己的粉丝

> favorite-server

- 喜欢视频：用户可以对喜欢的视频进行点赞或添加到自己的喜欢列表中。
- 取消喜欢：用户可以取消对视频的喜欢。
- 喜欢列表：用户可以查看自己喜欢的视频列表，方便快速访问。

> comment-server

- 发表评论：用户可以对视频进行评论，表达自己的观点和想法。
- 回复评论：用户可以对其他用户的评论进行回复，进行交流和讨论。
- 删除评论：用户可以删除自己发布的评论。
- 评论管理：管理员可以对评论进行管理，包括审核、删除、编辑等操作。

> qiniuyun-oss

视频存储系统方案：

- **七牛云**
- 本地分布式存储

![输入图片说明](%E4%BA%91%E5%AD%98%E5%82%A8.jpg)

> api-gateway

服务网关是整个系统的入口服务，主要负责请求的路由和转发等功能。服务网关，使用Spring Cloud Gateway来实现服务网关。对外暴露统一规范的接口和包装响应结果，包括各个子系统的交互接口、对外开放接口、开发加密接口、接口文档等服务，可在该模块支持验签、鉴权、路由、限流、监控、容错、日志等功能，提高系统的安全性和稳定性。使用Spring Cloud Alibaba的Nacos来进行服务注册和发现。

### 预览图
# 前端项目展示：

##

> ## PC 端运行展示：
![输入图片说明](image-20231107231417747.png)

![输入图片说明](image-20231107231748040.png)

![输入图片说明](image-20231107232101024.png)
![输入图片说明](image-20231107232130310.png)

![输入图片说明](image-20231107232301221.png)

![输入图片说明](image-20231107232350820.png)
![输入图片说明](image-20231107232453560.png)

# 低分辨率适配（手机）

## 一、主页

## 二、默认页

### 评论区展开

## 三、个人主页

## 四、登录页

![输入图片说明](image-20231107232648187.png)

![输入图片说明](image-20231107233019087.png)

![输入图片说明](image-20231107233131568.png)

![输入图片说明](image-20231107233642119.png)

![输入图片说明](image-20231107233530705.png)
![输入图片说明](image-20231107233308119.png)

## 一、默认页采取视频中心化布局，评论区右侧展开

### 对数据进行优化处理（展示）

## 二、主页采取瀑布流布局、滚动加载、懒加载

### 评论区展开以及个人菜单

## 三、未登录个人页面

## 四、登录、注册页

## 五、登录后个人主页

## 六、粉丝列表等信息弹窗显示

# 低分辨率适配（手机）

## 一、主页

## 二、默认页

### 评论区展开

## 三、个人主页

## 四、登录页

#### 开发工具:
- MySql: 数据库
- jetty: 开发服务器
- Tomcat: 应用服务器
- SVN|Git: 版本管理
- Nginx: 反向代理服务器
- IntelliJ IDEA: 开发IDE
- PowerDesigner: 建模工具
- Navicat for MySQL: 数据库客户端

#### 开发环境：
- Jdk17+
- Mysql5.5+
- Redis
- RibbitMQ
- seata
- Nacos

### 资源下载

- JDK17 [https://www.oracle.com/java/technologies/javase-jdk17-downloads.html](https://www.oracle.com/java/technologies/javase-jdk17-downloads.html "JDK17")
- Maven [http://maven.apache.org/download.cgi](http://maven.apache.org/download.cgi "Maven")
- Redis [https://redis.io/download](https://redis.io/download "Redis")
- Elastic Stack [https://www.elastic.co/downloads](https://www.elastic.co/downloads "Elastic Stack")
- Nginx [http://nginx.org/en/download.html](http://nginx.org/en/download.html "Nginx")
- Jenkins [http://updates.jenkins-ci.org/download/war/](http://updates.jenkins-ci.org/download/war/ "Jenkins")

## 开发指南:

- 1、本机安装Jdk17、Mysql、Redis、Nacos并**启动相关服务**，使用默认配置默认端口即可
- 2、克隆源代码到本地并打开，**推荐使用IntelliJ IDEA**，本地编译并安装到本地maven仓库

### 数据模型
![输入图片说明](%E6%95%B0%E6%8D%AE%E6%A8%A1%E5%9E%8B.jpg)

## 附件

### 优秀文章和博客

- [Git原理及使用](https://zhuanlan.zhihu.com/p/66506485 "Git原理及使用")

- [创业互联网公司如何搭建自己的技术框架](http://shuzheng5201314.iteye.com/blog/2330151 "创业互联网公司如何搭建自己的技术框架")

- [微服务实战](https://segmentfault.com/a/1190000004634172 "微服务实战")

- [单点登录原理与简单实现](http://shuzheng5201314.iteye.com/blog/2343910 "单点登录原理与简单实现")

- [ITeye论坛关于权限控制的讨论](http://www.iteye.com/magazines/82 "ITeye论坛关于权限控制的讨论")

- [RBAC新解：基于资源的权限管理(Resource-Based Access Control)](http://globeeip.iteye.com/blog/1236167 "RBAC新解：基于资源的权限管理(Resource-Based Access Control)")

- [网站架构经验随笔](http://jinnianshilongnian.iteye.com/blog/2289904 "网站架构经验随笔")

- [支付系统架构](http://shuzheng5201314.iteye.com/blog/2355431 "支付系统架构")

- [Spring整合JMS](http://elim.iteye.com/blog/1893038 "Spring整合JMS")

- [跟我学Shiro目录贴](http://jinnianshilongnian.iteye.com/blog/2018398 "跟我学Shiro目录贴")

- [跟我学SpringMVC目录汇总贴](http://jinnianshilongnian.iteye.com/blog/1752171 "跟我学SpringMVC目录汇总贴")

- [跟我学spring3 目录贴](http://jinnianshilongnian.iteye.com/blog/1482071 "跟我学spring3 目录贴")

- [跟我学OpenResty(Nginx+Lua)开发目录贴](http://jinnianshilongnian.iteye.com/blog/2190344 "跟我学OpenResty(Nginx+Lua)开发目录贴")

- [Redis中文网](http://www.redis.net.cn/ "Redis中文网")

- [读懂Redis并配置主从集群及高可用部署](http://mp.weixin.qq.com/s?__biz=MzIxNTYzOTQ0Ng==&mid=2247483668&idx=1&sn=cd31574877d38cf7ff9c047b86c9bf23&chksm=979475eda0e3fcfb6b5006bcd19c5a838eca9e369252847dbdf97820bf418201dd75c1dadda3&mpshare=1&scene=23&srcid=0117KUiiITwi2ETRan16xRVg#rd "读懂Redis并配置主从集群及高可用部署")

- [Redis哨兵-实现Redis高可用](http://redis.majunwei.com/topics/sentinel.html "Redis哨兵-实现Redis高可用")

- [ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台](http://www.open-open.com/lib/view/open1451801542042.html "ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台")

- [Nginx基本功能极速入门](http://xxgblog.com/2015/05/17/nginx-start/ "Nginx基本功能极速入门")

- [mybatis-genarator 自定义插件](https://my.oschina.net/alexgaoyh/blog/702791 "mybatis-genarator 自定义插件")

- [Elasticsearch权威指南（中文版）](https://es.xiaoleilu.com/510_Deployment/20_hardware.html "Elasticsearch权威指南（中文版）")

- [springMVC对简单对象、Set、List、Map的数据绑定和常见问题.](http://blog.csdn.net/z_dendy/article/details/12648641 "springMVC对简单对象、Set、List、Map的数据绑定和常见问题.")

- [如何细粒度地控制你的MyBatis二级缓存](http://blog.csdn.net/luanlouis/article/details/41800511 "如何细粒度地控制你的MyBatis二级缓存")

- [Git 在团队中的最佳实践--如何正确使用Git Flow](hhttps://www.atlassian.com/git/tutorials/comparing-workflows/gitflow-workflow "Git 在团队中的最佳实践--如何正确使用Git Flow")

- [做个男人，做个成熟的男人，做个有城府的男人](http://shuzheng5201314.iteye.com/blog/1387820 "做个男人，做个成熟的男人，做个有城府的男人")

### 在线小工具

- [在线Cron表达式生成器](http://cron.qqe2.com/ "在线Cron表达式生成器")

- [在线工具 - 程序员的工具箱](http://tool.lu/ "在线工具 - 程序员的工具箱")

### 在线文档

- [JDK7英文文档](http://tool.oschina.net/apidocs/apidoc?api=jdk_7u4 "JDK7英文文档")

- [Spring4.x文档](http://spring.oschina.mopaas.com/ "Spring4.x文档")

- [Mybatis3官网](http://www.mybatis.org/mybatis-3/zh/index.html "Mybatis3官网")

- [Dubbo官网](http://dubbo.io/ "Dubbo官网")

- [Nginx中文文档](http://tool.oschina.net/apidocs/apidoc?api=nginx-zh "Nginx中文文档")

- [Freemarker在线手册](http://freemarker.foofun.cn/ "Freemarker在线中文手册")

- [Velocity在线手册](http://velocity.apache.org/engine/devel/developer-guide.html "Velocity在线手册")

- [Bootstrap在线手册](http://www.bootcss.com/ "Bootstrap在线手册")

- [Git官网中文文档](https://git-scm.com/book/zh/v2 "Git官网中文文档")

- [Thymeleaf](http://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html "Thymeleaf")

cpemy/2023七牛云1024创作节

简介

发行版

贡献者

近期动态