如何用Golang来手撸一个Blog - Milu.blog 开发总结

admin
9 评论
/ /
2042 阅读
/
14210 字
29 2022-07

大家好,我在公司的岗位是前端,由于对Go的广泛兴趣到最后的挚爱,奔着学习的目的开发了这款基于Go, Gin, Gorm, Mysql, Vue, Element, Pongo2 的个人博客,近期1.0版本正式发布了。 第一次用go开发东西,肯定有很多不足,请大佬们轻拍。 一句话总结一下:

  1. 前后端不分离,没有npm安装打包的操作,模板由Pongo2模板引擎负责呈现。
  2. 后台管理页面在 Layuimini 的基础上采用 iframe+vue 混合开发方式,原来通过 iframe 实现多标签的功能及基础布局框架没有变更,在业务页面直接引入 vue,element。好处是省去安装打包的麻烦,缺点是支撑不了复杂的业务。
  3. 提供了三套不同模板风格,分别对应:完整呈现,图片为主,简洁风格。

仓库地址:

预览地址:

后台地址:

共提供三款基础主题,在系统管理 / 系统设置 中设置。

  • 绿色主题

绿色主题.jpg

  • 默认主题

默认主题.jpg

  • 极简主题

极简主题.jpg

  • 后台管理

管理后台.jpg

1. 相关介绍

1.1 基本介绍

  • 麋鹿博客 名字是为便于搜索引擎关键字直达,同时组成整个动物系列开源项目。总的思路就是:

    1. 简单的开发 前后端不分离,后台管理虽然使用了Vue 2.x,但是不安装依赖不打包,直接引入使用。
    2. 简单的部署 没有docker, redisFTP直接上传,适合配置低的机型部署。
    3. 简单的维护 .go文件打包发布后需要重启go应用,public、view等静态文件可单独热更新,不需要重启go服务。
  • 开发时间从5到8差不多三个月的业余时间。

  • 静态页面参考其它项目,没有投入太多的时间,只在细节上做了调整。

1.2 功能特性

  1. 文章

    • 文章发布,采用富文本 tinymcemarkdown 编辑的使用体验
    • 分类管理
    • 文章排序
    • 草稿箱
  2. Banner管理

    • Banner增加、修改、删除
  3. 评论

    • 文章评论
    • 评论回复
  4. 友情链接

    • 添加、修改、删除友链
  5. 用户

    • 修改用户基础信息
  6. 友情链接

    • 添加、修改友链
    • 友链分类
  7. 设置

    • 网站设置
    • 主题切换

1.2 技术栈

1.2.1 后台
技术 说明 官网
Golang - 1.18 开发语言 https://go.dev/
Gin - 1.8.1 Gin Web Framework https://gin-gonic.com/zh-cn/docs/
Mysql - 5.7 数据库 https://www.mysql.com/cn/
Gorm - 1.9.16 Golang ORM https://gorm.io/zh_CN/docs/index.html
Jwt Golang jwt https://github.com/golang-jwt/jwt
Pongo2 - 5 模板引擎 https://github.com/flosch/pongo2
Logrus 日志 https://github.com/sirupsen/logrus
Base64Captcha 验证码 https://github.com/mojocn/base64Captcha
Crypto 密码库 https://golang.org/x/crypto
Ini ini文件库 https://github.com/go-ini/ini
Goment 时间处理工具 https://github.com/nleeper/goment
Air 热更新工具 https://github.com/cosmtrek/air
1.2.1 前台
技术 说明 官网
Vue - 2.x 渐进式JavaScript 框架 https://cn.vuejs.org/v2/guide/
Axios 基于promise 的HTTP 库 https://github.com/axios/axios
Element-UI 前端UI组件库 https://element.eleme.io/
Tinymce 可视化HTML编辑器 https://www.tiny.cloud/
Fontawesome 图标字体库 http://www.fontawesome.com.cn/

1.3 开发工具

系统 工具 官网
Goland 开发工具 https://www.jetbrains.com/zh-cn/go/
Navicat 数据库管理工具 https://www.navicat.com.cn/
Atom 源码阅读工具 https://atom.io/
Cmder Cmd替代工具[windows] https://cmder.net/
Notepad2 临时单文件编辑[windows] http://www.flos-freeware.ch/notepad2.html
Chrome 调试工具 https://www.google.com/intl/zh-CN/chrome/

1.4 文件结构

整体的结构参考世上最优美的框架 Laravel

