完成
部署Golnag Gin+MDUI基础环境
用途
为程序做一个UI界面,更加方便的进行操作。为TG-bot带来更加丰富的功能。
使用工具
- MDUI - Material Design 样式的前端框架
- Golang
- 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>
以上就是一个完整的页面所需要的全部内容。你可以自行在其中添加更多组件和内容,来构建一个网站。
Comments NOTHING