Skip to content
/ goblog_web Public

基于golang的gin框架和vue3开发的博客系统 goblog 前端部分，包含md格式的文本编辑展示，点赞评论收藏，新闻热点，匿名聊天室，文章搜索等功能。该项目仅为个人练手，并不完善

www.fixpng.top/
7 stars 5 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

fixpng/goblog_web

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

125 Commits
public
public
 
 
src
src
 
 
.env.dev
.env.dev
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
index.html
index.html
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
vite.config.js
vite.config.js
 
 

Repository files navigation

项目介绍

基于vue3和gin框架开发的前后端分离个人博客系统，包含md格式的文本编辑展示，点赞评论收藏，新闻热点，匿名聊天室，文章搜索等功能。

在线预览

博客前台：http://www.fixpng.top/ 博客后台：http://www.fixpng.top/admin/ API文档： http://www.fixpng.top/swagger/index.html

网站域名已通过ICP备案 后台需要登陆访问，可用测试用户：test / test，也可自行注册账号 页面暂未适配移动端

fa9c145d52a35f9a994478e31e9e86a.png 在这里插入图片描述

技术介绍

前端代码：https://github.com/fixpng/goblog_web 后端代码：https://github.com/fixpng/goblog_server

前端部分是现学现卖的，技术和内容仍有许多不足，后面有时间会慢慢优化完善。

开发环境

开发工具 功能描述
GoLand 后端开发
PyCharm 前端开发
Postman API测试
Docker Desktop 依赖软件运行
MobaXterm Linux 远程工具
开发环境 版本
GoLang 1.19
npm 9.6.2
MySQL 5.7
Elasticsearch 7.12.0
Redis 7.0.8

技术栈

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

功能描述 前端 官方地址
Vue3框架 vuejs https://cn.vuejs.org/
Vue组件 ant-design-vue https://next.antdv.com/docs/vue/introduce-cn/
Mark Down md-editor-v3 https://imzbf.github.io/md-editor-v3/
状态管理工具 pinia https://pinia.vuejs.org/
构建工具 vite https://cn.vitejs.dev/
可视化图表库 echarts https://echarts.apache.org/zh/index.html
功能描述 后端 官方地址
GO语言 golang https://github.com/golang/go
WEB框架 gin https://gin-gonic.com/zh-cn/docs/
API文档 swaggo https://github.com/swaggo
ORM 库 gorm https://github.com/go-gorm/gorm
日志库 logrus https://github.com/sirupsen/logrus

数据库表关系

1

本地运行

自行安装 Golang、Node、MySQL、Redis 、Elasticsearch 环境 Golang 安装参考官方文档 Node 建议安装使用 https://nodejs.org/zh-cn 的长期维护版 MySQL、Redis、Elasticsearch 建议使用 Docker 运行

后端项目运行：

# 1、启动MySQL、Redis、Elasticsearch,其中mysql需要新建一个库
# 2、修改项目运行的配置文件 settings.yaml

# 3、初始化运行环境
go mod tidy 				# 下载当前项目所依赖的包
go run main.go -db 			# mysql建表
go run main.go -es create	# elasticsearch建索引

# 4、mysql插入菜单表数据
INSERT INTO gvb.menu_models (id, created_at, updated_at, title, path, slogan, abstract, abstract_time, banner_time, sort) VALUES (1, NOW(), NOW(), '首页', '/', '众神眷恋的幻想乡', '天寒地冻路远马亡又何妨', 5, 5, 1);
INSERT INTO gvb.menu_models (id, created_at, updated_at, title, path, slogan, abstract, abstract_time, banner_time, sort) VALUES (2, NOW(), NOW(), '新闻', '/news', '新闻三分钟，知晓天下事', '震惊!男人看了会沉默，女人看了会流泪!不转不是中国人!',  5, 5, 2);
INSERT INTO gvb.menu_models (id, created_at, updated_at, title, path, slogan, abstract, abstract_time, banner_time, sort) VALUES (3, NOW(), NOW(), '文章搜索', '/search', '文章搜索', '文章搜索',  5, 5, 3);
INSERT INTO gvb.menu_models (id, created_at, updated_at, title, path, slogan, abstract, abstract_time, banner_time, sort) VALUES (4, NOW(), NOW(),'聊天室', '/chat_group', '聊天室', '聊天室',  5, 5, 4);

# 5、创建第一个用户，后续可在前端创建或注册
go run main.go -u admin		# 管理员
go run main.go -u user		# 普通用户

# 6、启动项目
go run main.go

前端项目运行：

# 下载当前项目所依赖的包
npm i
# 启动项目
npm run dev

线上部署（Linux）| 待完善

本项目线上部署目录结构如下，必需的目录及文件：

