一起来使用MDUI为Golang做个界面吧!🤗1

发布于 2022-05-02  1036 次阅读


完成

部署Golnag Gin+MDUI基础环境

用途

为程序做一个UI界面,更加方便的进行操作。为TG-bot带来更加丰富的功能。

使用工具

  1. MDUI - Material Design 样式的前端框架
  2. Golang
  3. Golang Gin框架

开始吧

使用Gin来快速部署一个WEB应用吧

打开codeserver,创建一个项目,新建一个 main.go ,在终端初始化一下,如果出问题,请执行

export GO111MODULE=on

go mod init webdemo

在终端中安装Golang Gin框架

go get -u github.com/gin-gonic/gin

参照Gin官方手册写一个HTML 渲染

这里我把端口改成了18080

使用 LoadHTMLGlob() 或者 LoadHTMLFiles()

修改main.go为

package main

import (
    "net/http"
    "github.com/gin-gonic/gin"
)

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("templates/*")
	//router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")
	router.GET("/index", func(c *gin.Context) {
		c.HTML(http.StatusOK, "index.tmpl", gin.H{
			"title": "Main website",
		})
	})
	router.Run(":18080")
}

创建templates/index.tmpl

<html>
	<h1>
		{{ .title }}
	</h1>
</html>

然后我们按一下F5运行,过一下打开 ip:18080/index 应该就有效果了

现在我们将MDUI插入 templates/index.tmpl 试一下吧

最简单的页面模板

请确保你的页面遵循了最新的设计和开发标准。即使用 HTML5 doctype 并包含 viewport meta 标签以支持响应式。所以你的页面应该是这样的:

<!doctype html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"/>
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    <!-- MDUI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/mdui.min.css"/>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- MDUI JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/mdui.min.js"></script>
  </body>
</html>

以上就是一个完整的页面所需要的全部内容。你可以自行在其中添加更多组件和内容,来构建一个网站。

打开 ip:18080/index

届ける言葉を今は育ててる
最后更新于 2022-05-02