# EndurancerBlog-admin

**Repository Path**: Endurancer_Program/endurancer-blog-admin

## Basic Information

- **Project Name**: EndurancerBlog-admin
- **Description**: 个人博客后端仓库（从0搭建个人博客 原创个人网站 http://endurancerblog.top）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-01-28
- **Last Updated**: 2025-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 一、项目概述
1. **项目名称**：个人博客网
2. **项目类型**：个人内容分享平台
3. **项目地址**：http://endurancerblog.top/
4. **目标用户**：
   - **博主**：负责撰写文章、上传图片、视频等内容，管理评论和互动。
   - **访客**：访问网站阅读文章、观看多媒体内容、留言互动的普通用户。
5. **功能模块**：
   - 用户注册/登录
   - 个人信息管理（包括修改密码）
   - 系统首页（包含推荐文章和个人动态）
   - 文章发布与管理
   - 多媒体内容管理（图片、视频等）
   - 评论管理系统
   - 访客留言与回复
   - 博客主题设置与个性化配置
   - 社交媒体集成
   - 数据统计与分析


### 二、环境搭建
#### 1. 开发工具
- **后端**
  - **IntelliJ IDEA** 或其他支持Java开发的IDE（如Eclipse）：用于编写和调试后端代码。
- **前端**
  - **Visual Studio Code (VS Code)**：轻量级且功能强大的文本编辑器，适合前端开发，提供了丰富的插件支持。
- **数据库设计与管理**
  - **Navicat Premium**：可视化工具，用于设计和管理MySQL数据库，简化数据库操作。

#### 2. 开发环境
- **JDK**
  - **版本要求**：1.8
  - **安装说明**：确保正确安装并配置JAVA_HOME环境变量。
- **Node.js**
  - **版本要求**：16.0+
  - **安装说明**：通过官方提供的安装包进行安装，并确保npm也一并安装。
- **Maven**
  - **版本要求**：3.8+
  - **安装说明**：确保MAVEN_HOME环境变量已设置，并将`bin`目录添加到系统路径中。

#### 3. 数据库环境
- **MySQL**
  - **版本要求**：5.7或8.0
  - **安装说明**：根据操作系统选择合适的MySQL安装包，并完成安装。配置数据库连接参数。
  
#### 4. 第三方中间件及工具
- **Redis**（可选）：用于缓存数据，如会话信息等。
- **Nginx**：作为反向代理服务器，分发请求至不同的后端服务；同时也可以用于负载均衡和静态资源的托管。
- **Git**：版本控制系统，用于代码管理和协作开发。


### 三、项目结构
#### 1. 后端项目结构
- `src/main/java`：存放Java源代码，细分为以下子包：
  - `controller`：RESTful API控制器类，处理HTTP请求。
  - `service`：实现业务逻辑的服务层接口和实现类。
  - `mapper`：定义与数据库交互的持久层接口（MyBatis Mapper）。
  - `entity`：实体类，对应数据库中的表结构。
  - `dto`：数据传输对象，封装API请求和响应的数据。
  - `vo`：视图对象，专门用于前端展示的数据模型。
  - `exception`：自定义异常类及其处理器。
  - `utils`：工具类，提供通用的功能方法。
- `src/main/resources`：存放非Java资源文件，包括但不限于`application.properties`或`application.yml`，MyBatis SQL映射文件等。

#### 2. 前端项目结构
- `src/assets`：存放静态资源，如图片、图标、样式文件（CSS/SCSS）等。
- `src/components`：存放可复用的Vue组件。
- `src/router`：路由配置文件，定义了应用的所有路由规则。
- `src/store`：Vuex状态管理的相关文件。
- `src/views`：页面级组件，每个页面通常对应一个独立的Vue组件。
- `src/api`：与后端交互的API请求相关代码。
- `src/utils`：前端工具类代码。
- `src/App.vue`：应用的根组件。
- `src/main.js`：应用的入口文件。


### 四、项目功能

#### 博主功能
- **文章发布与管理**：支持Markdown语法的撰写，提供天气插件、日历组件、时间进度条等增强用户体验的功能。
- **多媒体内容管理**：多图上传预览功能，支持父组件调用封装的子组件图片上传，x-file-storage文件上传封装，OSS回调签名，实现文件在OSS上的存储。
- **个性化博客主题设置**：动态监听导航栏样式，根据用户滚动位置自动调整。同时提供白天/晚上模式切换动画和实现，满足不同时间段用户的视觉需求。
- **社交媒体集成**：一键分享至各大社交平台，提升文章曝光率。
- **数据统计与分析**：通过ECharts饼图、折线图、柱状图等多种图表形式展示博客的访问量、阅读时长等关键指标。

