基于Golang+Vue3快速搭建的博客系统

news2024/9/28 11:20:27

WANLI 博客系统

项目介绍

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

项目在线访问：http://bloggo.chat/ 或 http://59.110.34.61/

访客账号：test 密码：test
也可以使用邮箱自己注册。

GitHub地址：ginblog-wanli

功能展示

B 站视频

图片展示：
在这里插入图片描述

在这里插入图片描述

技术介绍

开发环境
开发工具功能描述
GoLand后端开发
Vscode前端开发
ApifoxAPI测试
Ubuntu依赖软件运行
xftp、xsheelLinux 远程工具
开发环境版本
GoLang1.22.3
nodejs20.14.0
MySQL8.0
Elasticsearch、kibana、ik7.12.0
Redis7.0.8
技术栈

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

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

本地运行

自行安装 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 insatll
# 启动项目
npm run dev

线上部署（Linux）| 阿里云服务器 | 七牛云存储

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

  gvb
    └─deploy
        └─gvb
            ├─elasticsearch
            │  ├─config
            │  ├─data
            │  └─plugins			
            │  	  └─ik    # 使用ik分词器，下载7.12.0版本，然后解压重命名为ik，上传到linux挂载的plugins目录下
            ├─gvb_server  # 服务端代码，这个不用容器启动 直接 ./main 启动即可
            │  ├─docs
            │  ├─uploads
            │  ├─main(二进制文件)
            │  └─settings.yml(配置文件)
            ├─gvb_web
            │  └─dist
            ├─mysql
            │  └─data
            ├─nginx
            │  ├─conf
            │  ├─html
            │  └─logs
            └─redis
                └─data
安装Docker和docker-compose

只需要提前安装好docker运行环境，可自行上网搜索资料安装

安装地址：[https://developer.aliyun.com/article/708974

依赖软件准备

后端Golang中的settings.yaml文件，请自行修改你的配置内容。

在服务器上使用docker-compose启动所有容器：mysql、redis、elasticsearch、kibana、nginx

docker-compose.yml 和 .env 文件放在部署服务器的 deploy 目录下，cd 到deploy启动docker-compose，以下是各个文件的内容。

1、docker-compose.yml 文件

version: "3"

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

services:
  gvb-redis:
    image: redis:7.0.8-alpine
    container_name: gvb-redis
    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:8.0
    container_name: gvb-mysql
    volumes:
      - ${GVB_DATA_DIRECTORY}/mysql/data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD} # root 账号的密码
      - MYSQL_DATABASE=${MYSQL_DATABASE} # 初始化的数据库
      - 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
    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=-Xms128m -Xmx256m
    ports:
      - ${ELASTICSEARCH_PORT01}:9200 # 自定义的是暴露出去的端口, elasticsearch 容器内运行固定为 9200和9300
      - ${ELASTICSEARCH_PORT02}:9300
    networks:
      gvb-network:
        ipv4_address: ${ELASTICSEARCH_HOST}
    command:
      [
        "/bin/sh",
        "-c",
        "chmod -R 777 /usr/share/elasticsearch/data /usr/share/elasticsearch/config /usr/share/elasticsearch/plugins && /usr/local/bin/docker-entrypoint.sh",
      ]

  gvb-nginx:
    image: nginx:latest
    container_name: gvb-nginx
    volumes:
      - ${GVB_DATA_DIRECTORY}/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - ${GVB_DATA_DIRECTORY}/nginx/logs:/var/log/nginx
      - ${GVB_DATA_DIRECTORY}/gvb_web:/usr/share/nginx/html # 修改路径为 nginx 默认的 web 根目录
      - ${GVB_DATA_DIRECTORY}/gvb_server:/usr/share/nginx/server # 修改路径为 nginx 默认的服务器目录
    ports:
      - ${NGINX_PORT}:80 # 自定义的是暴露出去的端口, nginx 容器内运行固定为 80
    networks:
      gvb-network:
        ipv4_address: ${NGINX_HOST}

  gvb-kibana:
    image: kibana:7.12.0
    container_name: gvb-kibana
    environment:
      - ELASTICSEARCH_HOSTS=http://gvb-elasticsearch:9200
    ports:
      - ${KIBANA_PORT}:5601
    networks:
      gvb-network:
        ipv4_address: ${KIBANA_HOST}

