Go 全栈博客实战项目 gin-vue-blog

已于 2023-02-12 20:58:57 修改
阅读量2.3k 收藏 41
点赞数 16
分类专栏： Golang 文章标签： vue.js golang gin 博客 实战
于 2023-02-12 20:40:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43734095/article/details/128999339
版权

Go 全栈博客 gin-vue-blog

写在前面

这个项目其实已经写了有一段时间了，一直想发个博客宣传一下，不过由于懒，拖着拖着就拖到现在了。。。现在也懒得写别的了，下面拿该项目的 README.md 来充数了。

博客项目最近没有更新，因为现在在实习。等有空准备对该项目进行 v2 版本的重构。

实习期间接触到了一些 Go 框架的维护与开发，目前有了新的想法，等待实行。。

实习了一段时间还是觉得这个项目的结构 + 代码是十分清晰的，欢迎 Star。

博客介绍

阵、雨的个人博客

在线预览 | 项目介绍 | 技术介绍 | 目录结构 | 环境介绍 | 快速开始 | 总结&鸣谢 | 后续计划 | 更新日志

您的 Star 是我坚持的动力，感谢大家的支持，欢迎提交 Pr 共同改进项目。

Github 地址：https://github.com/szluyu99/gin-vue-blog

Gitee 地址：https://gitee.com/szluyu99/gin-vue-blog

在线预览

博客前台链接：hahacode.cn（已适配移动端）

博客后台链接：hahacode.cn/admin（暂未专门适配移动端）

博客域名已通过备案，且配置 SSL，通过 https 访问

测试账号：test@qq.com，密码：11111，前后台都可用这个账号登录

在线接口文档地址：doc.hahacode.cn

本项目在线接口文档由 Apifox 生成，由于项目架构调整，有些接口待完善和修改

由于一开始不会用，接口文档生成的信息不全（如返回响应、响应示例），后续完善

以下放几张简单的预览图，强烈建议点击上面的预览链接进去体验下：
在这里插入图片描述

前台首页文章列表

后台文章列表

项目介绍

Github 上有很多优秀的前后台框架，本项目也参考了许多开源项目，但是大多项目都比较重量级（并非坏处），如果从学习的角度来看对初学者并不是很友好。本项目在以博客这个业务为主的前提下，提供一个完整的全栈项目代码（前台前端 + 后台前端 + 后端），技术点基本都是最新 + 最火的技术，代码轻量级，注释完善，适合学习。

同时，本项目可用于一键搭建动态博客（参考 快速开始）。

前台：

  • 前台界面设计参考 Hexo 的 Butterfly 设计，美观简洁
  • 响应式布局，适配了移动端
  • 实现点赞，统计用户等功能 (Redis)
  • 评论 + 回复评论功能
  • 留言采用弹幕墙，效果炫酷
  • 文章详情页有文章目录、推荐文章等功能，优化用户体验

后台：

  • 鉴权使用 JWT
  • 权限管理使用 CASBIN，实现基于 RBAC 的权限管理
  • 支持动态权限修改，前端菜单由后端生成（动态路由）
  • 文章编辑使用 Markdown 编辑器
  • 常规后台功能齐全：侧边栏、面包屑、标签栏等
  • 实现记录操作日志功能（GET 不记录）
  • 实现监听在线用户、强制下线功能
  • 文件上传支持七牛云、本地（后续计划支持更多）
  • 对 CRUD 操作封装了通用 Hook

其他：

  • 采用 Restful 风格的 API
  • 前后端分离部署，前端使用 Nginx，后端使用 Docker
  • 代码整洁层次清晰，利于开发者学习
  • 技术点新颖，代码轻量级，适度封装
  • Docker Compose 一键运行，轻松搭建在线博客

技术介绍

这里只写一些主流的通用技术，详细第三方库：前端参考 package.json 文件，后端参考 go.mod 文件

前端技术栈: 使用 pnpm 包管理工具

  • 基于 TypeScript
  • Vue3
  • VueUse: 服务于 Vue Composition API 的工具集
  • Unocss: 原子化 CSS
  • Pinia
  • Vue Router
  • Axios
  • Naive UI
  • …

后端技术栈:

  • Golang
  • Docker
  • Gin
  • GORM
  • Viper: 支持 TOML (默认)、YAML 等常用格式作为配置文件
  • Casbin
  • Zap
  • MySQL
  • Redis
  • Nginx: 部署静态资源 + 反向代理
  • …

其他:

  • 腾讯云人机验证
  • 七牛云对象存储
  • …

目录结构

这里简单列出目录结构，具体可以查看源码

代码仓库目录：

