在开始项目之前，准备开发工具等请参考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下载
如果下载连接失败请邮件给我；