hotspot模板制作教程【1】
本帖最后由 打酱油 于 2014-8-9 23:28 编辑承蒙大家支持，希望通过个人的一点知识分享，让ros 热点认证这个生态圈做得更好。感谢大猫猫一直的帮助！
函数：
所有$()这样的函数都是ROS私有函数。ROS会在加载页面的时候将这些函数解析出来，直接放到页面是无法解析的。
这里可以通过html注视代码注视掉，不会影响ros解析他私有函数，保证了页面预览的完整性。
隐藏函数：
学过编程的人都知道判断语句，ros也不例外，他也支持判断语句，只是官方和默认的模板页面都没有栗子！
下面给大家介绍一个比较简单的隐藏函数，else，在任何编程语言里都是“则”的意思。
栗子：
$(if chap-id)
开启chap验证的页面加载的代码
$(else)
非chap验证页面加载的代码
$(endif)
通过上面这个栗子，可以衍生出很多东西。。。。这里就不一一举栗子了。只要你心细多玩玩就知道ros hotspot多么强大了。
下面我们来介绍默认模板登录流程。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>internet hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<style type="text/css">
body {color: #737373; font-size: 10px; font-family: verdana;}
textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
</style>
</head>
<body>
$(if chap-id)
<form name="sendin" action="$(link-login-only)" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
</form>
<script type="text/javascript" src="/md5.js"></script>
<script type="text/javascript">
<!--
function doLogin() {
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('$(chap-id)' + document.login.password.value + '$(chap-challenge)');
document.sendin.submit();
return false;
}
//-->
</script>
$(endif)
<!--
登录框看了看这。。。
第31-49行是开启chap md5加密验证登录后的代码。。。
首先21-37行是html表单，这些表单的输入框都是隐藏的type="hidden"
然后是引用了md5.js文件
42行就是下面表单onSubmit的代码了。如果开启md5验证后，他不会直接get提交给ros，会先把帐号放到隐藏的表单里，上面哦。
把密码加随机字段后放到隐藏表单。
然后模拟提交隐藏表单。
这样就区分出来了chap和pap登录了。
//-->
<div align="center">
<a href="$(link-login-only)?target=lv&dst=$(link-orig-esc)">Latviski</a>
</div>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div class="notice" style="color: #c1c1c1; font-size: 9px">Please log on to use the internet hotspot service<br />$(if trial == 'yes')Free trial available, <a style="color: #FF8080"href="$(link-login-only)?dst=$(link-orig-esc)&username=T-$(mac-esc)">click here</a>.$(endif)</div><br />
<!-- 上面这一行作用是判断是否开启体验，试用只要看函数就好了，开头判断$(if trial == 'yes')，div结束前，判断结束，如果没有开启试用，那这个就不会出现在页面了 //-->
<table width="280" height="280" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<form name="login" action="$(link-login-only)" method="post"
$(if chap-id) $(endif)>
<!-- 上面的form头，也有一句判断，如果chap也就是md5加密验证登录是否开启如果开启onSubmit就起作用了，请看上面。。。51行 //-->
<input type="hidden" name="dst" value="$(link-orig)" />
<input type="hidden" name="popup" value="true" />
<!-- 2个隐藏的输入框哦。。。dst，访问前的网页，popup，是否新窗口弹出DST。。（大猫猫修正） //-->
<table width="100" style="background-color: #ffffff">
<tr><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="$(username)"/></td>
</tr>
<tr><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password"/></td>
</tr>
<tr><td> </td>
<td><input type="submit" value="OK" /></td>
</tr>
</table>
</form>
</td>
</tr>
<tr><td align="center"><a href="http://www.mikrotik.com" target="_blank" style="border: none;"><img src="img/logobottom.png" alt="mikrotik" /></a></td></tr>
</table>
<br /><div style="color: #c1c1c1; font-size: 9px">Powered by MikroTik RouterOS</div>
$(if error)<br /><div style="color: #FF8080; font-size: 9px">$(error)</div>$(endif)
<!-- 这里很明显，error信息的提示。。。 //-->
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//获得焦点后~~~具体他想干嘛。。。我也不知道
//-->
</script>
</body>
</html>
未完待续。。。
如果需要定制模板，欢迎PM！
如果有什么疑问，回帖，有时间我会来回复的。。。
AD一下。
ROS Hotspot 云认证交流群：http://jq.qq.com/?_wv=1027&k=MogxhYOS
好东西。。。。 支持原创，好帖收藏 啦啦啦啦啦，赞 学习了........... 感觉很不错的样子 先收藏了还在学习中。 未完待续。。。:( ddddddddddddddddd 学习了 感谢分享
页:
[1]