编程技术分享平台

网站首页 > 技术教程 正文

Go + Amis 快速搭建建议动态网站

xnh888 2024-12-03 19:12:16 技术教程 24 ℃ 0 评论

近日有个想法，之前写的命令行工具在使用中逐渐发现交互方式过于原始，自己用的很爽，但是给项目组其他同事使用时就捉襟见肘，于是想给工具加个UI界面。

结合自己的技术栈，我更希望工具直接用之前的golang代码，同时有以下几个诉求：

  1. 使用golang开发
  2. 足够轻量
  3. 学习实现成本低
  4. 跨平台，至少支持 arm&x86平台，至少支持windows、linux、macOS

调研了现在的golang客户端UI库，主要有两类选择，一种是类似qt、gotk3类型的客户端UI库，另一种是使用webview，支持css+html+js实现UI方案，经过挑选之后，主要就几个方案：

  1. golang + go-astilectron
  2. golang + qt
  3. 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)
}


由于实现非常简单，更多玩法待各位开发，欢迎交流~

附录：

Demo地址：关注后私信我发你

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.