gin-vue-blog
├── gin-blog-admin      -- 博客后台前端
├── gin-blog-front      -- 博客前台前端
├── gin-blog-server     -- 博客后端
├── deploy              -- 部署

项目运行参考：快速开始

后端目录：简略版

gin-blog-server
├── api             -- API
│   ├── front       -- 前台接口
│   └── v1          -- 后台接口
├── dao             -- 数据库操作模块
├── service         -- 服务模块
├── model           -- 数据模型
│   ├── req             -- 请求 VO 模型
│   ├── resp            -- 响应 VO 模型
│   ├── dto             -- 内部传输 DTO 模型
│   └── ...             -- 数据库模型对象 PO 模型
├── routes          -- 路由模块
│   └── middleware      -- 路由中间件
├── utils           -- 工具模块
│   ├── r               -- 响应封装
│   ├── upload          -- 文件上传
│   └── ...
├── routes          -- 路由模块
├── config          -- 配置文件
├── test            -- 测试模块
├── assets          -- 资源文件
├── log             -- 存放日志的目录
├── public          -- 外部访问的静态资源
│   └── uploaded    -- 本地文件上传目录
├── Dockerfile
└── main.go

前端目录：简略版

gin-vue-admin / gin-vue-front 通用目录结构
├── src              
│   ├── api             -- 接口
│   ├── assets          -- 静态资源
│   ├── styles          -- 样式
│   ├── components      -- 组件
│   ├── composables     -- 组合式函数
│   ├── router          -- 路由
│   ├── store           -- 状态管理
│   ├── utils           -- 工具方法
│   ├── views           -- 页面
│   ├── App.vue
│   └── main.ts
├── settings         -- 项目配置
├── build            -- 构建相关的配置
├── public           -- 公共资源, 在打包后会被加到 dist 根目录
├── package.json 
├── package-lock.json
├── index.html
├── tsconfig.json
├── unocss.config.ts -- unocss 配置
└── vite.config.ts   -- vite 配置
├── .env             -- 通用环境变量
├── .env.development -- 开发环境变量
├── .env.production  -- 线上环境变量
├── .gitignore
├── .editorconfig    -- 编辑器配置

部署目录：简略版

deploy
├── build      -- 镜像构建
│   ├── mysql  -- mysql 镜像构建
│   ├── server -- 后端镜像构建 (基于 gin-blog-server 目录)
│   └── web    -- 前端镜像构建 (基于前端项目打包的静态资源)
└── start
    ├── docker-compose.yml    -- 多容器管理
    └── .env                  -- 环境变量
    └── ...

环境介绍

线上环境

服务器：腾讯云 2核 4G Ubuntu 22.04 LTS

对象存储：七牛云

开发环境

开发工具说明
VscodeGolang 后端 + Vue 前端
NavicatMySQL 远程连接工具
Another Redis Desktop ManagerRedis 远程连接工具
MobaXtermLinux 远程工具
Apifox接口调试 + 文档生成
开发环境版本
Golang1.19
MySQL8.x
Redis7.x

VsCode 插件

目前推荐安装插件已经写到 .vscode/extensions.json 中，使用 VsCode 打开项目会推荐安装。

注意，一定要用 VsCode 打开 gin-blog-admin 和 gin-blog-front 这两个前端项目，而不是打开 gin-vue-blog 这个目录！

前端必备插件：

插件作用
VolarVue 官方插件
UnoCSSUnocss 官方插件
Iconify IntelliSenseIconify 提示插件

后端必备插件：

插件作用
GoGolang 官方插件

其他插件：（个人推荐，用于提升开发体验）

名称作用
Better Comments优化代码注释显示效果
TODO Highlight高亮 TODO
Highlight Matching Tag高亮匹配的标签

快速开始

建议下载本项目后，先一键运行起来，查看本项目在本地的运行效果。

需要修改源码的话，参考常规运行，前后端分开运行。

拉取项目前的准备 (Windows)

如果是 Windows 系统，需要先执行以下指令，否则 Docker 构建过程会出 BUG。

或者直接下载 ZIP 而不是通过 git clone 克隆项目。

Linux 和 Mac 不需要进行该操作。

原因是该项目开发时基于 Linux，本项目规范使用 lf 换行符。而 Windows 的 git 在自动拉取项目时会将项目文件中换行符转换为 crlf，经过测试，构建过程会产生 BUG。

# 防止 git 自动将换行符转换为 crlf
git config --global core.autocrlf false

方式一：Docker Compose 一键运行

需要有 Docker 和 Docker Compose 的环境

详细运行文档（包含环境搭建）参考：deploy/README.md

