niuhe插件, 在 go 中渲染网页内容

news2025/7/18 19:41:21

思路

niuhe 插件生成的 go 代码是基于 github.com/ma-guo/niuhe 库进行组织管理的, niuhe 库是对 go gin 库的一个封装，因此要显示网页, 可通过给 gin.Engine 指定 HTMLRender 来实现。

实现

HTMLRender 我们使用 gitee.com/cnmade/pongo2gin 实现

1. main.go 中指定 HTMLRender

在 RegisterModules 中指定 HTMLRender

func (baseBoot) RegisterModules(svr *niuhe.Server) {
	svr.RegisterModule(apiViews.GetModule())
	svr.GetGinEngine().HTMLRender = pongo2gin.Default() // pongo2gin 在下面定义
	svr.GetGinEngine().Static("/static", "static") // 指定静态路径映射位置
}

示例代码: https://github.com/ma-guo/niuhe-mdbook/blob/main/src/demo/main.go

2. 在代码中引入 .html

在 all.niuhe 中定义 api GET('网页示例', '/api/hellow/web/'), 在 hellow.go 文件夹内实现以下代码:

// 网页示例
func (v *Hellow) Web_GET(c *niuhe.Context) {
	// 在此实现具体方法, 需要自行处理请求参数和返回数据
	// 这里会在 templates 文件夹下查找 index.html 文件
	c.HTML(http.StatusOK, "index.html", pongo2.Context{ 
		"title":   "网页 title",
		"message": "这是一条消息",
	})
}

参考代码: https://github.com/ma-guo/niuhe-mdbook/blob/main/src/demo/app/api/views/hellow_views.go

这里 index.html 代码为：

<!DOCTYPE html>
<html>
    <head>
        <title>{{title}}</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
        <link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css">
    </head>
    <body>
        <div class="weui_msg">
            <div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div>
            <div class="weui_text_area">
				<h4 class="weui_msg_title">{{message}}</h4>
			</div>
        </div>
    </body>
</html>