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

发布时间: 2021-08-07 10:19:26 作者: 大象笔记

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

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

原则

项目目录结构

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

初始化 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,以作为接口之用。

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

偷懒

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

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

本地启动:

tyarn start:dev
我是一名山东烟台的开发者,联系作者