2、 .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=password

# Kibana
KIBANA_PORT=5601

# MySQL
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=password
MYSQL_DATABASE=gvb_db
MYSQL_USER=gvb
MYSQL_PASSWORD=password

# Elasticsearch
ELASTICSEARCH_PORT01=9200
ELASTICSEARCH_PORT02=9300

# Nginx
NGINX_PORT=80

# 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
KIBANA_HOST=172.12.0.5
NGINX_HOST=172.12.0.6

后端 settings.yml 配置文件，在目录：gvb\deploy\gvb\gvb_server 下。

mysql:
  host: 你的服务器地址
  port: 3306
  config: charset=utf8mb4&parseTime=True&loc=Local
  db: gvb_db
  user: root
  password: xxx
  log_Level: ""
logger:
  level: info
  prefix: '[gvb]'
  director: log
  show-line: true
  log-in-console: true
system:
  host: 0.0.0.0
  port: 8080
  env: release
  ssl-pem: ""
  ssl-key: ""
site-info:
  created_at: "2024-07-17"
  bei_an: 等待中
  title: 万里的个人博客
  qq_image: /uploads/file/admin/qq_20240717101939.jpg
  version: 1.0.1
  email: 2597029604@qq.com
  wechat_image: /uploads/file/admin/wechat_20240717101945.jpg
  name: WANLI
  job: Golang后端开发
  addr: 北京
  slogan: 万里
  slogan_en: WANLI
  web: http://bloggo.chat/
  bilibili_url: https://space.bilibili.com/1829444123?spm_id_from=333.1007.0.0
  gitee_url: https://gitee.com/xiwanli
  github_url: https://github.com/xzhHas/ginblog-wanli
qq:
  app_id: 
  key: 
  redirect: http://127.0.0.1/login?flag=qq
qiniu:
  enable: true
  access_key: 
  secret_key: 
  bucket: gvbdb
  cdn: http://spaotwd8k.hb-bkt.clouddn.com/
  zone: z1
  prefix: gvb
  size: 150
email:
  host: smtp.qq.com
  port: 465
  user: xxx@qq.com
  password: 
  default-from-email: xxx@qq.com
  use_ssl: true
  user_tls: false
jwt:
  secret: 9Saj0XAf8SdTYHj3lq6EOnyIrSfC5D6D
  expires: 1
  issuer: xiwanli
upload:
  size: 150
  path: uploads/file/
redis:
  ip: 你的服务器地址
  port: 6379
  password: "xxx"
  pool_size: 100
es:
  host: http://你的服务器地址
  port: 9200
  user: ""
  password: ""

Elasticsearch 配置文件：elasticsearch.yml，在目录：gvb\deploy\gvb\elasticsearch\config 下。

http.host: 0.0.0.0

nginx配置文件：nginx.conf，在目录：gvb\deploy\gvb\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
        server_name bloggo.chat www.bloggo.chat; # 域名

        # 前端请求处理
        location / {
            root   /usr/share/nginx/html/dist/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # WebSocket 请求处理
        location /wsUrl/ {
            rewrite ^/wsUrl/(.*)$ /$1 break;   # 长连接时间
            proxy_pass http://你的服务器地址/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;  # 长连接时间
        }

        # API 请求处理
        location /api/ {
            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_pass http://你的服务器地址/api/;
        }

        # 文件上传处理
        location /uploads/ {
            alias /usr/share/nginx/server/uploads/;
        }

        # Swagger 文档处理
        location /swagger/ {
            proxy_pass http://你的服务器地址/swagger/;
        }
    }
}
应用程序准备

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

# 生成api文档
swag init 

# 后端go打包（请使用cmd打包，不然打包后的文件还可能是windows的版本）
set GOARCH=amd64
set GOOS=linux
set CGO_ENABLED=0
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/
./main -es create (首先创建es的索引)
./main （启动后端程序）

