Beego 三分钟做一个前后端系统,bee 做到了

wbofeng for beego · 2020年07月22日 · 最后由 caoayu 回复于 2020年09月07日 · 3974 次阅读
本帖已被设为精华帖!

前言

前不久,我们宣布了 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/

微信群:

钉钉群:

更多原创文章干货分享,请关注公众号
  • 加微信实战群请加微信(注明:实战群):gocnio
astaxie 将本帖设为了精华贴 07月22日 10:16
keke001 GoCN 每日新闻 (2020-07-23) 中提及了此贴 07月23日 10:18

看起来很吊的样子

脚手架 方便快捷👍 不过如果封装的太完全 可能会导致自行修改的灵活度会下降,还是需要把整个原来弄懂

后面会实际用户 角色 权限吗

还请问 1.3 在哪里……

只能用 mysql 么

二维码失效

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册