components.md

组件开发

---

组件是一个页面UI组件的抽象，包括了html以及其他资源。开发一个组件需要实现以下接口：

type Component interface {
	// GetTemplate 返回了一个golang的模板对象，以及模板名
	GetTemplate() (*template.Template, string)

	// GetAssetList 返回了组件中使用的资源列表，为一个数组。
	// 数组中的资源路径与事实应用的路径对应关系如下：
	//
	// {{.UrlPrefix}}/assets/login/css/bootstrap.min.css => login/css/bootstrap.min.css
	//
	// 例子：
	// https://github.com/GoAdminGroup/go-admin/blob/master/template/login/assets_list.go
	GetAssetList() []string

	// GetAsset 根据提供的资源路径返回资源的内容。
	// 比如：参数为 asset/login/dist/all.min.css，返回对应的css内容。
	//
	// See: http://github.com/jteeuwen/go-bindata
	GetAsset(string) ([]byte, error)

	// GetContent 返回组件渲染后的html
	GetContent() template.HTML

	// IsAPage 返回该组件是否为一个页面
	IsAPage() bool

	// GetName 返回组件名字
	GetName() string
}

假设我们要开发一个MagicBox组件。我们可以新建一个magic_box文件夹，文件夹下新建以下文件：

.
├── assets
│   ├── dist
│   │   └── img
│   └── src
│       ├── img
│       ├── css
│       └── js
├── magic_box.go
└── magic_box.tmpl

tmpl文件编写我们的html文件，assets/src下放我们的前端资源文件，我们会使用到adm工具，将我们的资源文件首先合并，然后编译成go文件，从而可以给我们的MagicBox对象调用。

编写完毕后，我们执行以下命令进行编译：

# 合并js资源
adm combine js --path=./assets/src/js/ --out=./assets/dist/all.min.js
# 合并css资源
adm combine css --path=./assets/src/css/ --out=./assets/dist/all.min.css
# 将dist目录下静态资源编译为一个go文件与一个资源列表文件
adm compile asset --path=./assets/dist/ --out=./ --pa=magic_box

我们在magic_box.go中实现一个组件：

package magic_box

type MagicBox struct {
	Name string
}

func Get() *MagicBox {
	return &MagicBox{
		Name: "magic_box",
	}
}

func (l *MagicBox) GetTemplate() (*template.Template, string) {
	tmpl, err := template.New("magic_box").
		Funcs(DefaultFuncMap).
		Parse(List["magic_box"])

	if err != nil {
		logger.Error("magic box get template error: ", err)
	}

	return tmpl, "magic_box"
}

func (l *MagicBox) GetAssetList() []string               { return AssetList }
func (l *MagicBox) GetAsset(name string) ([]byte, error) { return Asset(name[1:]) }
func (l *MagicBox) GetName() string                      { return "magic_box" }
func (l *MagicBox) IsAPage() bool                        { return false }

func (l *MagicBox) GetContent() template.HTML {
	buffer := new(bytes.Buffer)
	tmpl, defineName := l.GetTemplate()
	err := tmpl.ExecuteTemplate(buffer, defineName, l)
	if err != nil {
		logger.Error("magic box component, compose html error:", err)
	}
	return template.HTML(buffer.String())
}

这里我们就开发完毕了。

接着我们就可以加载该组件进行使用：

package main

import (
	_ "github.com/GoAdminGroup/go-admin/adapter/gin"	    
    _ "github.com/GoAdminGroup/go-admin/adapter/gin"
    _ "github.com/GoAdminGroup/go-admin/modules/db/drivers/mysql"
	
	"github.com/GoAdminGroup/components/login"
	"github.com/GoAdminGroup/go-admin/engine"
	"github.com/GoAdminGroup/go-admin/examples/datamodel"
	"github.com/GoAdminGroup/go-admin/template"
	"github.com/GoAdminGroup/go-admin/plugins/admin"
	"github.com/gin-gonic/gin"
	"io/ioutil"
)

func main() {
	r := gin.Default()

	gin.SetMode(gin.ReleaseMode)
	gin.DefaultWriter = ioutil.Discard

	eng := engine.Default()
	adminPlugin := admin.NewAdmin(datamodel.Generators)
	adminPlugin.AddGenerator("user", datamodel.GetUserTable)
	
	// 在这里进行加载
	template.AddComp(magic_box.Get())

	if err := eng.AddConfigFromJson("./config.json").
		AddPlugins(adminPlugin).
		Use(r); err != nil {
		panic(err)
	}

	// 加载完后，在你的逻辑函数中使用：magic_box.GetContent() 返回内容使用。

	r.Static("/uploads", "./uploads")

	_ = r.Run(":9033")
}