基于Go和Vue快速开发的博客系统-快速上手Gin框架

文章目录

MyBlog
- [🏗️ 架构说明](#🏗️ 架构说明)
- [🛠 技术栈](#🛠 技术栈)
- [✨ 功能特性](#✨ 功能特性)
- [📂 目录结构](#📂 目录结构)
- [🚀 快速开始](#🚀 快速开始)
- - [方式一：Docker 部署（推荐）](#方式一：Docker 部署（推荐）)
  - - [1. 准备配置文件](#1. 准备配置文件)
    - [2. 构建和运行](#2. 构建和运行)
  - 方式二：本地开发
  - - [1. 环境准备](#1. 环境准备)
  - [2. 后端配置与启动](#2. 后端配置与启动)
  - [3. 前端配置与启动](#3. 前端配置与启动)
- [📝 使用指南](#📝 使用指南)

MyBlog

一个基于 Go (Gin) 和 Vue 3 的轻量级 Markdown 博客系统，支持腾讯云 COS 图片存储。

网站地址：xizhenhua.top

GIthub地址：https://github.com/xzhHas/myblog-go

🏗️ 架构说明

本项目采用 前后端分离架构，打包在单个 Docker 镜像中：

前端服务: Nginx (端口 80) - 提供静态资源和路由
后端服务: Go - 提供 RESTful API
反向代理 : Nginx 自动将 /api/* 请求代理到后端

优势:

✅ 前后端独立运行，互不干扰
✅ 只需暴露一个端口 (80)，简化部署
✅ Nginx 提供静态资源缓存和 Gzip 压缩
✅ 支持单独更新前端或后端

🛠 技术栈

后端 (Backend)

语言: Go
Web 框架 : Gin
ORM : Gorm
数据库: MySQL
对象存储: 腾讯云 COS (用于图片存储)

前端 (Frontend)

框架: Vue 3
构建工具: Vite
UI 组件库 : Element Plus
Markdown 编辑器 : md-editor-v3
路由: Vue Router

部署

Web 服务器: Nginx (Alpine)
容器化: Docker
架构: 前后端分离，单镜像部署

✨ 功能特性

文章浏览
- 左右分栏布局：左侧为文章目录列表，右侧为文章内容展示。
- Markdown 实时渲染，支持代码高亮、表格等丰富格式。
内容管理 (CMS)
- 登录认证：简单的管理员账号认证机制，保护发布权限。
- 在线编辑：集成全功能 Markdown 编辑器，支持实时预览。
- 文章发布：创建新的博客文章。
- 文章编辑：支持对已发布的文章进行修改。
- 文章删除：支持删除不需要的文章。
图片存储
- 自动上传：在编辑器中粘贴或选择图片，自动上传至腾讯云对象存储 (COS)。
- CDN 加速：图片通过 COS 链接直接访问，减轻服务器压力。

📂 目录结构

复制代码

.
├── main.go             # 后端入口（Gin 路由、API、数据库）
├── go.mod              # Go 依赖管理
├── config.yaml         # 配置文件（数据库、COS等）
├── Dockerfile          # Docker 镜像构建文件
├── Makefile            # 构建脚本
├── nginx.conf          # Nginx 配置（反向代理）
├── start.sh            # 容器启动脚本
├── DEPLOY.md           # 部署文档
├── build/              # 构建产物目录
│   ├── app             # 后端二进制文件
│   └── config.yaml     # 复制的配置文件
└── web/                # 前端代码目录
    ├── src/
    │   ├── views/      # 页面组件
    │   │   ├── Layout.vue      # 主布局（侧边栏+内容区）
    │   │   ├── Login.vue       # 登录页面
    │   │   ├── Admin.vue       # 后台管理（文件树）
    │   │   ├── Editor.vue      # Markdown 编辑器
    │   │   └── PostDetail.vue  # 文章详情页
    │   ├── router/     # Vue Router 配置
    │   └── App.vue     # 根组件
    ├── dist/           # 前端构建产物
    ├── package.json    # npm 依赖管理
    └── vite.config.js  # Vite 配置

🚀 快速开始

推荐使用 Docker 部署，简单快捷！如需本地开发，参考下面的开发环境配置。

方式一：Docker 部署（推荐）

1. 准备配置文件

修改 config.yaml：

yaml 复制代码

server:
  port: 8081

database:
  user: root
  password: your_password
  host: your_db_host  # 数据库地址
  port: "3306"
  name: blog_db

admin:
  username: admin
  password: your_password

cos:
  bucket_url: https://your-bucket.cos.region.myqcloud.com
  secret_id: your_secret_id
  secret_key: your_secret_key

2. 构建和运行

bash 复制代码

# 构建前后端和 Docker 镜像
make docker

# 运行容器（映射到 80 端口）
docker run -d \
  --name blog \
  -p 80:80 \
  --restart unless-stopped \
  crpi-3fgegonrg1g8eui3.cn-beijing.personal.cr.aliyuncs.com/blog:0.0.5

详细部署说明请查看 DEPLOY.md

方式二：本地开发

1. 环境准备

Go 1.18+
Node.js 16+
MySQL 5.7/8.0

2. 后端配置与启动

修改 config.yaml 配置文件（参考上面的配置示例）
安装依赖并运行：
bash 复制代码
```
go mod tidy
go run main.go
```
后端服务将在 http://localhost:8081 启动。

3. 前端配置与启动

进入前端目录：
bash 复制代码
```
cd web
```
安装依赖：
bash 复制代码
```
npm install
```
启动开发服务器：
bash 复制代码
```
npm run dev
```
访问终端输出的地址（通常是 http://localhost:5173）即可查看博客。

📝 使用指南

查看博客：直接访问首页，点击左侧列表切换文章。
登录后台 ：
1. 点击左侧侧边栏底部的 Login 按钮。
2. 输入配置的管理员账号和密码。
发布/编辑文章 ：
1. 登录后，侧边栏顶部会出现 New 按钮，点击进入编辑器。
2. 在文章详情页，登录状态下会显示 Edit 和 Delete 按钮。
上传图片：在编辑器工具栏点击图片图标，或直接截图粘贴，图片将自动上传到配置的腾讯云 COS。