1、aritcMS-环境搭建-设置布局-布局测试
在开始项目之前，准备开发工具等请参考easyUI章节。
首先、在获取broPHP框架的时候（可以在网上下载）、在brophp文件夹同级目录下新建admin.php,以及index.php
admin.php中写如下代码：
<?php
define('APP', "./admin");
require "./brophp/brophp.php";
、、、、、、、
加载broPHP框架，运行127.0.0.1/articMS/admin.php后会自动创建相关文件在admin目录（这块不是很熟悉的话，可以去下载broPHP手册）；
同样index.php中代码写如下代码：
<?php
define('APP', "./home");
require "./brophp/brophp.php";
、、、、、、、、
加载broPHP框架，运行127.0.0.1/articMS/index.php后会自动创建相关文件在index目录（这块不是很熟悉的话，可以去下载broPHP手册）；
创建好的admin目录下有MVC的架构模式，先处理后台的事项布局等；
第一步、在admin目录下的controls目录下新建index.class.php（必须是xxx.class.php模式的controls类文件），在使用数据库的时候，我们先修改一下broPHP的配置文件
config.inc.php，里面内容如下：
<?php
define("DEBUG", 1); //开启调试模式 1 开启 0 关闭
define("DRIVER","pdo"); //数据库的驱动，本系统支持pdo(默认)和mysqli两种
//define("DSN", "mysql:host=localhost;dbname=brophp"); //如果使用PDO可以使用，不使用则默认连接MySQL
define("HOST", "localhost"); //数据库主机
define("USER", "root"); //数据库用户名
define("PASS", ""); //数据库密码
define("DBNAME","articms"); //数据库名
define("TABPREFIX", "articms_"); //数据表前缀
define("CSTART", 0); //缓存开关 1开启，0为关闭
define("CTIME", 60*60*24*7); //缓存时间
define("TPLPREFIX", "tpl"); //模板文件的后缀名
define("TPLSTYLE", "default"); //默认模板存放的目录
//$memServers = array("localhost", 11211); //使用memcache服务器
/*
如果有多台memcache服务器可以使用二维数组
$memServers = array(
array("", '11211'),
array("", '11211'),
...
);
*/
修改的主要有 define("DBNAME","articms"); 数据库名（我设置的数据库为articms）以及 define("TABPREFIX", "articms_");数据表前缀，具体怎么样看上面的注释；
第二步、在admin目录下的controls目录下新建index.class.php创建好了后，在里面写这几行代码（希望大家可以不要解释就能看懂）：
<?php
class Index {
function index(){
debug(0);//关闭调试
$this->display();//broPHP中以这种方法指向相对应的模版视图下的文件
}
$this->display();指向对于的模版，模版创建，在admin目录下的view目录下的default目录下新建index目录（对应的是concrols下的index.class.php的前缀index）下创建index.tpl文件（tpl是在broPHP配置文件中指定的模版文件名后缀，也可以指定为html等格式）；
index.tpl就是我们要布局的文件，先看布局成的样式如图：
分析：这是进入后台页面的主页面布局样式，有三个主要页签默认打开的是“功能事项”这个页签下，这三个页签是固定的不可以X掉的；
看index.tpl文件怎么写的：
<{include file="public/head.tpl" }>
<div class="easyui-layout" style="width:100%;height:100%;">
<div region="north" border="false" id="top">
<{include file="public/top.tpl" }>
</div>
<div region="west" split="false" style="width:100%;">
<div id="tt" class="easyui-tabs" fit="false" style="width: 100%;height:100%;" plain="false" >
<div class="bj-item" title="我的主页" iconCls="icon-myhome" >
<{include file="public/mymain.tpl" }>
</div>
<div class="bj-item-search" title="查询" iconCls="icon-search" >
<{include file="public/search.tpl" }>
</div>
<div class="bj-item" title="功能事项" selected="3" iconCls="icon-tip">
<{include file="public/gnitem.tpl" }>
</div>
</div>
</div>
</div>
<{include file="public/footer.tpl" }>
首相我们把头文件和尾文件包含进来，头文件中主要是一些js，css的引入等；
<{include file="public/head.tpl" }>代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>文章管理系统</title>
<link rel="stylesheet" type="text/css" href="<{$public}>/js/jquery-easyui-1.4.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<{$public}>/js/jquery-easyui-1.4.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<{$public}>/js/jquery-easyui-1.4.5/themes/color.css">
<link rel="stylesheet" type="text/css" href="<{$public}>/css/admin-index.css">
<script src="<{$public}>/js/jquery-easyui-1.4.5/jquery.min.js"></script>
<script src="<{$public}>/js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
<script src="<{$public}>/js/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>
<script src="<{$public}>/js/admin/admin-index.js"></script>
<script src="<{$public}>/js/admin/admin-public.js"></script>
<!--<script src="<{$public}>/js/admin/admin-gntree.js"></script>-->
</head>
<body>
声明，<{$public}>是broPHP已经编写好的常量（查看手册去理解）、从头文件可以看出引入了一些easyUI的基本样式和js文件，
<{include file="public/footer.tpl" }>就是头文件的闭合标签：
从index.tpl中可以看出，我们使用了布局，在west中定义了三个固定的tabs页签：分别是title="我的主页"、title="查询"、title="功能事项"；
north里面引入的是top.tpl文件，是图片中的头部也就是登录后的部分；
<{include file="public/top.tpl" }> 代码如下：
<div>
<div class="aticMStitle">
<a herf="index.php">文章管理系统</a>
</div>
<div class="right_tool">
<ul>
<li><a href="<{$root}>/index.php" class="easyui-linkbutton" iconCls="icon-home">首页</a></li>
<li><a h#ref="" class="easyui-linkbutton" iconCls="icon-out" id="logout">注销</a></li>
</ul>
</div>
<div class="right_user">
<a class="easyui-linkbutton dsbtn" iconCls="icon-myman1" title="<{$smarty.session.description}>" href="<{$root}>/index.php/user/index/uid/<{$smarty.session.id}>">欢迎您-<{ $smarty.session.username }>-【<{$smarty.session.groupname}>】</a>
</div>
</div>
这些代码暂时不用去关、后续会一步步完善；
在west中的三个页签，包含三个文件；
我们首先看<{include file="public/gnitem.tpl" }>功能事项这个页签布局；
<div class="gnitemlayout"> <div class="item1"> <div class="aul" id="sh"> <ul> <{foreach $item1 as $row}> <li> <a href="javascript:void(0)" onclick="showlist('<{$row.name}>','<{$row.id}>','<{$url}>')" ><{$row.name}></a> </li> <{foreachelse}> <li><a>暂无功能</a></li> <{/foreach}> </ul> </div> <div class="gn-title"><h1>内容管理</h1></div> </div> <div class="item2"> <div class="aul"> <ul> <{foreach $item2 as $row}> <li> <a href="javascript:viod(0)" onclick="showlist('<{$row.name}>','<{$row.id}>','<{$url}>')" ><{$row.name}></a> </li> <{foreachelse}> <li><a>暂无功能</a></li> <{/foreach}> </ul> </div> <div class="gn-title"><h1>用户管理</h1></div> </div> <div class="item3"> <div class="aul"> <ul> <{foreach $item3 as $row}> <li> <a href="javascript:viod(0)" onclick="showlist('<{$row.name}>','<{$row.id}>','<{$url}>')" ><{$row.name}></a> </li> <{foreachelse}> <li><a>暂无功能</a></li> <{/foreach}> </ul> </div> <div class="gn-title"><h1>广告管理</h1></div> </div> <div class="item4"> <div class="aul"> <ul> <{foreach $item4 as $row}> <li> <a href="javascript:viod(0)" onclick="showlist('<{$row.name}>','<{$row.id}>','<{$url}>')" ><{$row.name}></a> </li> <{foreachelse}> <li><a>暂无功能</a></li> <{/foreach}> </ul> </div> <div class="gn-title"><h1>BBS管理</h1></div> </div> <div class="item5"> <div class="aul"> <ul> <{foreach $item5 as $row}> <li> <a href="javascript:viod(0)" onclick="showlist('<{$row.name}>','<{$row.id}>','<{$url}>')" ><{$row.name}></a> </li> <{foreachelse}> <li><a>暂无功能</a></li> <{/foreach}> </ul> </div> <div class="gn-title"><h1>统计管理</h1></div> </div> <div class="item6"> <div class="aul"> <ul> <{foreach $item6 as $row}> <li> <a href="javascript:viod(0)" onclick="showlist('<{$row.name}>','<{$row.id}>','<{$url}>')" ><{$row.name}></a> </li> <{foreachelse}> <li><a>暂无功能</a></li> <{/foreach}> </ul> </div> <div class="gn-title"><h1>系统管理</h1></div> </div> </div>
有如下代码就要在index.class.php中写相应的代码：如下
<?php class Index { function index(){ debug(0); $gnfile_item1 = D("gnfile")->field("id,name,flag,sort")->where("flag='gn-content'")->order("sort asc")->select(); $this->assign("item1",$gnfile_item1); $gnfile_item2 = D("gnfile")->field("id,name,flag,sort")->where("flag='gn-user'")->order("sort asc")->select(); $this->assign("item2",$gnfile_item2); $gnfile_item6 = D("gnfile")->field("id,name,flag,sort")->where("flag='gn-system'")->order("sort asc")->select(); $this->assign("item6",$gnfile_item6); $this->display(); } function showtabs(){ $id = isset($_GET["idflag"]) ? $_GET["idflag"] : ""; $gnPname = D("gnfile")->field("name")->where(array("id"=>"{$id}"))->order("sort asc")->find(); $this->assign("pname",$gnPname["name"]); $gnfiledet = D("gnfiledet")->field("id,text,state")->where(array("pid"=>"{$id}"))->order("sort asc")->select(); $this->assign("treeNode",$gnfiledet); $this->assign("treeFlag",$id); $this->display(); } }
broPHP提供D方法可以直接操作数据库表，通过assign分配出去，在相应的模版页面下可以使用，如gnitem.tpl的文件下；
通过gnitem.tpl下的方法把相应的功能模块显示在页签布局中；
第三步、编写js控制一些基本样式或动作
admin-index.js
$(function(){ $(".item1").bind("mouseover",function(){ $(this).children(".aul").css("display","block"); }).mouseleave(function(){ $(this).children(".aul").css("display","none"); }); $(".item2").bind("mouseover",function(){ $(this).children(".aul").css("display","block"); }).mouseleave(function(){ $(this).children(".aul").css("display","none"); }); $(".item3").bind("mouseover",function(){ $(this).children(".aul").css("display","block"); }).mouseleave(function(){ $(this).children(".aul").css("display","none"); }); $(".item4").bind("mouseover",function(){ $(this).children(".aul").css("display","block"); }).mouseleave(function(){ $(this).children(".aul").css("display","none"); }); $(".item5").bind("mouseover",function(){ $(this).children(".aul").css("display","block"); }).mouseleave(function(){ $(this).children(".aul").css("display","none"); }); $(".item6").bind("mouseover",function(){ $(this).children(".aul").css("display","block"); }).mouseleave(function(){ $(this).children(".aul").css("display","none"); }); $(".dsbtn").linkbutton('disable'); $("#logout").bind('click', function(){ var url = '/login/logout'; alert(url); if(1){ $.messager.confirm('Confirm','你确定要退出么?',function(r){ if (r){ $.post(url,function(result){ if (result.success){ $('#dg').datagrid('reload'); // reload the user data } else { $.messager.show({ // show error message title: 'Error', msg: result.errorMsg }); } },'json'); } }); } }); });
效果如图：鼠标滑过显示效果
admin-public.js动态生成页签
function showlist(name, id,url){ url = url+"/showtabs/idflag/"+id ; if ($('#tt').tabs('exists', name)){ $('#tt').tabs('select', name); } else { var content = '<iframe id="tabiframe" scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>'; $('#tt').tabs('add',{ title:name, content:content, closable:true }); } } function initLeftTree(treeURL){ var treeFlag = $("#treeload").attr("treeFlag"); url = treeURL+"/getTreeGN/treeFlag/"+treeFlag; $("#treeload").tree({ url:url }); }
同时在index.class.php中可以看出一个新的function showtabs()指向showtabs所以我们要新建一个tpl模版：
showtabs.tpl
<{include file="public/head.tpl" }>
<div class="easyui-layout" style="width:100%;height:100%;">
<div region="west" split="true" title="功能栏目" style="width:200px;">
<ul id="treeload" class="easyui-tree" lines="true">
<li>
<span><{$pname}></span>
<ul>
<{foreach $treeNode as $row}>
<li>
<a href="javascript:void(0)" onclick="" ><{$row.text}></a>
</li>
<{foreachelse}>
<li ><a style="color: grey;cursor: not-allowed;">暂无功能</a></li>
<{/foreach}>
</ul>
</li>
</ul>
</div>
<div id="content" region="center" title="" style="padding:5px;">
</div>
</div>
<{include file="public/footer.tpl" }>
west是树菜单，center是主要显示的内容，这是新建页签的模式打开的如图：
其中我的主页页面布局如图所示;
布局代码如下：<{include file="public/mymain.tpl" }>
<div id="main">
<div class="easyui-layout" style="width:100%;height:100%;margin-top:10px;overflow:hidden;">
<div region="west" split="true" title="系统特点" iconCls="icon-system" style="width:29%;">
<ul style="margin-left: -25px;"><b>系统特点</b>:
<li class="mess">使用流行脚本语言PHP编写，搭配性能稳定的MySQL数据库. </li>
<li class="mess">系统可以跨平台，运行在Windows、Linux等操作系统中. </li>
<li class="mess">使用最新的ck编辑器，发布文件排版像使用WORD一样简单. </li>
<li class="mess">使用easyUI框架布局,遵循WEB标准,兼容各种浏览器. </li>
<li class="mess">采用Smarty模板引擎,页面高速缓存技术. </li>
<li class="mess">采用完全的MVC模式,并使用自定义框架. </li>
<li class="mess">采用完全的PHP5面向对象设计. </li>
<li class="mess">支持无限级的分类与子分类. </li>
<li class="mess">系统采用超经量级PHP框架BroPHP实现. </li>
<li class="mess">更多学习参考我的博客<span><a href="http://www.cnblogs.com/jianyeLee/" target="_blank">【EthanCoco】</a></span> </li>
</ul>
</div>
<div id="content" region="center" title="待办事项" iconCls="icon-todo" style="padding: 5px;">
<div class="easyui-layout" style="width:100%;height:100%;overflow:hidden;">
<div region="west" split="true" title="事项分类" iconCls="icon-todo-item" style="width:25%;">
<ul>
</ul>
</div>
<div region="center" style="padding: 5px;">
</div>
</div>
</div>
</div>
</div>
这样主要布局就完成了测试看图片，美观是不美，但是整体布局就是这样的；
附上css代码：admin-index.css
#top{ background:#336699; } #top .aticMStitle{ float:left; font-size:18px; font-weight:bold; padding:5px 10px; color:#fff; } #top .right_tool { /*padding:5px 10px;*/ float:right; width:auto; /*padding-top:10px;*/ /*height:100%;*/ margin-right:5px; /*margin-top: -5px;*/ } .right_tool li{ /*float:left;*/ list-style: none; /*height:22px;*/ } #top .right_user { float:right; width:auto; margin-top: 25px; } #top .right_user a{ float:right; width:auto; color: red; cursor: pointer; } #main{ width:100%; height:98%; } .mess { text-indent:25px; background:url(../images/dot2.gif) no-repeat 5px; list-style: none; padding: 3px; } .bj-item{ background:#E6EEF8; } .bj-item-search{ background:#EFF5FF; } .gnitemlayout{ width: 80%; height: 70%; background: #E0ECFF; border:1px solid #499B33; margin:0 auto; /*position: fixed;*/ position: absolute; top: 18%; left: 10%; border-radius: 15px; float: left; /*border: solid 1px #00BBEE;*/ } .gnitemlayout .item1{ position: absolute; background: #95B8E7; height: 45%; width: 35%; margin: 10px; border-radius: 15px; -webkit-box-shadow:inset 0 0 10px #D9D9D9; -moz-box-shadow:inset 0 0 10px #D9D9D9; box-shadow:inset 0 0 10px #D9D9D9; } .gnitemlayout .item2{ position: absolute; background: #E0ECFF; height: 45%; width: 25%; left:36.4%; margin: 10px; border-radius: 15px; -webkit-box-shadow:inset 0 0 10px #0CC; -moz-box-shadow:inset 0 0 10px #0CC; box-shadow:inset 0 0 10px #0CC; } .gnitemlayout .item3{ position: absolute; background: #EDEDED; height: 45%; width: 35%; right:0.2%; margin: 10px; border-radius: 15px; -webkit-box-shadow:inset 0 0 10px #FFE48D; -moz-box-shadow:inset 0 0 10px #FFE48D; box-shadow:inset 0 0 10px #FFE48D; } .gnitemlayout .item4{ position: absolute; background: #FFA8A8; height: 48%; width: 25%; /*right:0.2%;*/ top:48%; margin: 10px; border-radius: 15px; -webkit-box-shadow:inset 0 0 10px #FFFFFF; -moz-box-shadow:inset 0 0 10px #FFFFFF; box-shadow:inset 0 0 10px #FFFFFF; } .gnitemlayout .item5{ position: absolute; background: #FFAB3F; height: 48%; width: 45%; left:26.4%; top:48%; margin: 10px; border-radius: 15px; -webkit-box-shadow:inset 0 0 10px #000; -moz-box-shadow:inset 0 0 10px #000; box-shadow:inset 0 0 10px #000; } .gnitemlayout .item6{ position: absolute; background: #BABABA; height: 48%; width: 25%; right:0.2%; top:48%; margin: 10px; border-radius: 15px; -webkit-box-shadow:inset 0 0 10px #CC2222; -moz-box-shadow:inset 0 0 10px #CC2222; box-shadow:inset 0 0 10px #CC2222; } .gn-title{ position: absolute; vertical-align: bottom; bottom: 1px; margin-left: 50%; color: #000000; font-weight: bold; } .aul{display: none;} .gnitemlayout ul{ list-style: none; font-family: "楷体"; font-size: 18px; line-height: 20px; } .gnitemlayout ul li{ padding: 2px; } .gnitemlayout ul li a{ text-decoration: none; color: #000000; } .gnitemlayout ul li a:hover{ color: #000000; } .gnitemlayout ul li a:active{ color: #000000; } .gnitemlayout ul li a:focus{ color: #000000; } .hwfull{ width:100%; height:100%; } .wfull{ width:100%; }
最后附上源码文件可以下载：
https://pan.baidu.com/s/1mifc4RI下载
如果下载连接失败请邮件给我；
