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

如何用Golang手写博客——Milu.blog开发总结

时间:2023-04-01 00:25:56 vue.js

前段时间开了个小博客,今天有点时间总结一下http://www.milu.blog,路过的朋友不要错过它。Golang在学习和自慰。这个看似不复杂的小东西,已经搞了2个多月了。在早期的技术选型中,作为一个对前端稍有了解的菜鸟,我做的大部分都是前端。我没有选择流行的技术栈,而是选择了最原始的技术栈。这样做的目的是,一方面希望自己能把主要精力放在Golang开发上,在完成阶段小目标的同时尽量不要沉迷于首页的细节。快速修复,快速更新,让用户和报告问题的小伙伴能够及时响应。即便是抱着这样的目标,最后还是尝试了三套不同风格的模板展示在前台,费了好大的功夫。有兴趣的朋友可以试试。当然,这些都是在Pongo2模板引擎的配合下完美实现的。直接更新单个页面不需要重启后台服务。如果切换模板,则需要重新启动服务。本项目的初衷是通过一次基础代码练习,巩固对Golang基础知识的掌握,同时衔接所学的其他知识,用最简单的开发方式快速完成开发并发布上线。由于侧重于Golang,所以前端页面采用简单的服务端方式渲染,没有npm、webpack、安装依赖、压缩,粗糙简单。后台管理页面在Layuimini的基础上采用iframe+vue混合开发方式。原有通过iframe的多标签功能和基本布局框架没有改变,业务页面直接引入了vue和element。好处是省去了上线前安装依赖包和打包的步骤。缺点是不能支持复杂的业务。可选的技术栈有:前台可以使用Nuxt3+ElementPlus、Nextjs+Antd等,后台管理可以使用Vue3+Arco、React+Antd等。仓库地址:http://gitee.com/jikey/elk-博客1.相关介绍1.1基本介绍Elkblog起名是为了方便搜索引擎和Github搜索,同时形成整个动物系列的开源项目。1.2技术栈1.2.1背景技术说明官网Golang-1.18开发语言https://go.dev/Gin-1.8.1GinWebFrameworkhttps://gin-gonic.com/zh-cn/docs/Mysql-5.7数据库https://www.mysql.com/cn/Gorm-1.9.16GolangORMhttps://gorm.io/zh_CN/docs/index.htmlJwtGolangjwthttps://github.com/golang-jwt/jwtPongo2-5Template引擎https://github.com/flosch/pongo2Logrus日志https://github.com/sirupsen/logrusBase64Captcha验证码https://github.com/mojocn/base64Captcha密码库https://golang.org/x/cryptoIniini文件库https://github.com/go-ini/iniGoment时间处理工具https://github.com/nleeper/gomentAir热更新工具https://github.com/cosmtrek/air1.2.1前端技术说明官网Vue-2.xProgressiveJavaScript框架https://cn.vuejs.org/v2/guide/Axios基于Promise的HTTP库https://github.com/axios/axiosElement-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/CmderCmd替代工具[windows]https://cmder.net/Notepad2临时单文件编辑[windows]http://www.flos-freeware.ch/notepad2.htmlChrome调试工具https://www.google.com/intl/zh-CN/chrome/1.4文件结构整体结构参考世界上最漂亮的框架Laravel├─app//核心代码│├─controller//控制层││├─admin││└─home│├─database//数据库link│├─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、FreshFresh满足基本应用。每次保存文件时,都会生成或重新启动Web应用程序。不过这个工具已经很多年没有更新了,所以被弃用了。2、AirAir的优点也很突出:彩色日志输出、自定义构建或二进制命令、支持忽略子目录、支持启动后监听新目录等等。2.1Air的问题Air存在缓存问题。虽然在cmd中终止了Air,但是浏览器刷新程序还在运行。这时候就需要手动终止进程并重启。//找到PID,9888是端口号netstat-ano|findstr9888//kill进程,14172foundpidtaskkill/pid14172/f2.2Commandnotfounderror如果输入air报这个错,需要在系统的路径里面配置工程路径。比如项目在D:\go-project,那么路径中应该有一个:D:\go-project\binPongo2因为是前后端不分离的开发方式,模板引擎起着重要的作用,初选也看了很多。比如goview,quicktemplate仿ejs,herolikeejs等。最后选择Pongo2的原因是功能强大,简单易用,可以轻松实现不同模板子模板继承的需求。他的大体思路和语法与Jinja2和Django模板相似或基本相同。有Extends、Macro、Block、Include等强大的功能,如果有类似Django、Nunjucks的模板语法,上手基本不难。Pongo2文档没有那么详细。进一步了解需要看仓库源码Template_tests。问题,和Vue的valueboundarysymbols有冲突。两种解决方案:Vue标签换成v-html,例如:

修改Vue的边界修饰符delimiters的配置方法。Goland没有为Pongo2提供特殊的语法高亮支持。推荐另一个插件Twig,需要2步安装插件File->Settings->Plugins->Twig。重启开发工具2.如何在本地运行下面以windows系统为例,从官网下载安装最新版本的Go开发包1.18.3,然后进行相关配置。2.1环境变量配置要在系统变量中添加Go开发相关的变量,需要添加如下变量名和值说明GOPATHd:\go-projectGo语言开发目录GOROOTc:\Go安装Go安装目录PATHc:\Go\bin;d:\go-project\bin终端可以直接运行Go命令;运行自编译的Go程序和AirGO111MODULEon开启Go.mod功能,使用go.mod管理开发依赖包。Go1.11版本新增此功能GOPROXYhttps://goproxy.cnGo包下载代理地址2.2数据库2.2.1Mysql安装Mysql是Phpstudy,我以前玩PHP的一个包。由于最终宝塔控制面板的默认版本是5.7,为了避免不必要的麻烦,我目前安装的是这个版本。2.2.2数据导入然后导入elk-blg/public/data/elk-blog.sql文件。2.2.3运行Cmdcd到当前目录,然后直接输入命令air启动项目。$cdD:\go-project\src\elk-blog$air2.3Goland配置2.3.1File->Settings->Go配置变量名值说明GOPATHd:\go-projectGo语言开发目录GOROOTC:\Go会默认选择系统最高版本安装GOPATH-GlobalGOPATHd:\go-projectglobalsettingGoModulesGOPROXY=https://goproxy.cn,直接从配置地址先下载,失败则切换到原地址下载功能,使用go.mod管理开发依赖包,该功能在Go1.11版本2.3.2Settings->ProjectStructureExcludesExcluded.idea,bin,pkg等目录中添加GOPROXYhttps://goproxy.cnGo包下载代理地址,无索引,有效节省内存资源。2.3.3Settings->Appearance使用OneDark主题2.4Air配置3.如何发布到网上由于我有特殊配方,对经典的linux和docker了解不多,所以这次选择了宝塔控制面板辅助部署,下面的经验也是基于宝塔介绍的。3.1安装GO宝塔Linux面板-安装golang环境的基本步骤是从go官网下载tar包,然后上传到服务器/usr/local指定目录。这样做的目的是通过快速完成它来节省时间。然后解压并添加环境变量tar-xzvfgo1.18.2.linux-amd64.tar.gz。这里需要说明的是宝塔的终端是不能修改配置文件的,也就是没有退出保存模式,需要在文本编辑模式下ssh和直接修改。.我添加的环境变量:exportGOROOT=/usr/local/go#设置为go安装路径exportGOPATH=/www/wwwroot/GO#项目路径exportPATH=$PATH:$GOROOT/bin:$GOPATH/bin宝塔在终端输入goversion,会显示:goversiongo1.18.2linux/amd64,表示确认安装成功。如果go的端口是4000,添加如下配置:server{location/{proxy_passhttp://127.0.0.1:4000;}}3.3准备打包gogo的打包命令只打包以*.go结尾的文件,即非*.go文件需要手动上传。如果你经历过npmrunbuild的洗礼,那么至少go的这次build到目前为止还没有遇到大问题,或许是因为我写的代码比较少。setCGO_ENABLED=0setGOARCH=amd64setGOOS=linuxgobuildmain.go3.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.7pm2绑定过程我只是尝试用pm2跑go,没想到跑起来了。这样就暂时不安装其他服务了,和Node服务一起运行。4.感谢本项目感谢以下各界人士对我的支持和帮助上海-时代世老在Mysql领域给了我更多的帮助南京-Wikewike是资深Go开发者上海-SamSam专攻杜松子酒,Vue