# 前后端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
  • 试试新增、编辑、删除、查看详情、搜索