# 拉取项目, 进入根目录
git clone https://github.com/szluyu99/gin-vue-blog 
cd gin-vue-blog

# 进入 docker-compose 目录
cd deploy/start

# 一键运行
docker-compose up -d

本地前台访问 localhost

本地后台访问 localhost/admin

默认用户：

  • 管理员 admin 123456
  • 普通用户 user 123456
  • 测试用户 test 123456

如果运行遇到问题，请查看详细文章 deploy/README.md

方式二：常规运行

自行安装 Golang、Node、MySQL、Redis 环境：

Golang 安装参考 官方文档
Node 安装建议使用 Nvm
MySQL、Redis 建议使用 Docker 运行

需要先运行后端服务，再运行前端项目，因为很多前端配置由后端动态加载（如菜单等）。

拉取项目到本地：

git clone https://github.com/szluyu99/gin-vue-blog.git

后端项目运行：

# 1、进入后端项目根目录 
cd gin-blog-server

# 2、修改项目运行的配置文件，默认加载位于 config/config.toml 

# 3、MySQL 导入 gvb.sql

# 4、启动 Redis 

# 5、运行项目
go mod tidy
go run main.go

数据库中的默认用户：

  • 管理员 admin 123456
  • 普通用户 user 123456
  • 测试用户 test 123456

前端项目运行： 本项目使用 pnpm 进行包管理，建议全局安装 pnpm

npm install -g pnpm

前台前端：

# 1、进入前台前端项目根目录
cd gin-blog-front

# 2、安装依赖
pnpm install

# 3、运行项目
pnpm dev

后台前端：

# 1、进入后台前端项目根目录
cd gin-blog-admin

# 2、安装依赖
pnpm install

# 3、运行项目
pnpm dev

项目部署

很快就来。保证简单。

总结鸣谢

这个项目不管是前端，还是后端，都是花了比较大心血去架构的，并且从技术选型上，都是选择了目前最火 + 最新的技术栈。当然，这也是个人的学习之作，很多知识点都是边学边开发的（例如 Casbin），这个过程中也参考了很多优秀的开源项目，感谢大家的开源让程序员的世界更加美好，这也是开源本项目的目的之一。本项目中仍有很多不足，后续会继续更新。

最后，项目整体代码风格很优秀，注释完善，适合 Golang 后端开发者、前端开发者学习。

鸣谢项目：

需要感谢的绝不止以上这些开源项目，但是一时难以全部列出，后面会慢慢补上。

后续计划

高优先级:

  • 完善图片上传功能, 目前文件上传还没怎么处理 🆗
  • 后台首页重新设计（目前没放什么内容）
  • 前台首页搜索文章（目前使用数据库模糊搜索） 🆗
  • 博客文章导入导出 (.md 文件) 🆗
  • 权限管理中菜单编辑时选择图标（现在只能输入图标字符串） 🆗
  • 后端日志切割
  • 后台修改背景图片，博客配置等 🆗
  • 后端的 IP 地址检测 BUG 待修复 🆗
  • 博客前台适配移动端 🆗
  • 文章详情, 目录锚点跟随 🆗
  • 邮箱注册 + 邮件发送验证码 🆗

后续有空安排上：

  • 黑夜模式
  • 前台收缩侧边信息功能
  • 说说
  • 相册
  • 音乐播放器
  • 鼠标左击特效
  • 看板娘
  • 第三方登录: QQ、微信、Github …
  • 评论时支持选择表情，参考 Valine
  • 单独部署：前后端 + 环境
  • 重写单元测试，目前的单元测试是早期版本，项目架构更改后，无法跑通
  • 前台首页搜索集成 ElasticSearch
  • 国际化?

其他：

  • 写一份好的文档
  • 补全 README.md
  • 完善 Apifox 生成的接口文档
  • 一键部署：使用 docker compose 单机一键部署整个项目（前后端 + 环境） 🆗
