以一个会员管理系统为例，采用前后端分离的架构，前端 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 改造
- 修改 Antd Pro V5 登录页面, 去掉手机号登录
- 去掉底部蚂蚁集团的标志
- 使用后台账号密码登录 改造细节不少，需要耐心
- 退出登录
- 去掉 i18n 翻译缺失提示 要不 console 里一堆错误信息，影响调试
- 去水印
- 修改 Antd Pro V5 加载时的 title 及 logo
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
微信关注我哦 👍
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式