原文地址：简洁后台管理模版
之前给客户开发一个简单的后台管理系统，本来准备套用AdminLTE的，但客户嫌弃太臃肿，而且又需要有多tab页面切换，于是从我代码库中找到好久前就写过的管理后台，根据需求重写。这是基于jQuery，加上自己编写基础样式，从零搭建起来的框架，在这个轻量级模版的基础上进行开发vue项目。现在顺便将这个模版搭建成我的前端demo的管理系统，而这篇文章就讲述下如何实现简单的后台管理系统。
效果请看: manage-demo:https://edwardzhong.github.io/sites/manage-demo/
项目架构
基于gulp自动化工具，使用less预编译，使用swig模版引擎编译html。
基础样式base.css，字体库raleway，图标库fontello，js基础库jQuery。
同时使用webpack为vue.js配置好开发环境，在src文件夹里面可以直接开发vue项目，里面有简单的vue样例。当然想用react的也可以更改为react库。
文件目录
- dist 文件生成目录
- src 源文件目录，里面为vue项目的文件
- img 图片文件夹
- lib 类库文件夹
- less less文件
- pages 页面文件夹
- index.html 首页(母板页)
- gulpfile.js
- webpack.config.js
- package.json
而我们现在要做的就是最外层的框架页，也就是母板页，为了使其更加轻便，同时适应更多类型的项目，只使用了最基础的jquery来实现功能。
基础样式库
每个前端开发者做过大量项目后，基本都会有自己的样式库吧。我的base-css是参考了部分bootstrap和pure的样式库，精简了很多组件，非常的轻量级。详细代码请看https://github.com/edwardzhong/base-csss，less预编译，gulp自动化，可以自由选择所需要的组件后再打包，经过这样定制打包后的样式体积就更加的小了。该样式库主要包括如下组件：
- normalize：html5标签修复
- grid：响应式网格
- alert
- button
- breadcrumb
- dialog
- form
- menu
- pager
- pagination
- panel
- tab
- table
有了基础样式之后，我们搭建系统就方便很多了。
实现母板页
后台管理系统最重要的就是母板页(index.html)，我们一步步来实现它。
布局
基本就是左右布局：左边导航部分固定宽度，右边内容部分宽度自适应。实现这个布局有很多种方式，这里不详叙，从实现动画和自适应方面考虑，我采用的是绝对定位的方式。左边的导航栏隐藏显示动画是通过设置margin-left和transition属性实现的。
/*左边导航栏*/
.menu-wrap {
position: absolute;
transition: margin-left .3s ease-in-out;
top: 50px;left: 0;
200px;
height: calc(100% - 50px);
overflow-y: scroll;
}
/*右边内容部分*/
.main {
height: calc(100% - 50px);
overflow: hidden;
margin-left: 200px;
transition: margin-left .3s ease-in-out;
}
导航栏
导航栏就是使用ul列表布局，如果要实现多级的子菜单就在相应li下再嵌套一个ul列表即可，然后添加样式，添加css3动画等。布局示例请看如下的代码：
<ul id="menuList" class="side-menu">
<li class="children">
<a data-type="tab" title="Html Component" href="javascript:;"><i class="icon-doc-text"></i><span>Html Component</span></a>
<ul style="height: 0px;">
<li><a data-type="tab" title="Alert" href="./pages/alert.html"><span> Alert</span></a> </li>
<li><a data-type="tab" title="Page" href="./pages/page.html"><span> Page</span></a> </li>
<li><a data-type="tab" title="Panel" href="./pages/panel.html"><span> Panel</span></a> </li>
</ul>
</li>
<li>
<a title="My Blog" href="/"><i class="icon-bookmark"></i><span>My Blog</span></a>
</li>
</ul>
实现多tab内容面
很多后台管理模版都是通过模版引擎编译页面内容，这样生成的每个页面都会包含导航栏和内容块，这样的好处就是编写比较简单。但是点击导航栏里的链接就回重新加载整个页面，在网速不佳的情况，就会看到整个页面在跳动。
另一种方式是使用frameset或iframe，嵌套页面。这样内容页和母版页是分离的，分别加载的。这样会体验比较好，编写的代码也是隔离的。但也是隔离了作用域，所以要专门处理框架内外层通信的问题，同时编写也会稍麻烦。
我这里选用的是iframe方案，因为使用多iframe实现母板页多tab显示比较方便。这样左边导航栏点击后就会创建新的iframe并填入链接，然后再将该iframe插入内容块。同时tab栏也对应插入一一对应的tab标签，这样点击tab标签就隐藏显示对应iframe块。请看如下的html代码结构：
<div id="main" class="main">
<nav class="nav">
<!-- tab标签 -->
<ul id="nav" class="menu-tabs">
<li><a>...</a><li>
<li><a>...</a><li>
</ul>
</nav>
<!-- 页面iframe -->
<div class="page-con">
<div class="page"><iframe src="..."></iframe></div>
<div class="page"><iframe src="..."></iframe></div>
</div>
</div>
母板页的添加iframe和添加tab标签的代码
//添加页面
function appendPage(url){
$('.page-con .page').removeClass('active');
$('.page-con').append('<div class="page active"><iframe src="'+url+'" frameborder="0" width="100%" height="100%"></iframe></div>');
}
//添加tab
function appendTab(txt){
$nav.find('li').removeClass('active');
$nav.append('<li data-txt="'+txt+'" class="active"><a href="javascript:;">'+txt+'<i class="close">×</i></a></li>');
var w=setTabWidth();
//移动到新增tab
$navParent.animate({'scrollLeft':w+'px'},600);
}
当然这中间有很多细节，比如添加，删除，选择，滚动页面，tab栏的选择关闭，tab栏内容超出页面宽度的处理，当前tab如何滚动到当前显示区等，具体实现可以查看github代码。
内容页
完成母板页之后，接下来就是添加内容页了。首先就是定义导航链接，添加了自定义属性data-type="tab"的链接就是要在右边内容iframe打开的页面，否则就是打开外部链接了。每个在iframe打开的a标签要配置title属性，因为我是通过title来区分页面是否已经打开过，tab中已经存在就不再打开。
内容页既可以是静态页面，也可以用vue，react构造页面，demo里面有部分页面使用了vue来实现逻辑功能。
<ul id="menuList" class="side-menu">
<!-- 要添加到iframe中的链接 -->
<li><a data-type="tab" title="Alert" href="./pages/alert.html"><span> Alert</span></a> </li>
<!-- 外部链接跳转 -->
<li><a title="My Blog" href="/"><i class="icon-bookmark"></i><span>My Blog</span></a></li>
</ul>
总结
这个模版还有很多地方需要完善，可以在此基础上修改添加相应功能，也可以在此基础上使用vue，react实现内容页的功能。 具体细节请查看代码：https://github.com/edwardzhong/manage-demo