luci界面实现web端和移动端的不同风格

最新推荐文章于 2024-06-05 10:26:16 发布

不爱抹茶的海狮

最新推荐文章于 2024-06-05 10:26:16 发布

阅读量1.5k

点赞数 2

分类专栏： OpenWrt

本文链接：https://blog.csdn.net/linux_crazyman/article/details/44774069

版权

OpenWrt 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

luci界面开发中的web端和移动端

为适应不同平台，针对web端和移动端，在不同平台的浏览器输入登录地址后，出现不同的登录界面。

实现步骤：

1.在/www/index.html里做出判断，是web端登录还是移动端登录。代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
<script src="/turbo-static/turbo/web/js/jquery-1.8.1.min.js?v=986"></script> //引入必要的js文件
<script src="/turbo-static/turbo/web/js/jquery.cookie.min.js?v=986"></script>
<script src="/turbo-static/turbo/interface.js?v=986"></script> //引入用来判断平台的js文件
<script language="javascript" type="text/javascript">
format_is_mobile();
if(needJumpMobile()){
window.location.href="/cgi-bin/luci/admin_mobile"; //浏览器根据这里的url去走不同的路径，这里是/admon_mobile
}
else {
window.location.href="/cgi-bin/luci"; //这里luci的开始路径是 /
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OPENWRT</title>
<noscript><meta http-equiv="refresh" content="0; url=/" /></noscript>
</head>
<script type="text/javascript">

</script>
</html>

2.在目录/www/cgi-bin里建立脚本文件 luci

3.在目录controller里建立admin_mobile目录，里面添加index.lua文件（luci开始时自动先到此文件里执行firstchild函数等），内容如下：

参考admin目录下的index.lua文件，做如下修改：

module("luci.controller.admin_mobile.index", package.seeall)

root.target = alias("admin_mobile")

local page = node("admin_mobile")

page.sysauth_authenticator = "htmlauth_mobile"

4.在luci目录下的dispatcher.lua里添加函数htmlauth_mobile,内容如下：

function authenticator.htmlauth_mobile(validator, accs, default)
local user = luci.http.formvalue("username")
local pass = luci.http.formvalue("password")

if user and validator(user, pass) then
return user
end

require("luci.i18n")
require("luci.template")
context.path = {}
luci.template.render("admin_mobile/sysauth", {duser=default, fuser=user})
return false

end

5.自定义lua及htm文件，实现相应的功能。