极客观点
项目管理
HarmonyOS
叙述
首先我介绍下自己,我是一个业余的自学前端和后端的初学者,基础知识都学了点,想做个前端类似小工具的东西,有一个页面架构搭建以及页面的跳转难倒了我.
问题:
我用的是bootstrap框架搭建UI的,因为作为小工具网页的页面,header和footer的页面一般都是复用或者是引用一个页面的或者是一个文件(不知道这么说对不对),而需要改变的只是面板区域,也就是工具栏的区域.我该如何设计代码来实现,最原始的想法是在每一个工具栏的页面都添加header和footer,后来想了下这样显然是多此一举,这些header和footer都是可以复用的,我就是不知道该如何复用header和footer所以前来请教问题的,找了一些开源项目,也没找到问题的答案,所以来此希望能得到帮助.看完index.php里的代码,你会觉得是一个糟糕的代码 :(
效果截图(类似这种排版,带导航栏跳转以及标签页的分栏功能)
index.php 代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>rosjb脚本生成器</title>
<script src="static/js/jquery.js"></script>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap-select.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<script src="/static/plugins/bootstrap/js/bootstrap.js"></script>
<!-- 复制剪辑版控件-->
<script src="/static/plugins/bootstrap/js/clipboard.min.js"></script>
<link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap-datepicker.min.css">
<script src="/static/plugins/bootstrap/js/bootstrap-datepicker.min.js"></script>
<script src="/static/plugins/bootstrap/js/bootstrap-datepicker.zh-CN.min.js"></script>
<script src="/static/js/ui.js"></script>
<script src="https://use.fontawesome.com/d27fbcc6dd.js"></script>
<link rel="stylesheet" type="text/css" href="static/plugins/bootstrap/css/build.css">
</head>
<body>
<!-- Small modal -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">内容保存成功</div>
</div></div>
<!--静态实例-->
<!-- Modal -->
<div class="modal fade modalIndex" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">清空内容</h4>
</div>
<div class="modal-body">
是否清空编辑器内的内容?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" id="clearAffirmBtn">确认</button>
</div>
</div>
</div></div>
<!-- Small modal -->
<!--<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>-->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
</div>
</div></div>
<nav class="navbar navbar-inverse"> <!--navbar-static-top 固定在导航栏顶部-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RouterOS脚本生成器</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="0_system/_system.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#addAdmin">添加管理员账户</a></li>
<li><a href="#shutdown">定时关机/重启</a></li>
<li><a href="#">系统其它设置</a></li>
<li><a href="#">DDNS动态域名服务</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">安装<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">单多线固定IP或PPPOE(NTH/PCC)分流</a></li>
<li><a href="#">双线固定IP电信网通</a></li>
<li><a href="#">VLAN多线PPPoE拨号</a></li>
<li><a href="#">VRRP多线PPPoE+PCC负载</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PPPOE<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PPPOE服务器设置</a></li>
<li><a href="#">添加PPPoE账号(批量)</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">限速<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Queues简单限速</a></li>
<li><a href="#">PCQ智能动态限速</a></li>
<li><a href="#">PCQ分组简单限速</a></li>
<li><a href="#">HTB+PCQ小包优先脚本</a></li>
<li><a href="#">网络收集L7&大小包脚本</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">防火墙(Firewall)<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">禁止ping&URL内网跳转</a></li>
<li><a href="#">(批量)ARP绑定(定时)</a></li>
<li><a href="#">限制(TCP/UDP连接数)</a></li>
<li><a href="#">封锁软件类</a></li>
<li><a href="#">端口映射(UPNP)</a></li>
<li><a href="#">封端口及封IP(批量)</a></li>
<li><a href="#">封关键字和域名</a></li>
<li><a href="#">推荐防火墙脚本</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">代理VPN<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PPTP或L2TP设置</a></li>
<li><a href="#">VPN借线功能</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">脚本(Sprict)<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">统计在线计算机</a></li>
<li><a href="#">ROS自动备份设置</a></li>
<li><a href="#">断线修改PCC参数</a></li>
<li><a href="#">PPPoE到期用户提醒</a></li>
<li><a href="#">其他功能脚本</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">常用工具<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">mac地址相关工具</a></li>
<li><a href="#">WIFI中文SSID生成器</a></li>
<li><a href="#">网络监测(Netwatch)</a></li>
<li><a href="#">快速标记上传下载包</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid --></nav>
<!-- 面板区 -->
<div class="tab-content">
<?php include "0_system/addAdmin.php" ?>
<?php include "0_system/shutdown.php" ?>
<?php include "0_system/otherSetting.php" ?>
<?php include "0_system/ddns.php" ?>
<!-- ================================================-->
<!-- --><?php //include "1_install/pppoe.php" ?>
<!-- --><?php //include "1_install/doubleLine.php" ?>
<!-- --><?php //include "1_install/vlan.php" ?>
<!-- --><?php //include "1_install/vrrp.php" ?>
<!-- ================================================-->
<!-- --><?php //include "3_reteLimiting/queue.php" ?>
<!-- --><?php //include "3_reteLimiting/pcq.php" ?>
<!-- --><?php //include "3_reteLimiting/pcqGroup.php" ?>
<!-- ================================================--><!-- --><?php //include "4_firewall/disPing.php" ?>
<!-- --><?php //include "4_firewall/arpBind.php" ?>
<!-- --><?php //include "4_firewall/tcpudp.php" ?>
<!-- --><?php //include "4_firewall/port_mapping.php" ?>
<!-- --><?php //include "4_firewall/blockPort.php" ?>
<!-- --><?php //include "4_firewall/blockHttp.php" ?>
<!-- ================================================--><!-- --><?php //include "5_ddns/ddns.php" ?>
<!-- ================================================--><!-- --><?php //include "6_script/online.php" ?>
<!-- --><?php //include "6_script/backup.php" ?>
<!-- --><?php //include "6_script/pcc.php" ?>
<!-- --><?php //include "6_script/other.php" ?>
</div>
<?php include "footer.php" ?>
</body>
</html>
<script>
</script>
navbar.php代码
<nav class="navbar navbar-inverse"> <!--navbar-static-top 固定在导航栏顶部-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">RouterOS脚本生成器</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="0_system/_system.php" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">系统<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#addAdmin">添加管理员账户</a></li>
<li><a href="#shutdown">定时关机/重启</a></li>
<li><a href="#">系统其它设置</a></li>
<li><a href="#">DDNS动态域名服务</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">安装<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">单多线固定IP或PPPOE(NTH/PCC)分流</a></li>
<li><a href="#">双线固定IP电信网通</a></li>
<li><a href="#">VLAN多线PPPoE拨号</a></li>
<li><a href="#">VRRP多线PPPoE+PCC负载</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">PPPOE<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PPPOE服务器设置</a></li>
<li><a href="#">添加PPPoE账号(批量)</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">限速<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Queues简单限速</a></li>
<li><a href="#">PCQ智能动态限速</a></li>
<li><a href="#">PCQ分组简单限速</a></li>
<li><a href="#">HTB+PCQ小包优先脚本</a></li>
<li><a href="#">网络收集L7&大小包脚本</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">防火墙(Firewall)<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">禁止ping&URL内网跳转</a></li>
<li><a href="#">(批量)ARP绑定(定时)</a></li>
<li><a href="#">限制(TCP/UDP连接数)</a></li>
<li><a href="#">封锁软件类</a></li>
<li><a href="#">端口映射(UPNP)</a></li>
<li><a href="#">封端口及封IP(批量)</a></li>
<li><a href="#">封关键字和域名</a></li>
<li><a href="#">推荐防火墙脚本</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">代理VPN<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">PPTP或L2TP设置</a></li>
<li><a href="#">VPN借线功能</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">脚本(Sprict)<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">统计在线计算机</a></li>
<li><a href="#">ROS自动备份设置</a></li>
<li><a href="#">断线修改PCC参数</a></li>
<li><a href="#">PPPoE到期用户提醒</a></li>
<li><a href="#">其他功能脚本</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">常用工具<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">mac地址相关工具</a></li>
<li><a href="#">WIFI中文SSID生成器</a></li>
<li><a href="#">网络监测(Netwatch)</a></li>
<li><a href="#">快速标记上传下载包</a></li>
</ul>
</li>
</ul>
<!-- <ul class="nav navbar-nav navbar-right">-->
<!-- <li><a href="5_ddns/_ddns.php">DDNS动态域名服务</a></li>-->
<!-- </ul>-->
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid --></nav>
footer.php 代码
<footer id="footer">
<div class="row">
<div class="col-md-12">
<textarea class="form-control" rows="12" id="footerTextArea" style="color:red;resize:none">testArea</textarea>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-group btn-group-justified">
<div class="input-group-addon">
<span id="spanTime">脚本最后生成的时间</span>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger" id="clearBtn">清空内容</button>
</div>
<div class="btn-group">
<button type="button" data-clipboard-target="#textArea" class="btn btn-success" id="copyBtn">复制内容</button>
</div>
</div>
</div>
</div></footer>
<script>
// 导航栏鼠标移入 移出 就显示导航栏
$(".dropdown").mouseover(function () {
$(this).addClass("open");
});
$(".dropdown").mouseleave(function(){
$(this).removeClass("open");
})
//清空 确认按钮 事件
$("#clearAffirmBtn").click(function () {
$('#myModal').modal("hide");
$("#footerTextArea").val('');
// $("#textArea").focus();
});
//创建事件监听器
var clipboard = new ClipboardJS('#copyBtn');
clipboard.on('success', function (e) {
console.log(e);
alert("测试1复制成功！")
});
clipboard.on('error', function (e) {
console.log(e);
alert("测试1复制失败！请手动复制")
});
$("#clearBtn").click(function(){
$('#myModal').modal("show");
// UI.alert('清空内容','是否清空编辑器内的内容?');
// UI.alert({title:'清空内容',msg:'是否清空编辑器内的内容?',icon:'询问'});
});
</script>
建议你找个框架来写吧,比如
yii2 laravel