Gin+Gorm+Vue全栈开发那些事儿~

        近期，基于个人目前技术栈的熟悉加深以及后期公司项目使用为目的，学习并练手使用了Gin+Gorm+Vue相关技术栈，使用前后端分离模式开发，开发了一套前端端系统的CMS类型的项目。通过该项目，加深了Go相关语法以及其前端框架Vue等对应技术栈的熟识程度，可达到后期直接个人全栈开发Web相关前后端，能够做到直接上手架构设计、以及开撸代码的程度。故此，做一下相关技术学习总结，加深学习印象以及后期项目开发的快速使用方便性。

1、相关技术栈

• golang
  • Gin web framework
  • gorm(v1 && v2)
  • jwt-go
  • bcrypt
  • logrus
  • gin-contrib/cors
  • go-playground/validator/v10
  • go-ini
• JavaScript
  • vue
  • vue cli
  • vue router
  • ant design vue
  • vuetify
  • axios
  • tinymce
  • moment
• MySQL version:5.7.26

2、开发流程 

1）、前后端分离模式开发

2）、先使用Go语言开发对应项目所需接口API。使用Gin web开发框架，可方便快速搭建Http开发请求路由等模式；使用Gorm可以实现快速数据库迁移以及数据结构操作等；项目相关日志记录可使用logrus或者zap等方式自定义记录；项目可配置化参数，可以使用go-ini、go-toml、go-yaml等方式，方便配置化；前后端分离模式参数校验，个人信息持久化方式取消使用Cookie模式，采用jwt-go方式，快速有效；跨域解决方法，使用gin-contrib/cors；密码等加密技术可采用bcrypt、scrypt等内置包加密，可靠性高。相关接口测试，可以使用ApiPost工具，方便测试，可以快速生成接口文档。

3）、再使用Vue技术进行前端开发。使用vue cli脚手架技术，快速搭建vue开发环境，相关包管理工具可以选择npm或者yarn；使用vue router进行前端路由集中化配置管理；使用axios进行前后端交互Ajax请求操作；前端页面可以使用相关UI组件，如ant design vue、iView、Element UI等vue对应组件快速搭建开发（推荐Element UI）。

3、架构组织设计 

        相关目录组织结构，可以参考如下：   

├─  .gitignore
│  go.mod // 项目依赖
│  go.sum
│  latest_log.log #最新log日志软连接
│  LICENSE
│  main.go //主程序
│  README.md
│          
├─api         
│ ├─v1 // 版本控制，控制器文件
├─config // 项目配置入口   
├─database  // 数据库备份文件（初始化）
├─log  // 项目日志
├─middleware  // 中间件
├─model // 数据模型层
├─routes
│      router.go // 路由入口    
├─static // 打包静态文件
│  ├─admin  // 后台管理页面 (已废弃，打包静态文件在web/admin/dist下)         
│  └─front  // 前端展示页面 (已废弃，打包静态文件在web/front/dist下)            
├─upload   
├─utils // 项目公用工具库
│  │  setting.go 
│  ├─errmsg   
│  └─validator         
└─web // 前端开发源码（VUECLI项目源文件)
    ├─admin             
    └─front

4、总结 

        通过该项目学习使用以及开发操作，加深了个人了解使用Go+Vue进行前后端分离全栈式开发的理解；扫清了相关的知识盲区；有助于后期直接接收开发对应的技术项目；提高了个人业务开发的应对能力；更有助于个人综合技术能力的提升。后续，会继续加大相关技术栈的使用以及总结，技术服务于业务，业务服务于产品，提高自身的眼界以及格局。加油吧！