# 前后端CRUD

# 创建项目

更新bee go get -u github.com/beego/bee
创建一个beego项目，bee new beeblog
创建一个ant design pro4项目， cd beeblog && mkdir ant && cd ant && yarn create umi
安装ant4的依赖，npm i
创建数据库，CREATE DATABASE IF NOT EXISTS beeblog DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
创建beegopro.toml

dsn = "root:@tcp(127.0.0.1:3306)/beeblog"
proType = "ant4"
[models.blog]
    names = ["name","content","created_at","updated_at"]
    orms = ["string","string","datetime","datetime"]
    comments = ["名称","内容","创建时间","更新时间"]
[path]
    beego =  "."
    ant  = "./ant/src/pages"

1
2
3
4
5
6
7
8
9

执行生成脚本，bee pro gen

# 前端添加代码

./ant/package.json 增加mock方式 "start:dev": "cross-env REACT_APP_ENV=dev umi dev",
./ant/config/proxy.ts 增加beego反向代理

export default {
  dev: {
    '/api/blog': {
      target: 'http://127.0.0.1:8080',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },

  },
  test: {
    '/api/': {
      target: 'https://preview.pro.ant.design',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
  pre: {
    '/api/': {
      target: 'your pre url',
      changeOrigin: true,
      pathRewrite: { '^': '' },
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

./ant/config/config.ts 添加菜单

 { name: '博客',icon: 'RocketOutlined',path: '/blog',component: './blog/list'},
 { path: '/blog/info', component: './blog/info'},
 { path: '/blog/update', component: './blog/update'},
 { path: '/blog/create', component: './blog/create'},

1
2
3
4

# Beego添加代码

conf/app.conf 增加数据库配置

appname = .
httpport = 8080
runmode = dev

####################MySQL 数据库配置###########################
db_adapter=mysql

# 您的数据库host
db_host="127.0.0.1"

#您的数据库端口
db_port=3306

#您的数据库用户名
db_username="root"

# 您的数据库密码
db_password=""

# utf8或者utf8mb4数据库。如果数据库还没创建，并且账号有创建权限，将自动创建。
db_database="beeblog"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

main.go 注入数据库代码

package main

import (
  _ "github.com/go-sql-driver/mysql"
  _ "beeblog/routers"
  "fmt"
  "github.com/astaxie/beego"
  "github.com/astaxie/beego/orm"
)


func main() {
  dataSource := fmt.Sprintf("%s:%s@tcp(%s:%s)/%s?charset=utf8mb4&parseTime=true&loc=Local", beego.AppConfig.String("db_username"), beego.AppConfig.String("db_password"), beego.AppConfig.String("db_host"), beego.AppConfig.String("db_port"), beego.AppConfig.String("db_database"))
  orm.Debug = true
  err := orm.RegisterDataBase("default", "mysql", dataSource)
  if err != nil {
    panic(err)
  }
  beego.Run()
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 运行

运行Beego bee run
运行Ant cd ant && npm run start

# 访问

访问博客后台 http://127.0.0.1:8000
试试新增、编辑、删除、查看详情、搜索

← API Server 前后端CRUD docker →