访问应用

最后

感谢观看。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1949061.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Photos框架 - 自定义媒体资源选择器（数据部分）

Photos框架 - 自定义媒体资源选择器（数据部分）

引言 在iOS开发中，系统已经为我们提供了多种便捷的媒体资源选择方式，如UIImagePickerController和PHPickerViewController。这些方式不仅使用方便、界面友好，而且我们完全不需要担心性能和稳定性问题，因为它们是由系统提供的&…
阅读更多...
基于扩散的生成模型的语音增强和去噪

基于扩散的生成模型的语音增强和去噪

第二章 目标说话人提取之《Speech Enhancement and Dereverberation with Diffusion-based Generative Models》 文章目录 前言一、任务二、动机三、挑战四、方法1.方法:基于分数的语音增强生成模型(sgmse)2.网络结构 五、实验评价1.数据集2.采样器设置和评价指标3.基线模型4.评…
阅读更多...
godot新建项目及设置外部编辑器为vscode

godot新建项目及设置外部编辑器为vscode

一、新建项目 初次打开界面如下所示，点击取消按钮先关闭掉默认弹出的框 点击①新建弹出中间的弹窗②中填入项目的名称 ③中设置项目的存储路径，点击箭头所指浏览按钮，会弹出如下所示窗口 根据图中所示可以选择或新建自己的游戏存储路径&…
阅读更多...
音视频开发之旅（85）- 图像分类-VGG模型解析

音视频开发之旅（85）- 图像分类-VGG模型解析

目录 1. VGG解决的问题 2. 网络结构和参数 3. pytorch搭建vgg 4.flower_photos分类任务实践 5.资料 一、VGG解决的问题 论文链接：https://arxiv.org/pdf/1409.1556 在VGG之前，大多数深度学习模型相对较浅，比如下面的AlexNet(5层卷积和3…
阅读更多...
记录阿里云部署gitlab

记录阿里云部署gitlab

登录阿里云： 阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台 选择自己的ECS实例。我的实例是 使用VNC登录：输入用户名和密码 安装所需的依赖包： sudo yum install -y yum-utils device-mapper-persistent-data lvm2 添…
阅读更多...
Git（分布式版本控制系统）（fourteen day）

Git（分布式版本控制系统）（fourteen day）

一、分布式版本控制系统 1、Git概述 Git是一种分布式版本控制系统，用于跟踪和管理代码的变更，它由Linux、torvalds创建的，最初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本，并且可以在不同的开发人员之间进行…
阅读更多...
货架管理a

货架管理a

路由->vue的el标签->Api->call方法里calljs的api接口->数据声明const xxxData-> 编辑按钮:点击跳出页面并把这一行的数据给到表单formDataba2 保存按钮:formDataba2改过的数据->xxApi发送->查询Api 跳转仓库:把tableData.value数据清空->callXxxAp…
阅读更多...
华为云依赖引入错误

华为云依赖引入错误

