当前位置: 首页 > Web前端 > vue.js

使用golang+vue+mysql全栈做博客

时间:2023-04-01 01:32:47 vue.js

Ginblog(项目已经完成,欢迎使用)https://gitee.com/wejectchan/ginblog重要更新2021.2.12为了方便交流,一个QQ群已建立:951736723,如有任何问题,欢迎进群交流。2021.2.10增加展示页面的移动端适配2021.1.2增加注册、登录、评论功能,后台管理增加评论审核功能2021.1.3增加登录、注册验证功能;显示的评论数量增加;increasednumberofreadsdisplayedincreased:文章页面评论数和阅读数引入gin+vue全栈做博客。这是一个分享全栈制作过程的项目,旨在为有兴趣接触golangweb开发的朋友分享一些制作经验。大家可以去B站(https://space.bilibili.com/402177130)观看全栈制作过程,也可以留言分享你们的看法,很高兴和你们交流。目录结构├─.gitignore│go.mod//项目依赖│go.sum│latest_log.log│LICENSE│main.go//主程序│README.md│tree.txt│├─api├─config//项目配置入口├─database//数据库备份文件(初始化)├─log//项目日志├─middleware//中间件├─model//数据模型层├─routes│router.go//路由入口├─static//打包静态文件│├─admin//后台管理页面│└─front//前端展示页面├─upload├─utils//项目公共工具库││setting.go│├─errmsg│└─validator└─web//前端开发源码(VUECLI项目源文件)├─admin└─frontrun&&deploymentcloneprojectgitclonegit@gitee.com:wejectchan/ginblog.gitorgitclonehttps://github.com/wejectchen/ginblog.git转入如下文件夹cdyourPath/ginbolg安装依赖gomodtidy初始化项目配置config.ini./config/config.ini[server]AppMode=debug#调试开发模式,releaseproductionmodeHttpPort=:3000#项目端口JwtKey=89js82js72#JWTkey,随机字符串[database]Db=mysql#数据库类型,不能改成其他形式DbHost=127.0.0.1#数据库地址DbPort=3306#数据库端口DbUser=ginblog#数据库用户名DbPassWord=admin123#数据库用户密码DbName=ginblog#编号根据数据库名称[qiniu]#qiniu存储信息AccessKey=#AKSecretKey=#SKBucket=QiniuSever=在数据库中将sql文件导入数据库,推荐navicat或其他sql管理工具导入启动项目gorunmain.go此时项目启动,可以访问页面首页http://localhost:3000后台管理页面http://localhost:3000/admin默认管理员:admin密码:123456enjoy~~~~==期间两次使用和打开的过程,发现问题或功能需求欢迎提交Iusse或直接PR==实现简单的用户管理权限设置用户密码加密存储文章分类自定义列表分页图片上传七牛云JWT认证自定义日志功能跨域cors设置文章评论功能技术栈golangGinwebframeworkgorm(v1&&v2)jwt-goscryptlogrusgin-contrib/corsgo-playground/validator/v10go-iniJavaScriptvuevueclivuerouterantdesignvuevuetifyaxiostinymcemomentMySQLversion:8.0.21项目预览前端展示页面全部更新完成)后端完成第1节初始化项目+配置参数第2节配置数据库、数据模型第3节框架错误处理模块和路由接口第4节编写用户模块界面实现初步验证+分页功能第5节用户密码加密存储策略介绍及选择第6节用户信息撰写编辑+删除用户界面第7节博客分类界面编译完成文章分类关联查询)第10节编写登录界面,完整JWT中间件第11节完整登录界面第12节完整上传界面(GIN+七牛对象存储)第13节进程日志系统(自定义日志,按时间划分日志,软链接最新日志)第14节后端数据校验,交叉-域参数配置,i增加列表查询总数返回前端后台管理页面完成第一节前端初始化、开发环境搭建及相关依赖安装第1节第2节编写登录页面实现双向数据绑定和数据验证Section3完成登录页面Section4配置设置路由导航卫士,搭建后台管理页面框架第五节完成后台页面菜单栏和页面路由跳转第六节编写用户列表页面第七节用户列表查找和删除功能第八节完成用户列表添加用户和编辑用户功能第九节修复一些BUG第10节编写分类列表和文章列表页第11节完成新建文章和编辑文章页第12节自定义封装tinymce富文本编辑器实现编辑器本地上传图片等功能第13节后台页面完成,vue为前端展示页面打包部署(更新)第1节搭建项目框架第2节编写主要内容区+个人介绍第3节完成个人简介更新功能第4节完成文章列表页第5节完成文章详情页Docker部署1.如何安装docker官方文档:GetDocker|DockerDocumentation选择对应系统查看,以ubuntu18.04LTS为例卸载旧版本sudoapt-getremovedockerdocker-enginedocker.iocontainerdruncReadingpackagelists...DoneBuildingdependencytreeReadingstateinformation...DonePackage'docker-engine'isnotinstalled,sonotremovedPackage'docker'isnotinstalled,sonotremovedPackage'containerd'isnotinstalled,sonotremovedPackage'docker.io'isnotinstalled,sonotremoved软件包'runc'isnotinstalled,所以没有删除0个升级,0个新安装,0个删除,3个未升级。添加新版本仓库$sudoapt-getupdate$sudoapt-getinstall\apt-transport-https\ca-certificates\curl\gnupg-代理软件ware-properties-common获取官方GPG密钥$curl-fsSLhttps://download.docker.com/linux/ubuntu/gpg|sudoapt-keyadd-验证密钥,如果输出如下,则表示正确$sudoapt-keyfingerprint0EBFCD88pubrsa40962017-02-22[SCEA]9DC858229FC7DD38854AE2D88D81803C0EBFCD88uid[未知]DockerRelease(CEdeb)subrsa40962017[-S0添加仓库地址$sudoadd-apt-repository\"deb[arch=amd64]https://download.docker.com/linux/ubuntu\$(lsb_release-cs)\stable"#也可以使用国内仓库下载,速度更快,推荐$sudoadd-apt-repository\"deb[arch=amd64]https://mirrors.ustc.edu.cn/docker-ce/linux/ubuntu/\$(lsb_release-cs)\stable》更新仓库安装$sudoapt-getupdate$sudoapt-getinstalldocker-cedocker-ce-clicontainerd.io验证,运行hello-world$dockerpullhello-world$dockerrunhello-world#出现如下信息,说明docker安装成功,可以正常运行。来自Docker的问候!此消息表明您的安装似乎工作正常。为了生成这条消息,Docker采取了以下步骤:1.TheDocker客户端联系Docker守护进程。2.Docker守护进程从DockerHub拉取“hello-world”图像。(amd64)3.Docker守护进程从该图像创建一个新容器,该容器运行产生输出的可执行文件4.Docker守护进程流式传输该输出到Docker客户端,后者将其发送到您的终端。要尝试更雄心勃勃的事情,您可以使用以下命令运行Ubuntu容器:,访问:https://docs.docker.com/get-started/额外:配置国内存储镜像,保证拉取速度#这里以阿里云为例。阿里云为用户提供了不同配置的私有仓库。#具体需要登录阿里云管理,进入控制台,找到`镜像加速服务`->`镜像工具`->`镜像加速器`sudomkdir-p/etc/dockersudotee/etc/docker/daemon.json<<-'EOF'{"registry-mirrors":["https://XXXyourid.mirror.aliyuncs.com"]}EOFsudosystemctldaemon-reloadsudosystemctlrestartdocker至此,我们的docker环境就正式配置好了.2.拉取镜像并创建镜像和容器排列接下来,我们将制作运行项目所需的镜像。Mysql服务器镜像首先,我个人不建议用docker部署mysql。有几个原因:必须创建数据卷进行映射,一定不能在docker容器中运行数据库数据。否则一旦删除容器数据,所有的数据都会清空,所以一定要做好数据持久化!!;不利于io,数据读写在container中读写一次,在boundvolume中读一次,读写压力增加一倍,性能会打折扣。如果一定要在docker上部署mysql,可以这样做#首先判断是否可以搜索到mysql,这一步可以跳过,也可以在dockerhub.com中搜索$dockersearchmysql#拉取镜像dockerpullmysql#这里默认就是拉最新版本。如果需要特定版本,可以在图像后添加标签。具体版本信息可以在dockerhub.com#具体版本拉取查询,例如拉取8.0.22(版本号必须是官方发布的版本号,否则找不到)dockerpullmysql:8.0.22#此时可以查看下拉dockerimages拉取的镜像#运行镜像dockerrun-d-p3306:3306-v/my/own/datadir:/var/lib/mysql--nameginblog-mysql-eMYSQL_ROOT_PASSWORD=admin123mysql#-d表示后台运行并返回容器id#-p3006:3306表示端口映射,具体-phostport:containerport#--name给容器一个name#-eMYSQL_ROOT_PASSWORD=password设置mysqlroot管理员密码#-v/my/own/datadir:/var/lib/mysql添加数据卷/my/own/datadir为宿主机的数据库路径/var/lib/mysql是容器中的数据库路径,这一步很重要#进入容器配置dockerexec-itginblog-mysqlbashroot@ed9345077e02:/#mysql-uroot-pEnter密码:欢迎使用MySQL监视器。命令以;结尾或\g。您的MySQL连接ID是8Server版本:8.0.22MySQLCommunityServer-GPLCCopyright(c)2000,2020,Oracleand/oritsaffiliates。版权所有。Oracle是O的注册商标racleCorporation和/或其附属公司。其他名称可能是其各自所有者的商标。键入“帮助;”或'\h'寻求帮助。输入'\c'清除当前输入的语句。mysql>#之后,就和往常一样的情况下,mysql的操作也是一样的。制作一个ginblog项目镜像。总理需要拉取我们的ginblog项目#新建一个项目文件夹,你可以放在任何你认为合适的地方。$cd/$mkdirapp#这里使用git远程同步$gitclone项目地址writeDockerfileFROMgolang:latestRUNgoenv-wGO111MODULE=onRUNgoenv-wGOPROXY=https://goproxy.cn,https://goproxy.io,directWORKDIR$GOPATH/src/ginblogCOPY。$GOPATH/src/ginblogRUNgobuild.EXPOSE3000ENTRYPOINT["./ginblog"]配置ginblog的config#config/config.ini#dbHost=ginblog-mysql是为后面的容器互通做准备,对应nameDb=mysqlDbHost=ginblog-的mysql容器mysqlDbPort=3306DbUser=ginblogDbPassWord=admin123DbName=ginblog这种情况下,我们可能已经配置了docker的构建镜像文件。最后我们确定前端web文件夹下的axios请求地址//在web/admin/src/plugin/http.js和web/front/src/plugin/http.js这两个文件夹中,将baseURL地址改为部署服务器的在线地址axios.defaults.baseURL='http://localhost:3000/api/v1'//修改为axios.defaults.baseURL='http://在线服务器ip或域名:3000/api/v1'别忘了,修改地址后,重新打包$yarnbuild$npmrunbuild生成镜像最后一步生成我们的ginblogdocker镜像,这个很简单,运行下面的命令$dockerbuild-tginblog.$dockerrun-d-p3000:3000--nameginblogginblog#这样访问服务器IP:3000就可以访问网站了