# Personal_Blog_Website

**Repository Path**: M1ch/personal_blog_website

## Basic Information

- **Project Name**: Personal_Blog_Website
- **Description**: 起因是为了复习以前的知识,简单做了一个人博客系统,已经部署在服务器上面 http://47.108.157.214/,欢迎访问
- **Primary Language**: Java
- **License**: Artistic-2.0
- **Default Branch**: master
- **Homepage**: http://47.108.157.214/
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-03-18
- **Last Updated**: 2026-05-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Personal Blog Website

[English](README.md) | [中文说明](#中文说明)

## Introduction

A fully functional personal blog system built with a frontend-backend separation architecture. The backend is developed using Spring Boot, while the frontend consists of three independent Vue 3 applications serving different purposes. The system has been deployed and is running on Alibaba Cloud servers.

## Tech Stack

### Backend
- **Framework**: Spring Boot + MyBatis
- **Database**: MySQL
- **Cache**: Redis
- **Authentication**: JWT
- **API Documentation**: Knife4j
- **Object Storage**: Alibaba Cloud OSS
- **Deployment**: Docker + Linux + Nginx

### Frontend
- **Framework**: Vue 3 + Element Plus
- **State Management**: Pinia
- **Build Tool**: Vite
- **Styling**: SCSS

## Project Structure

```
personal_blog_website/
├── src/main/java/com/xixizai/personalblogwebsite/  # Backend (Spring Boot)
│   ├── controller/     # REST API Controllers
│   │   ├── admin/    # Admin Management APIs
│   │   ├── blog/     # Blog Frontend APIs
│   │   ├── home/     # Personal Homepage APIs
│   │   └── common/   # Common APIs
│   ├── service/      # Business Logic
│   ├── mapper/       # MyBatis Mappers
│   ├── pojo/        # Data Objects
│   │   ├── dto/      # Data Transfer Objects
│   │   ├── entity/   # Entity Classes
│   │   ├── result/   # Response Wrappers
│   │   └── vo/       # View Objects
│   ├── exception/   # Custom Exceptions
│   ├── utils/        # Utility Classes
│   └── properties/  # Configuration Properties
├── font/                  # Frontend Applications
│   ├── Frontend-Admin/    # Admin Dashboard
│   ├── Frontend-Blog/    # Blog Frontend
│   └── Frontend-Home/    # Personal Homepage
└── nginx-1.0.15/        # Nginx Configuration
```

## Features

### Blog Management
- Article CRUD operations with Markdown support
- Category and tag management
- Article publish/unpublish control
- Article archive by date
- Article search functionality

### Comment System
- Hierarchical comment structure
- Comment approval workflow
- Markdown support for comments
- Secret (private) comments
- Email notifications

### Visitor Tracking
- Automatic visitor fingerprinting
- Geographic location tracking (via Amap API)
- View statistics and analytics
- Visitor blocking capability

### Media Management
- Music player with playlist
- Image upload to Alibaba Cloud OSS
- File management

### Personal Profile
- Social media links
- Skills showcase
- Experience/portfolio section
- Friend links management

### Admin Dashboard
- Overview statistics (views, visitors, articles, comments, messages)
- Date-based analytics charts
- Province distribution visualization
- Operation logs

## API Documentation

When the backend is running, access the API documentation at:
```
http://localhost:8080/doc.html
```

## Environment Configuration

The application requires the following environment variables or configuration files:

### security.env (Backend)
```properties
# JWT Configuration
xixi.jwt.secret-key=your-secret-key
xixi.jwt.ttl=your-ttl

# Alibaba Cloud OSS
xixi.alioss.endpoint=your-endpoint
xixi.alioss.access-key-id=your-access-key-id
xixi.alioss.access-key-secret=your-access-key-secret
xixi.alioss.bucket-name=your-bucket-name

# Email Configuration
xixi.email.personal=your-name
xixi.email.from=your-email

# Amap API
amap.api.key=your-amap-key
```

### application.yaml
Database, Redis, and other framework configurations.

## Deployment

### Backend (Docker)
```bash
docker build -t personal-blog-backend .
docker run -d -p 8080:8080 --env-file security.env personal-blog-backend
```

### Frontend
Build each frontend application and configure Nginx to serve them.

### Nginx
The project includes an Nginx configuration for reverse proxy and static file serving.

## License

This project is for personal use. All rights reserved.

---

## 中文说明

这是一个功能完善的个人博客系统，采用前后端分离架构开发。后端使用Spring Boot，前端包含三个独立的Vue 3应用（管理后台、博客前台、个人主页）。系统已部署在阿里云服务器上运行。

## 技术栈

### 后端
- 框架：Spring Boot + MyBatis
- 数据库：MySQL
- 缓存：Redis
- 认证：JWT
- API文档：Knife4j
- 对象存储：阿里云OSS
- 部署：Docker + Linux + Nginx

### 前端
- 框架：Vue 3 + Element Plus
- 状态管理：Pinia
- 构建工具：Vite
- 样式：SCSS

## 主要功能

- 文章管理（Markdown支持）
- 评论系统（层级评论、审核机制）
- 访客追踪与统计
- 音乐播放器
- 个人主页展示
- 管理后台仪表盘

## 快速开始

1. 配置数据库和Redis
2. 配置阿里云OSS和Amap API密钥
3. 构建并运行后端
4. 构建前端应用并配置Nginx

## 许可证

本项目仅供个人使用，保留所有权利。