萌宅鹿同学
关注
  • 16
    点赞
  • 踩
  • 41
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
Go-基于golang语言开发一个个人博客项目
08-14
基于golang语言开发一个个人博客项目
Gin-Vue-Admin APP Go快速开发框架Gin-Vue-Admin Flutter Gin-Vue-Admin安卓
06-05
Gin-Vue-Admin APP Go快速开发框架Gin-Vue-Admin 强大Go Web Gin开发项目移动端Flutter APP Gin-Vue-Admin Flutter Gin-Vue-Admin平台非常强大，让中小企业、外包项目快速能交付项目，有以下特点 简单易用 开箱即用 更新迅速 GIN-VUE-ADMIN是一个基于vue和gin开发的全栈前后端分离的开发基础平台，拥有jwt鉴权，动态路由，动态菜单，casbin鉴权，表单生成器，代码生成器等功能，提供了多种示例文件，让大家把更多时间专注在业务开发上 为了不断增长的移动化需求，做了一个Gin-Vue-Admin APP ， 由Flutter开发，能快速适应多端的业务，同一套代码多端使用。里面已经组件化，进行移动端的内容展示、CURD非常简化 https://blog.csdn.net/weijia3624/article/details/125131006 1）Flutter开发的代码已有在项目中使用 2）全源代码开放，放心下载
gin-vue-admin_multi_db:将gin-vue-admin改为兼容多种数据库的版本
04-23
| 简体中文 项目文档 : (贡献者: LLemonGreen And Fann) 前端UI框架：element-ui 后台框架：gin 1. 基本介绍 1.1 项目介绍 在线预览 测试用户名：admin 测试密码：123456 Gin-vue-admin是一个基于vue和gin开发的全栈前后端分离的后台管理系统，集成jwt鉴权，动态路由，动态菜单，casbin鉴权，表单生成器，代码生成器等功能，提供多种示例文件，让您把更多时间专注在业务开发上。 1.2 贡献指南 Hi! 首先感谢你使用 gin-vue-admin。 Gin-vue-admin 是一套为后台管理平台准备的一整套前后端分离架构式的开源框架，旨在快速搭建后台管理系统。 Gin-vue-admin 的成长离不开大家的支持，如果你愿意为 gin-vue-admin 贡献代码或提供建议，请阅读以下内容。 1.2.1 Issue
gin-vue-admin
04-22
| 简体中文 | 项目文档 : (贡献者: And ) 前端UI框架：element-ui 后台框架：gin 1. 基本介绍 1.1 项目介绍 在线预览 测试用户名：admin 测试密码：123456 Gin-vue-admin是一个基于vue和gin开发的全栈前后端分离的后台管理系统，集成jwt鉴权，动态路由，动态菜单，casbin鉴权，表单生成器，代码生成器等功能，提供多种示例文件，让您把更多时间专注在业务开发上。 1.2 贡献指南 Hi! 首先感谢你使用 gin-vue-admin。 Gin-vue-admin 是一套为后台管理平台准备的一整套前后端分离架构式的开源框架，旨在快速搭建后台管理系统。 Gin-vue-admin 的成长离不开大家的支持，如果你愿意为 gin-vue-admin 贡献代码或提供建议，请阅读以下内容。 1.2.1 Issue 规范 issue 仅用于
基于Vue3和go-gin的全栈开发博客项目源码+项目说明.zip
12-28
基于Vue3和go-gin的全栈开发博客项目源码+项目说明.zip 【技术栈】 后端 Golang 1.19 Gin 1.8.1 (Web框架) GORM 1.23.8 (ORM) MySQL 8 (数据库) 前端 Vue.js 3 Vite 3.1.0 (构建工具) naive-ui / ionicons5 (UI库 / 图标库) sass (css预处理语言) wangeditor (富文本编辑器) vuedraggable (拖拽库) axios (网络请求库) 【文件目录说明】 ─api // 接口 │ └─v1 ├─config // 配置文件 ├─database // 数据库备份文件（初始化） ├─log // 项目日志 ├─middleware // 中间件 ├─model // 数据模型层 ├─routes │ router.go // 路由入口 ├─utils // 项目公用工具库 │ ├─ask // 预返回状态码 │ ├─errmsg // 接口错误返回处理 │ └─tool // 工具包 └─web // 前端源码
wblog：基于gin + gorm开发的个人博客项目
02-03
博客 初衷 作为一名web开发程序员居然没有自己的博客，都不好意思对外宣称自己的开发web的。以前也有写博客的习惯，但是都是用的现有的博客网站。 技术选型 网址： orm： 数据库： 全文检索： 文件存储： 配置文件 项目结构 -wblog |-conf 配置文件目录 |-controllers 控制器目录 |-helpders 公共方法目录 |-models 数据库访问目录 |-static 静态资源目录 |-css css文件目录 |-images 图片目录 |-js js文件目录 |-libs js类库 |-system 系统配置文件加载目录 |-tests 测试目录 |-vendor 项目依赖其他开源项目目录 |-views 模板文件目录 |-main.go 程序执行入口 去做 系统日志 网站统计 文章，页面访问统计 github登录发表评论 rss 定时备份系统数据 邮箱订阅功能 安装部署 本项目使用govendor管理依赖包
gin-vue-blog自建博客
坚果的博客
09-22 1977
Ginblog（项目已完成，欢迎使用) 地址 重要更新 2021.9.22 完成V0.0.1基本数据展示 介绍 gin+vue 全栈制作一个博客。 这是一个分享全栈制作过程的项目，旨在为有兴趣接触 golang web 开发的朋友分享一些制作经验。 目录结构 ├─ .gitignore │ go.mod // 项目依赖 │ go.sum │ latest_log.log #最新log日志软连接 │ LICENSE │ main.go //主程序 │ README.md │ tree.txt
基于Gin+Vue的博客后台管理系统
weixin_50196917的博客
07-02 270
一款 Go 语言基于Gin、Xorm、Vue、ElementUI、MySQL等框架精心打造的一款模块化、插件化、高性能的前后端分离架构敏捷开发框架，可快速搭建前后端分离后台管理系统，本着简化开发、提升开发效率的初衷，框架自研了一套个性化的组件，实现了可插拔的组件式开发方式，同时为了敏捷快速开发，框架特地集成了代码生成器，完全自主研发了自定义GO后端服务模板和前端Vue自定义模板，可以根据已建好的表结构，可以快速的一键生成整个模块的所有代码和增删改查等等功能业务，真正实现了低代码开发方式，极大的节省了人力成本
golang入门项目——Gin框架简易博客系统1.0
qq_43716830的博客
04-28 1487
开发前的准备 因为需要继承gorm，所以应该首先要拉取gormx相关包 go get -u gorm.io/gorm go get -u gorm.io/driver/mysql
数据结构之Go实现栈
qq_46457076的博客
03-28 505
关于使用Go语言实现数据结构之栈的基本操作！
全栈开发博客项目,前端vue3,后端go-gin.zip
12-24
go语言开发项目go语言开发项目go语言开发项目go语言开发项目go语言开发项目 go语言开发项目go语言开发项目go语言开发项目go语言开发项目go语言开发项目 go语言开发项目go语言开发项目go语言开发项目go语言开发项目go...
基于Vue3和go-gin的全栈开发博客项目-源码
10-02
基于Vue3和go-gin的全栈开发博客项目_源码
go-blog：Golang + gin + vue + MySQL博客
02-04
博客地址： ： 我花了一些时间独自... ★定期备份数据和静态资源★备份数据邮件发送到邮箱技术要点：主要代码是golang + vue + HTML + CSS + MySQL 后端代码是基于golang gin框架的自包含软件包。 后台代码基于vue的i
go-gin-vue-demo
03-22
去杜松子酒启动git clone [email protected]:curder/go-gin-vue-demo.gitcd go-gin-vue-demo && yarn install开发cp .env.development .env.development.local修改文件里的预设提供的api请求地址yarn serve编译yarn ...
gin-vue-admin-基于gin+vue搭建的后台管理系统框架
11-19
基于gin+vue搭建的后台管理系统框架，集成jwt鉴权，权限管理，动态路由，分页封装，多点登录拦截，资源权限，上传下载，代码生成器，表单生成器，通用工作流等基础功能，五分钟一套CURD前后端代码，目前已支持VUE3，...
Go-Vue-Shop:基于gin+vue+element搭建的商城管理系统，欢迎PR
05-02
基于Gin和Vue实现的前后端分离的电商系统 项目结构 shop-deploy 项目 Docker 环境 shop-page-admin 管理后台 shop-page-app 移动端界面（基于uni-app） shop-page-pc PC端页面 shop-page-admin 后端界面 shop-...
gin-throttle:gin-throttle是Gin框架的速率限制器
05-19
用法下载并安装： go get github.com/gin-gonic/gin将其导入您的代码中： import "github.com/s12i/gin-throttle"例子 package mainimport ("github.com/gin-gonic/gin""github.com/s12i/gin-throttle")func main ()...
一个简单得实习管理系统，采用GO-GIN-VUE进行全栈开发.zip
12-24
go语言开发项目go语言开发项目go语言开发项目go语言开发项目go语言开发项目 go语言开发项目go语言开发项目go语言开发项目go语言开发项目go语言开发项目 go语言开发项目go语言开发项目go语言开发项目go语言开发项目go...
opsadmin 是一个基于Gin-vue-admin开发的全栈前后端分离的后台管理系统.zip
最新发布
01-17
opsadmin 是一个基于Gin-vue-admin开发的全栈前后端分离的后台管理系统，主要用于静态文件项目（php, html, nodejs），项目提测，发布，快速更新迭代升级 软件开发设计：应用软件开发、系统软件开发、移动应用开发、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萌宅鹿同学

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值