├─app                 // 核心代码
│  ├─controller       // 控制层
│  │  ├─admin
│  │  └─home
│  ├─database        // 数据库链接
│  ├─model           // 模型层
│  └─service         // 操作数据层
├─config             // 配置文件
├─pkg                // 所有工具文件
│  ├─e               // 报错
│  ├─hash            // 验证码
│  ├─response        // 返回封装
│  └─utils           // 工具库
├─public             // 所有静态资源
│  ├─admin
│  ├─common
│  ├─data
│  ├─green
│  ├─home
│  └─uploads
├─routers             // 路由文件
└─views               // 所有静态资源
    ├─admin
    ├─green           // 绿色主题模板
    ├─default         // 默认模板
    └─home            // 普通模板

Tips:

  • Air 由于go本身没有热加载技术,所以还需要一个热加载工具的支持。可选的也不多,
    1. Fresh
    Fresh满足基础的应用,每次保存文件都会生成或重新启动Web应用程序,只是这工具多年未更新所以弃用。
    2. Air
    Air的优点也比较突出:彩色日志输出,自定义构建或二进制命令,支持忽略子目录,启动后支持监听新目录等等的。
    2.1 Air 存在问题
    Air存在缓存问题,虽然在cmd里边结束Air,但刷新浏览器程序依然在运行,这时就需要手工结束进程然后重启。
    // 查找 PID,9888为端口号
    netstat -ano | findstr 9888
    // 杀死进程,14172 查到的pid
    taskkill /pid 14172 /f
    
    2.2 Command not found 报错
    如果输入 air 报这个错,那需要在系统的path里边配置项目路径,比如项目在D:\go-project,那么在path里边就应该有一条:
    D:\go-project\bin
    
  • Pongo2 由于是前后端未分离的开发方式,所以模板引擎扮演着重要的角色,起初的选型也看了不少。比如goview,仿ejs的quicktemplate,还有类ejs的hero等等的。最后选定Pongo2的理由是功能强大,上手容易,能够容易实现分模板继承不同模板的需求。他大体的思路和语法是仿Jinja2和Django模板的或基本一样的。有诸如Extends、Macro、Block、Include等强大功能,如果有类 Django, Nunjucks 模板语法上手基本没有难度,Pongo2文档写的不是那么详细,有进一步了解还需要看仓库源码 Template_tests。 问题,与Vue的取值边界符号有冲突。

两种解决办法:

  1. Vue的标签用v-html来代替,比如:<div v-html="user.nickname"></div>
  2. 修改Vue的边界修饰符 delimiters配置方式。 Goland对Pongo2并没有提供专门的语法高亮支持,这其中推荐另外一个插件,Twig,需要2步
  3. 安装插件 File -> Settings -> Plugins -> Twig
  4. 重启开发工具

2. 如何在本地运行

以下以windows系统举例 先从官网下载安装最新版Go开发包 1.18.3,然后进行相关的配置。

2.1 环境变量的配置

在系统变量中添加 Go 开发相关的变量,需添加以下变量 变量名 | 值 | 说明 ----|----|---- GOPATH | d:\go-project | Go 语言的开发目录 GOROOT | c:\Go | 安装 Go 安装目录 PATH | c:\Go\bin;d:\go-project\bin | 终端可以直接运行Go命令; 运行自己编译的Go程序和Air GO111MODULE | on | 开启 Go.mod 功能,统一用go.mod管理开发依赖包,此功能在Go1.11版本中添加 GOPROXY | https://goproxy.cn | Go 包下载代理地址

2.2 数据库

2.2.1 Mysql的安装

Mysql是我以前玩PHP的套件Phpstudy,有安装方便、启动便捷、管理省心等特点,当然也可以选择单独的 Mysql 来安装。由于最终发布的宝塔控制面板目前默认版本是 5.7,为了避免不必要的麻烦,我目前安装这是这一版本。

2.2.2 数据导入

新建名称为 elk-blog 的数据库,注意字符集为 utf8 -- UTF-8 Unicode,字符编码为 utf8_general_ci 然后导入 elk-blg/public/data/elk-blog.sql文件。

  • 然后克隆项目代码到本地:

    $ git clone https://gitee.com/jikey/elk-blog.git
    
  • 复制项目目录下文件 config/env.example.inienv.ini 并修改配置文件中的数据库连接相关信息

    [database]
    type = mysql
    host = localhost
    port = 3306
    user = root
    password = root
    dbname = elk-blog
    charset = utf8
    
  • 进入项目根目录,安装项目相关依赖

    $ go mod download
    
  • 进入项目根目录,启动项目,比如:

    $ cd D:\go-project\src\elk-blog
    $ air
    

前台入口:

http://localhost:8080/

后台入口:

http://localhost:8080/admin/login

