百度360必应搜狗淘宝本站头条
分布式事务框架shiro框架java日志框架框架图cad怎么画框架
当前位置：网站首页 > 技术文章 > 正文

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

ccwgpt 2025-05-25 11:14 1 浏览 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地址：关注后私信我发你

相关推荐

Dubbo最全详解(万字图文总结)

大家好，我是mikechen。Dubbo是非常重要的分布式中间件，也是微服务的核心框架，而且大厂也特别喜欢考察Dubbo，下面我就全面来详解Dubbo@mikechen本篇已收于mikechen原创超...

探秘Dubbo:RPC框架的奇妙世界

探秘Dubbo：RPC框架的奇妙世界大家好啊！今天我要带大家走进一个神奇的编程领域——分布式服务调用。说起分布式系统，很多程序员都头疼不已。但今天咱们不谈那些让人抓狂的网络延迟、负载均衡等问题，而是聚...

Dubbo分布式服务框架:像调教宠物一样驾驭它

Dubbo分布式服务框架：像调教宠物一样驾驭它大家好呀，今天我们来聊聊Dubbo这个分布式服务框架，它就像一只温顺的小猫咪，但有时候也会调皮捣蛋，所以得好好调教一番。别担心，我会用最轻松的方式来帮你搞...

深入浅出:Dubbo框架源码分析

深入浅出：Dubbo框架源码分析Dubbo是一款由阿里巴巴开源的高性能分布式服务框架，广泛应用于微服务架构中。它为开发者提供了强大的RPC调用能力，使得分布式系统中的服务间通信变得简单高效。本文...

Dubbo分布式服务框架:从零开始的实战之旅

Dubbo分布式服务框架：从零开始的实战之旅Dubbo作为一个高性能的JavaRPC框架，在微服务架构中扮演着重要角色。它能帮助开发者轻松构建分布式系统，实现服务间的高效通信。今天，我们就来一起探索...

Dubbo分布式服务框架的工作原理:从入门到精通

Dubbo分布式服务框架的工作原理：从入门到精通Dubbo是一个高性能的Java分布式服务框架，由阿里巴巴开源。它致力于提供透明化的远程方法调用（RPC），使得开发者能够像调用本地服务一样调用远程服务...

框架的本质分析——Dubbo

诞生的背景什么背景下诞生了该技术？不论是哪个框架，不会平白无故诞生，不会平白无故的被人所追捧，了解其背景，追根溯源。随着互联网的发展，网站应用的规模不断扩大，常规的垂直应用架构已无法应对，分布式服务架...

2023编导艺考「热点话题」评述框架示例(七个2022热点)

2022冬奥会开幕式(1)“旧”文化符号的“新”应用(2)“全媒体”时代的“小人物”(3)“简约”的形式表达“丰富”的内核(4)“新”叙事结构打破“旧”国家形象(5)数字媒介增强受众“在场感”短视频“...

84页思考的框架，思维模型的全明星集合，9种经典思维模型

分享职场干货，提升能力！为职场精英打造个人知识体系，升职加薪！84页思考的框架如何拿到分享的源文件：请您关注、转发，然后私信本头条号“文米”2个字，按照操作流程，专人负责发送源文件给您。...

DUSt3R-从任意图像集合中重建3D场景的框架

DUSt3R是什么DUSt3R(DenseandUnconstrainedStereo3DReconstruction，密集无约束立体三维重建)是由来自芬兰阿尔托大学和Naver欧洲实验室的...

高考数学:一张思维导图掌握集合知识点，真题解析巩固知识

一、思维导图二、疑难透析三、题型示例1、已知集合A={1，3}，B={x丨mx-3=0}，且A∪B=A，则m的取值是（）。【解析】分类讨论思想∵AUB=A∴BA（1）当m=0时，B=，符合条件；...

java集合框架03——ArrayList和源码分析

上一章学习了Collection的架构，并阅读了部分源码，这一章开始，我们将对Collection的具体实现进行详细学习。首先学习List。而ArrayList又是List中最为常用的，因此本章先学习...

Java Collections 工具类集合框架中常用算法解析

在软件开发中，算法是非常重要的一部分，它们可以提供高效的数据处理和操作。在Java集合框架中，有几个常用的算法，包括排序算法、二分查找算法、洗牌算法和旋转算法。本文将对这些算法进行详细解析，并写了一些...

1.6、Java 异常处理机制与集合框架(List、Set、Map等)

在Java编程中，异常处理机制和集合框架是两个非常重要的概念。前者帮助开发者处理程序运行时可能遇到的错误，确保程序能够稳定运行；后者则提供了一种有效的方式来管理和操作数据集合。本文将分别介绍Java中...

Java集合框架性能优化秘籍

Java集合框架性能优化秘籍在Java的世界里，集合框架就像一座巨大的宝库，存储着我们程序的各种数据。然而，随着数据量的增大，如何让这座宝库更高效地运作，就成了我们必须掌握的艺术。今天，我们就来聊聊J...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表