搭建 Golang Gin + Ant Design Pro V5 管理系统后台

以一个会员管理系统为例，采用前后端分离的架构，前端 Antd Pro V5, 后端 Golang Gin。

整理这个笔记是为了把操作流程串联起来，方便以后新建此类项目，节省时间。

原则

从看的见的部分入手，即先搞前端，然后后端。这样很容易了解哪部分需要调整，否值后台写着写着就迷失了方向。不知道下一步该搞什么。写程序确实很难标准化流程，这导致有时效率会不尽人意，总结一些可以遵守的原则，可以少走弯路。
尽量不要从头搭框架，特别是 Antd Pro 这种代码质量不行的框架，每次踩坑都是浪费时间。要么复制之前项目的代码，要么自己 fork 一份，自己维护

项目目录结构

考虑了一下，还是将后端、前端分成两个平行的目录比较合适。主要是考虑，后端可以直接作为模板复制到新项目，而前端我暂时不确定是否方便复制。

frontend
backend

初始化 golang 项目

mkdir member_backend
cd member_backend

初始化一个 golang main.go 文件，vim main.go:

package main

import "fmt"

func main() {
        fmt.Println("vim-go")
}

执行 go mod 命令，以生成 go.mod 文件：

go mod init sunzhongwei.com/member

编译测试一下：

go build

新建 Git 项目

新建一个目录，初始化 Git 项目

git init
git add go.mod
git add main.go
git commit -a

到阿里云免费代码管理平台新建一个 Git 项目: https://codeup.aliyun.com/

注意切换到 SSH 模式 (阿里云默认是 HTTPS，需要手动输入账号密码，麻烦)

git remote add origin git@codeup.aliyun.com:xxxxxx/member_backend.git

初始化前端 Ant Design Pro V5

tyarn create umi member_frontend

具体参考安装搭建 Ant Design Pro V5 开发环境

第一阶段完成

至此，golang 和 ant design pro 的开发环境都搭建好了。

但是，相互间还没有交互。就需要进一步的配置了。

前端部分：Ant Design Pro V5 改造

golang gin 配置

将最简单的 golang hello world 改造成使用 gin + mysql，以作为接口之用。

先用其他已有项目中，拷贝代码过来，删减一下。形成最原始的代码模板。主要功能：

[X] mysql 连接管理
[X] env 配置文件
[X] 管理后台登录接口
[X] 管理员管理，修改密码
go build 检测依赖配置
初始化 SQL 文件

偷懒

上面的流程，从头走一遍配置流程太麻烦了，还是直接从其他项目复制过来最省事。

rsync --verbose  --progress --stats --compress \
      --recursive --times --perms --links --delete \
      --exclude "*.bak" --exclude "*~" --exclude "*.swp" --exclude='node_modules' --exclude='.git' \
      /home/zhongwei/work/old_project/ /home/zhongwei/work/new_project

同步之后，进入 antd pro 项目根目录，执行安装依赖命令：

tyarn

修改本地 dev 开发环境的后台接口端口配置 config/proxy.ts。
修改管理后台的 title，config/defaultSettings.ts，src/pages/document.ejs，src/pages/user/Login/index.tsx

本地启动：

tyarn start:dev

原则