[PHP高可用后端]④--搭建后台模板
2017-10-26 本文已影响57人
子木同
Paste_Image.png
h-ui admin
http://www.h-ui.net/H-ui.admin.shtml
推荐第一个
修改config.php
// 视图输出字符串内容替换
'view_replace_str' => [
'__STATIC__'=>'/static'
],
复制粘贴lib和static相关文件夹
Paste_Image.png
Paste_Image.png
_footer.html
<script type="text/javascript" src="__STATIC__/hadmin/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/hadmin/static/h-ui.admin/js/H-ui.admin.js"></script>
可修改为load href
<load href="__STATIC__/hadmin/static/h-ui.admin/js/H-ui.admin.js"/>
_header.html
<header class="navbar-wrapper">
<div class="navbar navbar-fixed-top">
<div class="container-fluid cl"> <a class="logo navbar-logo f-l mr-10 hidden-xs" href="/aboutHui.shtml">H-ui.admin</a> <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/aboutHui.shtml">H-ui</a> <span class="logo navbar-slogan f-l mr-10 hidden-xs">v3.1</span> <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;"></a>
<nav class="nav navbar-nav">
<ul class="cl">
<li class="dropDown dropDown_hover"><a href="javascript:;" class="dropDown_A"><i class="Hui-iconfont"></i> 新增 <i class="Hui-iconfont"></i></a>
<ul class="dropDown-menu menu radius box-shadow">
<li><a href="javascript:;" onclick="article_add('添加资讯','article-add.html')"><i class="Hui-iconfont"></i> 资讯</a></li>
<li><a href="javascript:;" onclick="picture_add('添加资讯','picture-add.html')"><i class="Hui-iconfont"></i> 图片</a></li>
<li><a href="javascript:;" onclick="product_add('添加资讯','product-add.html')"><i class="Hui-iconfont"></i> 产品</a></li>
<li><a href="javascript:;" onclick="member_add('添加用户','member-add.html','','510')"><i class="Hui-iconfont"></i> 用户</a></li>
</ul>
</li>
</ul>
</nav>
<nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
<ul class="cl">
<li>超级管理员</li>
<li class="dropDown dropDown_hover"> <a href="#" class="dropDown_A">admin <i class="Hui-iconfont"></i></a>
<ul class="dropDown-menu menu radius box-shadow">
<li><a href="#">个人信息</a></li>
<li><a href="#">切换账户</a></li>
<li><a href="#">退出</a></li>
</ul>
</li>
<li id="Hui-msg"> <a href="#" title="消息"><span class="badge badge-danger">1</span><i class="Hui-iconfont" style="font-size:18px"></i></a> </li>
<li id="Hui-skin" class="dropDown right dropDown_hover"> <a href="javascript:;" class="dropDown_A" title="换肤"><i class="Hui-iconfont" style="font-size:18px"></i></a>
<ul class="dropDown-menu menu radius box-shadow">
<li><a href="javascript:;" data-val="default" title="默认(黑色)">默认(黑色)</a></li>
<li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
<li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
<li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
<li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
<li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
防止点击跳转 跳转url地址应写在data-href中
_menu.html
<aside class="Hui-aside">
<div class="menu_dropdown bk_2">
<dl id="menu-article">
<dt><i class="Hui-iconfont"></i> 管理员管理<i class="Hui-iconfont menu_dropdown-arrow"></i></dt>
<dd>
<ul>
<li><a data-href="{:url('index/add')}" data-title="添加管理员" onClick="Hui_admin_tab(this)">添加管理员</a>
</li>
</ul>
</dd>
</dl>
</div>
</aside>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
</div>
注意
onClick="Hui_admin_tab(this)"
_meta.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="Bookmark" href="/favicon.ico" >
<link rel="Shortcut Icon" href="/favicon.ico" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5shiv.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css" href="__STATIC__/hadmin/static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
<script type="text/javascript" src="__STATIC__/hadmin/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
</head>
index.html
{include file="public/_meta"}
<body>
{include file="public/_header"}
{include file="public/_menu"}
<section class="Hui-article-box">
<div id="Hui-tabNav" class="Hui-tabNav hidden-xs">
<div class="Hui-tabNav-wp">
<ul id="min_title_list" class="acrossTab cl">
<li class="active">
<span title="我的桌面" data-href="welcome.html">我的桌面</span>
<em></em></li>
</ul>
</div>
<div class="Hui-tabNav-more btn-group"><a id="js-tabNav-prev" class="btn radius btn-default size-S"
href="javascript:;"><i class="Hui-iconfont"></i></a><a
id="js-tabNav-next" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont"></i></a>
</div>
</div>
<div id="iframe_box" class="Hui-article">
<div class="show_iframe">
<div style="display:none" class="loading"></div>
<iframe scrolling="yes" frameborder="0" src="{:url('index/welcome')}"></iframe>
</div>
</div>
</section>
<div class="contextMenu" id="Huiadminmenu">
<ul>
<li id="closethis">关闭当前</li>
<li id="closeall">关闭全部</li>
</ul>
</div>
{include file="public/_footer"}
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="lib/jquery.contextmenu/jquery.contextmenu.r2.js"></script>
<script type="text/javascript">
$(function () {
/*$("#min_title_list li").contextMenu('Huiadminmenu', {
bindings: {
'closethis': function(t) {
console.log(t);
if(t.find("i")){
t.find("i").trigger("click");
}
},
'closeall': function(t) {
alert('Trigger was '+t.id+'\nAction was Email');
},
}
});*/
$("body").Huitab({
tabBar: ".navbar-wrapper .navbar-levelone",
tabCon: ".Hui-aside .menu_dropdown",
className: "current",
index: 0,
});
});
/*个人信息*/
function myselfinfo() {
layer.open({
type: 1,
area: ['300px', '200px'],
fix: false, //不固定
maxmin: true,
shade: 0.4,
title: '查看信息',
content: '<div>管理员信息</div>'
});
}
/*资讯-添加*/
function article_add(title, url) {
var index = layer.open({
type: 2,
title: title,
content: url
});
layer.full(index);
}
/*图片-添加*/
function picture_add(title, url) {
var index = layer.open({
type: 2,
title: title,
content: url
});
layer.full(index);
}
/*产品-添加*/
function product_add(title, url) {
var index = layer.open({
type: 2,
title: title,
content: url
});
layer.full(index);
}
/*用户-添加*/
function member_add(title, url, w, h) {
layer_show(title, url, w, h);
}
</script>
</body>
</html>
add.html
<!--header-->
{include file="public/_meta" /}
<article class="page-container">
<form class="form form-horizontal" id="form-admin-add" method="post" action="{:url('admin/add')}">
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>管理员名:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder="" id="username" name="username">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="password" class="input-text" autocomplete="off" value="" placeholder="密码" id="password" name="password">
</div>
</div>
<div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value=" 提交 ">
</div>
</div>
</form>
</article>
{include file="public/_footer" /}
</body>
</html>
Index.php(首字母大写)
<?php
namespace app\admin\controller;
use think\Controller;
class Index extends Controller
{
public function index()
{
return $this->fetch();
}
public function welcome()
{
return "hello api-admin";
}
public function add()
{
return $this->fetch();
}
}
http://singwa.com/index.php/admin/
Paste_Image.png