初始用户名:admin,密码:admin123$

2.3 Goland 的配置

2.3.1 File -> Settings -> Go 下配置
变量名 说明
GOPATH d:\go-project Go 语言的开发目录
GOROOT C:\Go 会默认选择系统安装最高版本
GOPATH-Global GOPATH d:\go-project 全局设置
Go Modules GOPROXY=https://goproxy.cn,direct 先从配置地址下载,若失败,转从原始地址下载 功能,统一用go.mod管理开发依赖包,此功能在Go1.11版本中添加
GOPROXY https://goproxy.cn Go 包下载代理地址
2.3.2 Settings -> Project Structure

排除Exclued .idea, bin, pkg 等目录,不进行索引,有效节省内存资源。

2.3.3 Settings -> Appearance

使用One Dark主题

2.4 Air 的配置

3. 如何上线发布

由于本人特别菜,对经典的linuxdocker一直没怎么学会,所以这次选择的是宝塔控制面板来辅助部署,以下的经验也是基于宝塔来介绍。

3.1 安装GO

宝塔Linux面板-安装golang环境

  • 基本的步骤就是先从go官网下载tar包,然后上传到服务器指定目录上 /usr/local,这样做的目的是,能够快速完成节省时间。
  • 然后解压添加环境变量 tar -xzvf go1.18.2.linux-amd64.tar.gz,这里边需要说明的是宝塔的终端不能修改配置文件,即没有退出保存的模式,需要ssh和直接在文本编辑模式修改。 我添加的环境变量:
    export GOROOT=/usr/local/go # 设置为go安装的路径
    export GOPATH=/www/wwwroot/GO #项目路径
    export PATH=$PATH:$GOROOT/bin:$GOPATH/bin
    
  • 宝塔终端输入go version,显示:go version go1.18.2 linux/amd64 即确认为安装成功

3.2 新建网站

其实就是新建nginx配置文件,比如新建网站 milu.blog,然后在nginx中配置go服务端口入口。假如go的端口为4000,则增加如下配置:

server{
  location / {
    proxy_pass  http://127.0.0.1:4000;
  }
}

3.3 准备打包go

go的打包命令只打包*.go结尾的文件,换句话说非*.go的文件需要自己手动上传。如果经历过npm run build洗礼的人,那go的这个build至少到现在没有遇到大的问题,或许我代码写的少的原因。

set CGO_ENABLED=0
set GOARCH=amd64
set GOOS=linux
go build main.go

3.4 上传文件

上传的目录为在环境变量里边定义的项目路径,比如milu项目的目录就是

/www/wwwroot/GO/milu

其它的项目就是

/www/wwwroot/GO/other

为了防止其它配置文件寻找不到,那所有相关的文件都在这个目录中。那最后发布完的/www/wwwroot/GO/milu下的文件组织为:

├─config  // 配置文件
├─public  // 静态资源
├─views   // 模板文件
├─main    // 打完包二进制文件

也就是说前面那么多文件,如果部署这些文件就够了。

3.5 上传SQL文件

这块唯一说的是宝塔只支持Mysql5.7版本,暂不支持Mysql8.0,手工安装估计也可以,偷懒也没折腾。为防止版本不兼容,在本地开发时Mysql就为5.7。然后本地Navicat导出结构和数据,在宝塔的Phpmyadmin里边导入。

3.6 命令行终端调试

在宝塔终端中cd到项目目录/www/wwwroot/GO/milu,然后直接 ./main,这样方便的查看日志,能够看到一些详情的报错信息。运行 ./main之后,就可以刷新域名,如果各步正常页面就能显示出来。

3.7 PM2绑定进程

我也只是试试的心态用pm2来运行一下go,没想到还真运行起来了。这样暂时不安装其它的服务,和Node服务一块运行起来。

4. 感谢的人

此项目感谢以下各界人士的支持和帮助

方便找回此项目,可以点右上角 ?Star ? 收藏 + 支持

还可以

  • Golang交流群 105545914
  • Vue交流群 364912432
  • Javascript交流群 492107297
  • niko

    666
  • 岁月

    真的不错,挺厉害的
  • Xiaoshuang

    大佬牛逼
  • 九成的成

    <script>alert(111)</script>
  • akira

    运行服务报错, Fail to parse 'conf/env.ini111': open config/env.ini: The system cannot find the path specified.
  • 山炮

    牛逼 666

    山炮

    我喜欢你

  • 东方红

    感觉有点复杂
  • 斯派罗

    好多的技术栈啊
  • 11

    活到老学到老

    11

    发愤忘食,乐以忘忧,不知老之将至