Gin 渲染模板的方式
方式1：Go 标准库 “html/template”， template.ParseFiles()
方式2：“github.com/gin-gonic/gin”，gin.HTML()
一、Go 标准库 “html/template”
直接加载 login/inex.html
Handler.go
// GetIndex
// @Tags 首页
// @contact.name Allan
// @Success 200 {string} 首页
// @Router /index [get]
func (app *Config) GetIndex(c *gin.Context) {idx, err := template.ParseFiles("login/index.html")if err != nil {panic(err)}idx.Execute(c.Writer, "首页")
}login/index.html
<!DOCTYPE html>
<html class="ui-page-login"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title></title><link href="asset/login/css/mui.min.css" rel="stylesheet" /><link href="asset/login/css/style.css" rel="stylesheet" /><style>.area {margin: 20px auto 0px auto;}.mui-input-group {margin-top: 10px;}.mui-input-group:first-child {margin-top: 20px;}.mui-input-group label {width: 22%;}.mui-input-row label~input,.mui-input-row label~select,.mui-input-row label~textarea {width: 78%;}.mui-checkbox input[type=checkbox],.mui-radio input[type=radio] {top: 6px;}.mui-content-padded {margin-top: 25px;}.mui-btn {padding: 10px;}.link-area {display: block;margin-top: 25px;text-align: center;}.spliter {color: #bbb;padding: 0px 8px;}.oauth-area {position: absolute;bottom: 20px;left: 0px;text-align: center;width: 100%;padding: 0px;margin: 0px;}.oauth-area .oauth-btn {display: inline-block;width: 50px;height: 50px;background-size: 30px 30px;background-position: center center;background-repeat: no-repeat;margin: 0px 20px;/*-webkit-filter: grayscale(100%); */border: solid 1px #ddd;border-radius: 25px;}.oauth-area .oauth-btn:active {border: solid 1px #aaa;}.oauth-area .oauth-btn.disabled {background-color: #ddd;}</style></head><body><header class="mui-bar mui-bar-nav"><h1 class="mui-title">登录</h1></header><div class="mui-content"><form id='login-form' class="mui-input-group"><div class="mui-input-row"><label>账号</label><input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号"></div><div class="mui-input-row"><label>密码</label><input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码" autocomplete></div></form><form class="mui-input-group"><ul class="mui-table-view mui-table-view-chevron"><li class="mui-table-view-cell">自动登录<div id="autoLogin" class="mui-switch"><div class="mui-switch-handle"></div></div></li></ul></form><div class="mui-content-padded"><button id='login' type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button><div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a></div></div><div class="mui-content-padded oauth-area"></div></div><script src="asset/login/js/mui.min.js"></script><script src="asset/login/js/mui.enterfocus.js"></script><script src="asset/login/js/app.js"></script><script>(function($, doc) {var url;app.loadJSON('asset/login/url.json', function(res){if (res){url = res}});var settings = app.getSettings();var state = app.getState();let loginButton = doc.getElementById('login');let accountBox = doc.getElementById('account');let passwordBox = doc.getElementById('password');let autoLoginButton = doc.getElementById("autoLogin");let regButton = doc.getElementById('reg');let forgetButton = doc.getElementById('forgetPassword');loginButton.addEventListener('tap', function(event) {var loginInfo = {account: accountBox.value,password: passwordBox.value};app.login(loginInfo, function(err) {if (err) {$.toast(err)return;}$.toast("登录成功，即将跳转")var state = app.getState();userInfo(state)userId(state.userId)var url = `/chatRoom?userId=${state.userId}&token=${state.token}`location.href = url});});$.enterfocus('#login-form input', function() {$.trigger(loginButton, 'tap');});autoLoginButton.classList[settings.autoLogin ? 'add' : 'remove']('mui-active')autoLoginButton.addEventListener('toggle', function(event) {setTimeout(function() {var isActive = event.detail.isActive;settings.autoLogin = isActive;app.setSettings(settings);}, 50);}, false);regButton.addEventListener('tap', function(event) {$.openWindow({url: '/register',id: 'reg',preload: true,show: {aniShow: 'pop-in'},styles: {popGesture: 'hide'},waiting: {autoShow: false}});}, false);forgetButton.addEventListener('tap', function(event) {$.openWindow({url: '/forgetPassword',id: 'forget_password',preload: true,show: {aniShow: 'pop-in'},styles: {popGesture: 'hide'},waiting: {autoShow: false}});}, false);//window.addEventListener('resize', function() {oauthArea.style.display = document.body.clientHeight > 400 ? 'block' : 'none';}, false);//var backButtonPress = 0;$.back = function(event) {backButtonPress++;if (backButtonPress > 1) {plus.runtime.quit();} else {plus.nativeUI.toast('再按一次退出应用');}setTimeout(function() {backButtonPress = 0;}, 1000);return false;};function userId(userid){if(typeof userid =="undefined"){var r = sessionStorage.getItem("userid");if(!r){return 0;}else{return parseInt(r)}}else{sessionStorage.setItem("userid",userid);}}function userInfo(o){if(typeof o =="undefined"){var r = sessionStorage.getItem("userinfo");if(!!r){return JSON.parse(r);}else{return null}}else{sessionStorage.setItem("userinfo",JSON.stringify(o));}}}(mui, document));</script></body></html>二、“github.com/gin-gonic/gin”
c.HTML中的name必须与引用的tmpl文件内define定义的一致，直接使用chat/index.html不会加载内容。
Handler.go
// Chat
// @Tags 聊天
// @Description 聊天室
// @param userId query string false "用户ID"
// @param token query string false "Token"
// @contact.name Allan
// @Success 200 {string} success
// @Router /Chat [get]
func (app *Config) ChatRoom(c *gin.Context) {session:= sessions.Default(c)userId, _ := strconv.Atoi(c.Query("userId"))token := c.Query("token")if token != session.Get("loginToken") {c.JSON(-1, gin.H{"code": -1,"message": "鉴权失败！",})return}user := models.User{}user.ID = uint(userId)user.Identity = tokenc.HTML(http.StatusOK, "/chat/index.shtml", gin.H{"code": 0,"message": "success",})
}
chat/index.html
{{define "/chat/index.shtml"}}
<!DOCTYPE html>
<html>
<head>
<!--js include-->
{{template "/chat/head.shtml"}}
</head>
<body>
<header class="mui-bar mui-bar-nav">
</header>
<div class="mui-content" id="pageapp"><!--联系人-->{{template "/chat/concat.shtml"}}<!--群聊-->{{template "/chat/group.shtml"}}<!--个人中心-->{{template "/chat/profile.shtml"}}<!--聊天主界面-->{{template "/chat/main.shtml"}}<!--底部菜单-->{{template "/chat/tabmenu.shtml"}}
</div>
</body>
</html>
{{template "/chat/foot.shtml"}}
{{end}}