三分鐘做一個前後端系統，bee 做到了

前言

前不久，我們宣佈了 beego 再出發，要為大家帶來更好用，功能更多的 beego。我們要做的不只是 beego 本身的重構，還有 beego 周邊生態的完善。

眾所周知，beego 是用來構建 go 應用的開源框架，那麼 go 應用有了，相應的管理後臺怎麼辦，怎麼才能只用簡單的配置快速的搭建出一套完整的前後端程式碼，從而解放程式設計師於 crud 之中呢？

bee 1.3

它來了它來了，它帶著大家的福音走來了，經過社群內同學日以繼夜的努力，bee 1.3 正式釋出了，為什麼說它帶來了福音，是因為這個版本新加的命令 bee pro gen，下面就著重介紹一下這個命令都能做什麼。

bee pro gen

上面也提到了，crud 是很多人繞不過的坎，並不是說它有多困難，而是大量的重複工作會讓很多人不勝其煩，beego 社群的同學考慮到了這個問題，所以在 bee 的新版本里推出了這個命令，簡單來說，就是可以使用官方提供的配置模版，或者個性化定製的模版，通過這個命令快速的構建出 crud 程式碼，從而節省大量的時間。

你以為這就完了？ 不不不，在構建出 crud 程式碼的同時，我們還可以生成相應的管理後臺，資料庫，並且自動打通前後端，讓你可以直接在管理後臺體驗 crud 的功能。

到這裡如果還覺得不過癮，我們還提供了 Docker 環境的例項，可以幾分鐘之內飛速部署，快速體驗 bee pro gen 帶來的舒爽體驗。

快速體驗

建立專案

• 更新 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"

• 注入靈魂，執行生成指令碼， 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: { '^': '' },
    },
  },
};

• 在 ./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'},

新增 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"

• 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()
}

執行專案

• 執行 Beego bee run 
• 執行 Ant cd ant && npm run start 

最後說幾句

看了上面簡單的幾步操作就執行出來的前後端專案，同學們有沒有心動，心動不如行動，快去體驗一下 bee 新版本帶來的便利吧。這裡附上操作的視訊講解：https://www.bilibili.com/video/BV1ik4y1B74G/，如果想看更詳細的介紹也可以點選下方官方文件的連結。 後續我們計劃把 Charts，地圖等元件也納入進來，全力輔助小夥伴們愉快的擼碼。同時也歡迎各位小夥伴來充實 bee gen pro 的配置模版，多多提 pr，幫助我們把 beego 生態維護的更好。Beego 社群歡迎各位的加入。

專案地址：https://github.com/beego/bee

官方文件：http://beego.top/bee/

微信群：

釘釘群：