公司做网站有用吗,中云建设集团网站,建设网站教学,泉州模板网站建站WANLI 博客系统
项目介绍
基于vue3和gin框架开发的前后端分离个人博客系统#xff0c;包含md格式的文本编辑展示#xff0c;点赞评论收藏#xff0c;新闻热点#xff0c;匿名聊天室#xff0c;文章搜索等功能。
项目在线访问#xff1a;http://bloggo.chat/
访客账号…WANLI 博客系统
项目介绍
基于vue3和gin框架开发的前后端分离个人博客系统包含md格式的文本编辑展示点赞评论收藏新闻热点匿名聊天室文章搜索等功能。
项目在线访问http://bloggo.chat/
访客账号test 密码test 也可以使用邮箱自己注册。
GitHub地址ginblog-wanli 功能展示
B 站视频
图片展示 技术介绍
开发环境
开发工具功能描述GoLand后端开发Vscode前端开发ApifoxAPI测试Ubuntu依赖软件运行xftp、xsheelLinux 远程工具
开发环境版本GoLang1.22.3nodejs20.14.0MySQL8.0Elasticsearch、kibana、ik7.12.0Redis7.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/goWEB框架ginhttps://gin-gonic.com/zh-cn/docs/API文档swaggohttps://github.com/swaggoORM 库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: 3networks:gvb-network:driver: bridgeipam:config:- subnet: ${SUBNET}services:gvb-redis:image: redis:7.0.8-alpinecontainer_name: gvb-redisvolumes:- ${GVB_DATA_DIRECTORY}/redis/data:/dataports:- ${REDIS_PORT}:6379 # 自定义的是暴露出去的端口, Redis 容器内运行固定为 6379command: redis-server --requirepass ${REDIS_PASSWORD} --appendonly yesnetworks:gvb-network:ipv4_address: ${REDIS_HOST}gvb-mysql:image: mysql:8.0container_name: gvb-mysqlvolumes:- ${GVB_DATA_DIRECTORY}/mysql/data:/var/lib/mysqlenvironment:- MYSQL_ROOT_PASSWORD${MYSQL_ROOT_PASSWORD} # root 账号的密码- MYSQL_DATABASE${MYSQL_DATABASE} # 初始化的数据库- MYSQL_USER${MYSQL_USER}- MYSQL_PASSWORD${MYSQL_PASSWORD}- TZAsia/Shanghaicommand: --max_connections1000--character-set-serverutf8mb4--collation-serverutf8mb4_general_ciports:- ${MYSQL_PORT}:3306 # 自定义的是暴露出去的端口, MySQL 容器内运行固定为 3306networks:gvb-network:ipv4_address: ${MYSQL_HOST}gvb-elasticsearch:image: elasticsearch:7.12.0container_name: gvb-elasticsearchvolumes:- ${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/pluginsenvironment:- discovery.typesingle-node- ES_JAVA_OPTS-Xms128m -Xmx256mports:- ${ELASTICSEARCH_PORT01}:9200 # 自定义的是暴露出去的端口, elasticsearch 容器内运行固定为 9200和9300- ${ELASTICSEARCH_PORT02}:9300networks: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:latestcontainer_name: gvb-nginxvolumes:- ${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 容器内运行固定为 80networks:gvb-network:ipv4_address: ${NGINX_HOST}gvb-kibana:image: kibana:7.12.0container_name: gvb-kibanaenvironment:- ELASTICSEARCH_HOSTShttp://gvb-elasticsearch:9200ports:- ${KIBANA_PORT}:5601networks:gvb-network:ipv4_address: ${KIBANA_HOST}2、 .env 文件相关参数自行修改
# https://docs.docker.com/compose/migrate/
# docker-compose.yml 同目录下的 .env 文件会被加载为其环境变量# COMPOSE_PROJECT_NAMEgin-vue-blog# 数据存储的文件夹位置 (默认在当前路径生成 gvb 文件夹)
GVB_DATA_DIRECTORY./gvb# Redis
REDIS_PORT6379
REDIS_PASSWORDpassword# Kibana
KIBANA_PORT5601# MySQL
MYSQL_PORT3306
MYSQL_ROOT_PASSWORDpassword
MYSQL_DATABASEgvb_db
MYSQL_USERgvb
MYSQL_PASSWORDpassword# Elasticsearch
ELASTICSEARCH_PORT019200
ELASTICSEARCH_PORT029300# Nginx
NGINX_PORT80# Docker Network (一般不需要变, 除非发生冲突)
SUBNET172.12.0.0/24
REDIS_HOST172.12.0.2
MYSQL_HOST172.12.0.3
ELASTICSEARCH_HOST172.12.0.4
KIBANA_HOST172.12.0.5
NGINX_HOST172.12.0.6后端 settings.yml 配置文件在目录gvb\deploy\gvb\gvb_server 下。
mysql:host: 你的服务器地址port: 3306config: charsetutf8mb4parseTimeTruelocLocaldb: gvb_dbuser: rootpassword: xxxlog_Level:
logger:level: infoprefix: [gvb]director: logshow-line: truelog-in-console: true
system:host: 0.0.0.0port: 8080env: releasessl-pem: ssl-key:
site-info:created_at: 2024-07-17bei_an: 等待中title: 万里的个人博客qq_image: /uploads/file/admin/qq_20240717101939.jpgversion: 1.0.1email: 2597029604qq.comwechat_image: /uploads/file/admin/wechat_20240717101945.jpgname: WANLIjob: Golang后端开发addr: 北京slogan: 万里slogan_en: WANLIweb: http://bloggo.chat/bilibili_url: https://space.bilibili.com/1829444123?spm_id_from333.1007.0.0gitee_url: https://gitee.com/xiwanligithub_url: https://github.com/xzhHas/ginblog-wanli
qq:app_id: key: redirect: http://127.0.0.1/login?flagqq
qiniu:enable: trueaccess_key: secret_key: bucket: gvbdbcdn: http://spaotwd8k.hb-bkt.clouddn.com/zone: z1prefix: gvbsize: 150
email:host: smtp.qq.comport: 465user: xxxqq.compassword: default-from-email: xxxqq.comuse_ssl: trueuser_tls: false
jwt:secret: 9Saj0XAf8SdTYHj3lq6EOnyIrSfC5D6Dexpires: 1issuer: xiwanli
upload:size: 150path: uploads/file/
redis:ip: 你的服务器地址port: 6379password: xxxpool_size: 100
es:host: http://你的服务器地址port: 9200user: password: Elasticsearch 配置文件elasticsearch.yml在目录gvb\deploy\gvb\elasticsearch\config 下。
http.host: 0.0.0.0nginx配置文件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; # HTTPserver_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 GOARCHamd64
set GOOSlinux
set CGO_ENABLED0
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 启动后端程序访问应用 最后
感谢观看。
