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

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

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

相关推荐

用Steam启动Epic游戏会更快吗?（epic怎么用steam启动）

Epic商店很香，但也有不少抱怨，其中一条是启动游戏太慢。那么，如果让Steam启动Epic游戏，会不会速度更快？众所周知，Steam可以启动非Steam游戏，方法是在客户端左下方点击“添加游戏”，然...

Docker看这一篇入门就够了（dockerl）

安装DockerLinux:$curl-fsSLhttps://get.docker.com-oget-docker.sh$sudoshget-docker.sh注意：如果安装了旧版...

AYUI 炫丽PC开发UI框架2016年6月15日对外免费开发使用 [1]

2016年6月15日，我AY对外发布AYUI（WPF4.0开发）的UI框架，开发时候，你可以无任何影响的去开发PC电脑上的软件exe程序。AYUI兼容XP操作系统，在Win7/8/8.1/10上都顺利...

别再说C#/C++套壳方案多了!Tauri这“借壳生蛋”你可能没看懂!

浏览器套壳方案，C#和C++有更多，你说的没错，从数量和历史积淀来看，C#和C++确实有不少方式来套壳浏览器，让Web内容在桌面应用里跑起来。但咱们得把这套壳二字掰扯清楚，因为这里面学问可大了！不同的...

OneCode 核心概念解析——Page(页面)

在接触到OneCode最先接触到的就是，Page页面，在低代码引擎中，页面（Page）设计的灵活性是平衡“快速开发”与“复杂需求适配”的关键。以下从架构设计、组件系统、配置能力等维度，解析确...

React是最后的前端框架吗，为什么这么说的?

油管上有一位叫Theo的博主说，React是终极前端框架，为什么这么说呢？让我们来看看其逻辑：这个标题看起来像假的，对吧？React之后明明有无数新框架诞生，凭什么说它是最后一个？我说的“最后一个”不...

面试辅导(二):2025前端面试密码:用3个底层逻辑征服技术官

面试官放下简历，手指在桌上敲了三下："你上次解决的技术难题，现在回头看有什么不足？"眼前的候选人瞬间僵住——这是上周真实发生在蚂蚁金服终面的场景。2025年的前端战场早已不是框架熟练...

前端新星崛起!Astro框架能否终结React的霸主地位?

引言：当"背着背包的全能选手"遇上"轻装上阵的短跑冠军"如果你是一名前端开发者，2024年的框架之争绝对让你眼花缭乱——一边是React这位"背着全家桶的全能选...

基于函数计算的 BFF 架构（基于函数计算的 bff 架构是什么）

什么是BFFBFF全称是BackendsForFrontends(服务于前端的后端)，起源于2015年SamNewman一篇博客文章《Pattern:BackendsFor...

谷歌 Prompt Engineering 白皮书:2025年 AI 提示词工程的 10 个技巧

在AI技术飞速发展的当下，如何更高效地与大语言模型（LLM）沟通，以获取更准确、更有价值的输出，成为了一个备受关注的问题。谷歌最新发布的《PromptEngineering》白皮书，为这一问题提供了...

光的艺术:灯具创意设计（灯光艺术作品展示）

本文转自|艺术与设计微信号|artdesign_org_cn“光”是文明的起源，是思维的开端，同样也是人类睁眼的开始。每个人在出生一刻，便接受了光的照耀和洗礼。远古时候，人们将光奉为神明，用火来...

MoE模型已成新风口，AI基础设施竞速升级

机器之心报道编辑：Panda因为基准测试成绩与实际表现相差较大，近期开源的Llama4系列模型正陷入争议的漩涡之中，但有一点却毫无疑问：MoE（混合专家）定然是未来AI大模型的主流范式之一。...

Meta Spatial SDK重大改进:重塑Horizon OS应用开发格局

由文心大模型生成的文章摘要Meta持续深耕SpatialSDK技术生态，提供开自去年9月正式推出以来，Meta持续深耕其SpatialSDK技术生态，通过一系列重大迭代与功能增强，不断革新H...

&quot;上云&quot;到底是个啥?用&quot;租房&quot;给你讲明白IaaS/PaaS/SaaS的区别

半夜三点被机房报警电话惊醒，顶着黑眼圈排查服务器故障——这是十年前互联网公司运维的日常。而现在，程序员小王正敷着面膜刷剧，因为公司的系统全"搬"到了云上。"部署到云上"...

php宝塔搭建部署thinkphp机械设备响应式企业网站php源码

大家好啊，欢迎来到web测评。本期给大家带来一套php开发的机械设备响应式企业网站php源码，上次是谁要的系统项目啊，帮你找到了，还说不会搭建，让我帮忙录制一期教程，趁着今天有空，简单的录制测试了一下...

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

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