找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 9681|回复: 8

[Hotspot] hotspot模板制作教程【1】

[复制链接]
发表于 2014-8-9 23:09:34 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

×
本帖最后由 打酱油 于 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

评分

参与人数 2铜板 +42 收起 理由
YAWPYNG + 30 赞一个!
9939781 + 12 支持原创

查看全部评分

routeros
发表于 2014-8-10 08:48:58 | 显示全部楼层
支持原创,好帖收藏
routeros
回复

使用道具 举报

发表于 2014-8-12 13:45:44 | 显示全部楼层
啦啦啦啦啦,赞
routeros
回复

使用道具 举报

发表于 2014-11-28 16:47:10 | 显示全部楼层
感觉很不错的样子 先收藏了还在学习中。
routeros
回复

使用道具 举报

发表于 2014-12-3 22:56:00 | 显示全部楼层
ddddddddddddddddd
routeros
回复

使用道具 举报

发表于 2016-1-11 15:12:30 | 显示全部楼层
学习了 感谢分享
routeros
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|手机版|小黑屋|软路由 ( 渝ICP备15001194号-1|渝公网安备 50011602500124号 )

GMT+8, 2024-5-3 15:18 , Processed in 0.281343 second(s), 5 queries , Gzip On, Redis On.

Powered by Discuz! X3.5 Licensed

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表