近日有个想法，之前写的命令行工具在使用中逐渐发现交互方式过于原始，自己用的很爽，但是给项目组其他同事使用时就捉襟见肘，于是想给工具加个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服务端代码示例
由于实现非常简单，更多玩法待各位开发，欢迎交流~
本文内容来自网友供稿，文章观点仅代表作者本人，本站非盈利且无偿提供信息存储空间服务，不拥有所有权，如有文章有不实信息或侵犯了您的权益，请发送邮件至 cfseo1997@163.com 反馈核实，如需转载请注明出处：https://www.taobobolive.com/236626.html