gvb									# 项目启动必需的目录及文件
├── deploy							# 该项目依赖的数据库及中间件，均用docker启动
│   ├── docker-compose.yml			# Docker Compose 配置文件
│   ├── .env						# 环境配置文件
│   └── gvb
│       ├── elasticsearch
│       │   ├── config 
│		│	│	└── elasticsearch.yml # Elasticsearch 配置文件
│       │   ├── data
│       │   └── plugins
│       ├── mysql
│       ├── nginx
│       │   ├── conf
│       │   │	└── nginx.conf		# nginx配置文件
│       │   └── html
│       └── redis
├── gvb_server						# 后端代码
│   ├── docs
│   ├── uploads
│   └── main						# go打包文件
└── gvb_web							# 前端代码
    └── dist						# npm打包文件

安装Docker

只需要提前安装好docker运行环境

1.安装 pip：

yum -y install epel-release
yum -y install python-pip
 
#升级
pip install --upgrade pip

2.安装Docker-Compose：

yum install python-devel

pip install --ignore-installed requests

pip install docker-compose
#检查是是否成功：
docker-compose -version

3.安装Docker:

yum provides '*/applydeltarpm'  
yum install deltarpm -y

yum install docker-ce -y

curl -sSL https://get.daocloud.io/docker | sh

依赖软件准备

只需要提前安装好docker运行环境 用 Docker 启动的项目依赖软件：mysql，redis，elasticsearch，nginx 可直接拷贝后端代码中的deploy文件夹自行修改

docker-compose.yml 和 .env 文件放在部署服务器的 deploy 目录下 准备docker-compose.yml文件

version: "1"

networks:
  gvb-network:
    driver: bridge
    ipam:
      config:
        - subnet: ${SUBNET}

services:
  gvb-redis:
    image: redis:7.0.8
    container_name: gvb-redis
    restart: always
    volumes:
      - ${GVB_DATA_DIRECTORY}/redis/data:/data
    ports:
      - ${REDIS_PORT}:6379 # 自定义的是暴露出去的端口, Redis 容器内运行固定为 6379
    command: redis-server --requirepass ${REDIS_PASSWORD} --appendonly yes
    networks:
      gvb-network:
        ipv4_address: ${REDIS_HOST}

  gvb-mysql:
    image: mysql:5.7
    container_name: gvb-mysql
    restart: always
    volumes:
      - ${GVB_DATA_DIRECTORY}/mysql/data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD = ${MYSQL_ROOT_PASSWORD} # root 账号的密码
      - MYSQL_DATABASE = ${MYSQL_DATABASE} # root 账号的密码
      - MYSQL_USER: ${MYSQL_USER}
      - MYSQL_PASSWORD: ${MYSQL_PASSWORD}
      - TZ=Asia/Shanghai
    command:
      --max_connections=1000
      --character-set-server=utf8mb4
      --collation-server=utf8mb4_general_ci
    ports:
      - ${MYSQL_PORT}:3306 # 自定义的是暴露出去的端口, MySQL 容器内运行固定为 3306
    networks:
      gvb-network:
        ipv4_address: ${MYSQL_HOST}
        
  gvb-elasticsearch:
    image: elasticsearch:7.12.0
    container_name: gvb-elasticsearch
    restart: always
    volumes:
      - ${GVB_DATA_DIRECTORY}/elasticsearch/data:/usr/share/elasticsearch/data
      - ${GVB_DATA_DIRECTORY}/elasticsearch/config/elasticsearch.yml:/usr/share/elasticsearch/config/elasticsearch.yml
      - ${GVB_DATA_DIRECTORY}/elasticsearch/plugins:/usr/share/elasticsearch/plugins
    environment:
      - discovery.type=single-node
      - ES_JAVA_OPTS=-Xms84m -Xmx512m
    ports:
      - ${ELASTICSEARCH_PORT01}:9200 # 自定义的是暴露出去的端口, elasticsearch 容器内运行固定为 9200和9300
      - ${ELASTICSEARCH_PORT02}:9300
    networks:
      gvb-network:
        ipv4_address: ${ELASTICSEARCH_HOST}
        
  gvb-nginx:
    image: nginx:latest
    container_name: gvb-nginx
    restart: always
    volumes:
      - ${GVB_DATA_DIRECTORY}/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - ${GVB_DATA_DIRECTORY}/nginx/logs:/var/log/nginx
      - ${NGINX_GVB_WEB}:${NGINX_GVB_WEB} # 前端web目录
      - ${NGINX_GVB_SERVER}:${NGINX_GVB_SERVER} # 后端server目录
    ports:
      - ${NGINX_PORT}:80 # 自定义的是暴露出去的端口, nginx 容器内运行固定为 80
    networks:
      gvb-network:
        ipv4_address: ${NGINX_HOST}

准备 .env 文件（相关参数自行修改）

# https://docs.docker.com/compose/migrate/
# docker-compose.yml 同目录下的 .env 文件会被加载为其环境变量

# COMPOSE_PROJECT_NAME=gin-vue-blog

