近日有个想法，之前写的命令行工具在使用中逐渐发现交互方式过于原始，自己用的很爽，但是给项目组其他同事使用时就捉襟见肘，于是想给工具加个UI界面。
结合自己的技术栈，我更希望工具直接用之前的golang代码，同时有以下几个诉求：
- 使用golang开发
- 足够轻量
- 学习实现成本低
- 跨平台，至少支持 arm&x86平台，至少支持windows、linux、macOS
调研了现在的golang客户端UI库，主要有两类选择，一种是类似qt、gotk3类型的客户端UI库，另一种是使用webview，支持css+html+js实现UI方案，经过挑选之后，主要就几个方案：
- golang + go-astilectron
- golang + qt
- golang + amis
由于不需要考虑 安卓 & ios等移动平台，也不需要复杂的UI页面特效，最终这里选择了 golang + amis, 其中amis是百度的低代码解决方案，可以使用json轻松编辑页面，对于本人常年浸淫在纯后端开发的工程师而言，会更简单。
先看最终效果：
示例
使用方式：在命令行执行命令后自动打开浏览器，自动跳转到工具web页面首页。
工程示例
其中redis-data-helper目录下就是工具的所有代码，amis.tmpl文件为首页模板，通过渲染index.json的配置初始化页面。其余每个json文件对应一个组件。整个项目为单页应用。
最终工具会将所有json文件&tmpl模板文件 go embed到编译产物中，使用工具的同学完全不用关心环境搭建等麻烦问题。
详细教程：
首先创建一个模板文件amis.tmpl
<!DOCTYPE html><html lang="zh-hans"><head> <meta charset="UTF-8"/> <title>goAmis</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amis@1.2.3/sdk/sdk.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amis@1.2.3/sdk/helper.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/amis@1.2.3/sdk/iconfont.css"/> <script src="https://cdn.jsdelivr.net/npm/amis@1.2.3/sdk/sdk.js"></script> <style> html, body, .app-wrapper { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } </style></head><body><div id="root" class="app-wrapper"></div><script type="text/javascript"> (function () { const amis = amisRequire('amis/embed'); const amisJSON = { "type": "page", "toolbar": [ { "type": "button", "label": "获取当前页面配置", // "confirmText": "是否跳转获取页面的配置 ？", "url": "{{ .getConfigAddr }}", "actionType": "url" } ], "body": [ { type: "service", schemaApi: "{{ .pageSchemaApi }}" } ] }; amis.embed('#root', amisJSON, {}, {}); })();</script></body></html>说明：
{{ .getConfigAddr }} & {{ .pageSchemaApi }} 会在页面返回之前将数据渲染进去返回给浏览器，这两个变量最终指向的是页面的布局json文件，index.json
下面看index.json文件实现：
{ "type": "page", "body": [ { "type": "alert", "body": [ { "type": "tpl", "tpl": " Lwp-Postman 是由 <a href=\"#\">小飞</a> 基于 <a target=\"_blank\" href=\"https://baidu.github.io/amis/zh-CN/docs/index\">Amis</a> + Golang 搭建的多功能服务工具", "inline": false, "wrapperComponent": "div" } ], "level": "success" }, { "type": "divider" }, { "type": "tabs", "mode": "vertical", "tabs": [ { "title": "文件服务", "type": "service", "schemaApi": "GET: /config/get/media_id" }, { "title": "文件上传", "type": "service", "schemaApi": "GET: /config/get/file_upload" }, { "title": "Location", "type": "service", "schemaApi": "GET: /config/get/location" }, { "title": "Lwp请求模拟", "type": "service", "schemaApi": "GET: /config/get/media_id" }, { "title": "更多", "type": "service", "schemaApi": "GET: /config/get/media_id" } ] } ], "regions": [ "body" ], "messages": {}, "className": "r b-a b-2x"}说明：go服务端要实现 http接口，处理 `/config/get/media_id` 请求。
go服务端代码示例：
golang + gin框架
func main() { initBoltDB() tmplFs, err := fs.Sub(systemStatic, "static") if err != nil { log.Fatalln(err) return } tmpl, err := template.ParseFS(tmplFs, "*.tmpl") if err != nil { log.Fatalln(err) return } port := os.Getenv("PORT") if port == "" { port = defaultPort } engine := gin.Default() engine.SetHTMLTemplate(tmpl) // 首页直接跳转到默认页面 engine.GET("/", func(c *gin.Context) { c.Redirect(http.StatusPermanentRedirect, "/page/"+defaultIndex) }) engine.GET("/page/:name", renderPage) // 页面配置 engine.GET("/config/list", listConfig) engine.GET("/config/get/:name", getConfig) engine.GET("/config/delete/:name", deleteConfig) engine.POST("/config/save", saveConfig) engine.POST("/file/media_id/decode", func(context *gin.Context) { log.Printf("form:%v", context.Request.Form) //{"status":0,"msg":"保存成功","data":{"id":1}} context.JSON(http.StatusOK, map[string]interface{}{ "status": 0, "msg": "提交", "data": map[string]interface{}{ "id": "hello fayren", }, }) }) go func() { if err := engine.Run(":" + port); err != nil { log.Fatalln(err) return } }() Open("http://localhost/page/index") select {}}func renderPage(c *gin.Context) { name := c.Param("name") if name == "" { name = "404" } c.HTML(http.StatusOK, "amis.tmpl", gin.H{ "pageTitle": name, "asideSchemaApi": "GET:/config/get/aside", "pageSchemaApi": "GET:/config/get/" + name, "getConfigAddr": "/config/get/" + name, })}func listConfig(c *gin.Context) { var pages []*pageItem if err := boltDB.View(func(tx *bolt.Tx) error { bucket := tx.Bucket(defaultBucket) return bucket.ForEach(func(k, v []byte) error { pages = append(pages, &pageItem{Name: string(k), Config: string(v)}) return nil }) }); err != nil { c.AbortWithStatusJSON(http.StatusOK, &basicResp{Status: -1, Msg: err.Error()}) return } c.JSON(http.StatusOK, &basicResp{Status: 0, Data: map[string]interface{}{ "items": pages, "total": len(pages), }})}func getConfig(c *gin.Context) { var name = c.Param("name") if name == "" { c.AbortWithStatusJSON(http.StatusOK, &basicResp{Status: -1, Msg: "name is empty"}) return } var pageData []byte _ = boltDB.View(func(tx *bolt.Tx) error { bucket := tx.Bucket(defaultBucket) pageData = bucket.Get([]byte(name)) return nil }) // 404 if len(pageData) == 0 { pageData = page404Data } c.Data(http.StatusOK, "application/json", pageData)}go服务端代码示例
由于实现非常简单，更多玩法待各位开发，欢迎交流~
附录：
Demo地址：关注后私信我发你
版权声明：内容来源于互联网和用户投稿 如有侵权请联系删除