#### 访客功能
- **注册、登录、个人信息管理**：提供表情包组件丰富互动体验，背景遮罩层增加页面美观度。
- **文章阅读**：Vue3中识别Markdown代码块并实现复制代码功能，支持Markdown文件的直接渲染以及锚点跳转，方便访客快速定位感兴趣的内容。
- **评论系统**：多级评论组件，评论树封装，允许用户进行多层次的交流互动；弹幕墙、时间归档为用户提供独特的留言方式。
- **动态效果**：动态波浪效果动画，逐字显示动画效果，给用户带来生动的浏览体验。

---

### 五、项目创新

#### 1. Markdown支持与代码复制功能
- **创新描述**：在Vue3中识别Markdown代码块，并实现代码复制功能，极大提升了技术类博客的用户体验。
- **技术实现**：使用`marked`库解析Markdown文本，结合Clipboard.js实现代码块的复制功能。此外，通过Vue3的自定义指令或组件方法，在点击按钮时触发复制事件。

#### 2. 动态监听与响应式设计
- **创新描述**：动态监听文章目录位置和缩放，以及导航栏样式的动态变化，为用户提供更加流畅的浏览体验。
- **技术实现**：利用Intersection Observer API监听元素进入视口的情况，结合CSS变量动态调整样式。对于导航栏样式的变化，则可以通过监听窗口滚动事件来实现。

#### 3. 多媒体内容处理与优化
- **创新描述**：提供多图上传预览、父组件调用封装的子组件图片上传等功能，确保用户能够便捷地管理和查看多媒体内容。
- **技术实现**：采用x-file-storage封装文件上传逻辑，结合阿里云OSS服务实现高效稳定的文件存储。前端通过FileReader读取本地图片并实时预览，同时使用Vue3的Composition API简化父子组件间的通信。

#### 4. ECharts可视化与数据分析
- **创新描述**：通过ECharts饼图、折线图、柱状图等多种图表形式直观展示博客的数据统计结果，帮助博主了解读者偏好。
- **技术实现**：引入ECharts库，基于后端提供的统计数据，动态生成相应的图表。可通过Vue3的watcher监听数据变化，实时更新图表内容。

#### 5. 日夜模式切换与动画效果
- **创新描述**：实现日夜模式切换的动画效果，配合背景遮罩层的应用，营造出舒适且个性化的阅读环境。
- **技术实现**：运用CSS变量和JavaScript脚本控制主题颜色的切换，结合CSS动画或GSAP库制作过渡动画。背景遮罩层则通过绝对定位覆盖整个页面，随主题色一同变换透明度和颜色。

#### 6. 社交媒体整合与推广
- **创新描述**：集成了主流社交媒体的一键分享功能，助力博主扩大影响力，提高文章传播效率。
- **技术实现**：利用各社交平台提供的官方API，构建分享接口。当用户点击分享按钮时，后台会构造相应的链接和参数，引导用户完成分享操作。

#### 7. 弹幕墙与时间轴功能
- **创新描述**：弹幕墙让用户可以随时留下自己的想法，而时间轴则以一种新颖的方式展示了博客的历史和发展轨迹。
- **技术实现**：弹幕墙通过WebSocket实现实时消息推送，前端接收并即时显示新留言。时间轴则依据博客发布时间顺序排列，采用CSS Grid布局或Flexbox布局展现清晰的时间脉络。
![输入图片说明](imgs/1742035082569.jpg)
![输入图片说明](imgs/1742035113826.jpg)
![输入图片说明](imgs/1742035136836.jpg)
![输入图片说明](imgs/1742035170803.jpg)
![输入图片说明](imgs/1742035190475.jpg)
![输入图片说明](imgs/1742035237743.jpg)
![输入图片说明](imgs/1742035283727.jpg)
![输入图片说明](imgs/1742035320270.jpg)
![输入图片说明](imgs/1742035358748.jpg)
![输入图片说明](imgs/1742035381002.jpg)
![输入图片说明](imgs/1742035631354.jpg)
![输入图片说明](imgs/1742035857487.jpg)
![输入图片说明](imgs/1742035893806.jpg)
![输入图片说明](imgs/1742035919617.jpg)