问题：记录一次项目加在华为云依赖错误，如下： 错误信息：Could not find artifact com.huawei.storage:esdk-obs-java:pom:3.1.2.1 in bintray-qcloud-maven-repo (https://dl.bintray.com/qcloud/maven-repo/) 找到本地仓库&#…
阅读更多...
mac环境Qt Creator报错：Warning: You are changing a read-only file.

mac环境Qt Creator报错：Warning: You are changing a read-only file.

mac环境Qt Creator报错： Warning: You are changing a read-only file. 权限许可 文件权限问题 修改文件夹权限的基本语法： 打开终端：打开 macOS 中的终端应用程序。 sudo chmod -R permissions folder_pathchmod 是改变文件或文件夹权限…
阅读更多...
虚拟机之ip配置，ssh连接到虚拟机

虚拟机之ip配置，ssh连接到虚拟机

右边是我的虚拟机，左边是我使用vscode来连接（终端也可以。然后注意vscode配置后点一下刷新，不会自动刷新的QA）（吐槽一下，虚拟机都不能复制内容呢，确实仿真，centos仿真就是因为没有图…
阅读更多...
基于深度学习网络的USB摄像头实时视频采集与水果识别matlab仿真

基于深度学习网络的USB摄像头实时视频采集与水果识别matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 将usb摄像头对准一个播放不同水果图片的显示器，然后进行识别，识别结果如下： 本课题中…
阅读更多...
爬取贴吧的标题和链接

爬取贴吧的标题和链接

免责声明 感谢您学习本爬虫学习Demo。在使用本Demo之前，请仔细阅读以下免责声明： 学习和研究目的：本爬虫Demo仅供学习和研究使用。用户不得将其用于任何商业用途或其他未经授权的行为。合法性：用户在使用本Demo时，应确…
阅读更多...
微信小程序-自定义tabBar

微信小程序-自定义tabBar

通过官网给出的示例自己实现了自定义的tabBar，但结果发现 无法监听页面生命周期函数 结语：原想的是实现不一样的效果（如下） 故尝试了自定义tabBar，虽然做出来了，但也发现这个做法存在不足： 在…
阅读更多...
算法竞赛数据生成及使用Sublime对拍

算法竞赛数据生成及使用Sublime对拍

写在前面：最近几天看蒋老师直接使用了Sublime中的FastOlympicCode插件进行了对拍，出于兴趣来学习一下，关于插件的配置已经有很多大佬讲过啦，这里不再赘述。数据生成的代码我会放到最后，包括生成数组、区间、树、图。 …
阅读更多...
2024安全大模型技术与市场研究报告

2024安全大模型技术与市场研究报告

大模型驱动的AIGC引发技术革命，国资委强调国企需加大AI投入。大模型解决网络安全行业攻防不对等问题，国内外企业纷纷推出基于大模型的网络安全产品，AI将改变网络安全产品格局。 自 2022 年底开始，以 LLM(大语言模型，简…
阅读更多...
CSS（九）——CSS 轮廓（outline）

CSS（九）——CSS 轮廓（outline）

CSS 轮廓（outline） 轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。 让我们用一个图来看…
阅读更多...
使用Claude 3.5 Sonnet和Stable Diffusion XL：如何通过Amazon Bedrock不断优化图像生成直到满足需求

使用Claude 3.5 Sonnet和Stable Diffusion XL：如何通过Amazon Bedrock不断优化图像生成直到满足需求

在Amazon Bedrock的AI模型中，Anthropic Claude 3系列现在新增了图像识别功能。特别是最新的Anthropic Claude 3.5 Sonnet，图像识别能力得到了显著提升。我进行了一些简单的试验和比较，深入探索了这些Claude模型在OCR（光学字符识别…
阅读更多...
边界网关IPSEC VPN实验

边界网关IPSEC VPN实验

拓扑： 实验要求：通过IPSEC VPN能够使PC2通过网络访问PC3 将整个路线分为三段 IPSEC配置在FW1和FW2上，在FW1与FW2之间建立隧道，能够传递IKE（UDP500）和ESP数据包，然后在FW1与PC2之间能够流通数据…
阅读更多...
C# Nmodbus,EasyModbusTCP读写操作

C# Nmodbus,EasyModbusTCP读写操作

Nmodbus读写 两个Button控件分别为 读取和写入 分别使用控件的点击方法 ①引用第三方《NModbus4》2.1.0版本 全局 public SerialPort port new SerialPort("COM2", 9600, Parity.None, 8, (StopBits)1); ModbusSerialMaster master; public Form1() port.Open();…
阅读更多...
河道高效治理新策略：视频AI智能监控如何助力河污防治

河道高效治理新策略：视频AI智能监控如何助力河污防治

一、背景与现状 随着城市化进程的加快，河道污染问题日益严重，对生态环境和居民生活造成了严重影响。为了有效治理河道污染，提高河道管理的智能化水平，TSINGSEE青犀提出了一套河污治理视频智能分析及管理方案。方案依托先进的视频…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023