# 数据存储的文件夹位置 (默认在当前路径生成 gvb 文件夹)
GVB_DATA_DIRECTORY=./gvb

# Redis
REDIS_PORT=6379
REDIS_PASSWORD=12345QWERT

# MySQL
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=12345QWERT
MYSQL_DATABASE=gvb_db
MYSQL_USER=gvb
MYSQL_PASSWORD=12345QWERT

# Elasticsearch
ELASTICSEARCH_PORT01=9200
ELASTICSEARCH_PORT02=9300

# Nginx
NGINX_PORT=80
NGINX_GVB_WEB=../gvb/gvb_web			# 给nginx映射的前端路径，和nginx.conf里路径对应
NGINX_GVB_SERVER=../gvb/gvb_server	# 给nginx映射的后端路径，和nginx.conf里路径对应

# Docker Network (一般不需要变, 除非发生冲突)
SUBNET=172.12.0.0/24
REDIS_HOST=172.12.0.2
MYSQL_HOST=172.12.0.3
ELASTICSEARCH_HOST=172.12.0.4
NGINX_HOST=172.12.0.5

Elasticsearch 配置文件：elasticsearch.yml

http.host: 0.0.0.0

nginx配置文件：nginx.conf

#user  root;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;

events {
	worker_connections  1024;
}

http {
	include       /etc/nginx/mime.types;
	default_type  application/octet-stream;

	log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
					'$status $body_bytes_sent "$http_referer" '
					'"$http_user_agent" "$http_x_forwarded_for"';

	access_log  /var/log/nginx/access.log  main;
	sendfile        on;
	#tcp_nopush     on;

	client_max_body_size 8M; #上传文件大小限制
	keepalive_timeout  65;

	server {
	listen 80;      # http
	#listen 443 ssl; # https
	server_name www.fixpng.top; # 域名

	##填写证书文件名称
	#ssl_certificate cert/server.pem;
	##填写证书私钥文件名称
	#ssl_certificate_key cert/server.key;
	#
    #ssl_session_cache shared:SSL:50m;
	#
	##自定义设置使用的TLS协议的类型以及加密套件（以下为配置示例，请您自行评估是否需要配置）
	##TLS协议版本越高，HTTPS通信的安全性越高，但是相较于低版本TLS协议，高版本TLS协议对浏览器的兼容性较差。
	#ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #ssl_protocols SSLv3 SSLv2 TLSv1 TLSv1.1 TLSv1.2;
	#
	##表示优先使用服务端加密套件。默认开启
	#ssl_prefer_server_ciphers on;

		location / {
			root   /www/wwwroot/gvb/gvb_web/dist/; #访问路径，相当于Tomcat的ROOT，这里自己配
			index  index.html index.htm; #访问index
			try_files $uri $uri/ /index.html; #解决刷新404问题
		}

		location /wsUrl/ {
			rewrite ^/wsUrl/(.*)$ /$1 break;   # 长连接时间
			proxy_pass http://172.12.0.1:8080/api/;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection "Upgrade";
			proxy_redirect off;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Host $server_name;
			proxy_read_timeout 3600s;  # 长连接时间
		}

		location /api/ {
		# rewrite ^/(api/.*) /$1 break;
		proxy_set_header Host $host;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header REMOTE-HOST $remote_addr;
		proxy_pass http://172.12.0.1:8080/api/;
		}

		location /uploads/ {
		# proxy_pass http://172.12.0.1:8080/uploads/;
		alias /www/wwwroot/gvb/gvb_server/uploads/;
		}

		location /swagger/ {
		proxy_pass http://172.12.0.1:8080/swagger/;
		}
    }
}

应用程序准备

后端项目打包生成的main文件、docs文件夹、settings.yaml、uploads文件夹复制至部署服务器的gvb_server目录

# 生成api文档
swag init 

# 后端go打包
set GOARCH=amd64
set GOOS=linux
go build -o main

前端项目打包生成的dist文件夹及其文件复制至部署服务器的gvb_web目录

# 前端npm打包
npm run build

启动应用

修改好各项配置

# docker compose 启动依赖软件
cd xxxxx/gvb/deploy/
docker compose up -d

#启动后端应用
cd xxxxx/gvb/gvb_server/
nohup ./main &

访问应用

TODO

待优化项

  • 配置https访问时聊天室不可用，只能http+ws，后端ws -> wss待优化
  • docker-compose一键启动项目
  • 前台适配移动端

About

基于golang的gin框架和vue3开发的博客系统 goblog 前端部分，包含md格式的文本编辑展示，点赞评论收藏，新闻热点，匿名聊天室，文章搜索等功能。该项目仅为个人练手，并不完善

www.fixpng.top/

Topics

golang gin vue3

Resources

Readme
Activity

Stars

7 stars

Watchers

1 watching

Forks

5 forks
Report repository

Releases

1 tags

Packages

No packages published

Languages