本文共 2846 字,大约阅读时间需要 9 分钟。
原文地址:
之前给客户开发一个简单的后台管理系统,本来准备套用AdminLTE的,但客户嫌弃太臃肿,而且又需要有多tab页面切换,于是从我代码库中找到好久前就写过的管理后台,根据需求重写。这是基于jQuery,加上自己编写基础样式,从零搭建起来的框架,在这个轻量级模版的基础上进行开发vue项目。现在顺便将这个模版搭建成我的前端demo的管理系统,而这篇文章就讲述下如何实现简单的后台管理系统。效果请看:
基于gulp自动化工具,使用less预编译,使用swig模版引擎编译html。
基础样式base.css,字体库raleway,图标库fontello,js基础库jQuery。
同时使用webpack为vue.js配置好开发环境,在src文件夹里面可以直接开发vue项目,里面有简单的vue样例。当然想用react的也可以更改为react库。
而我们现在要做的就是最外层的框架页,也就是母板页,为了使其更加轻便,同时适应更多类型的项目,只使用了最基础的jquery来实现功能。
每个前端开发者做过大量项目后,基本都会有自己的样式库吧。我的base-css是参考了部分bootstrap和pure的样式库,精简了很多组件,非常的轻量级。详细代码请看,less预编译,gulp自动化,可以自由选择所需要的组件后再打包,经过这样定制打包后的样式体积就更加的小了。该样式库主要包括如下组件:
有了基础样式之后,我们搭建系统就方便很多了。
后台管理系统最重要的就是母板页(index.html),我们一步步来实现它。
基本就是左右布局:左边导航部分固定宽度,右边内容部分宽度自适应。实现这个布局有很多种方式,这里不详叙,从实现动画和自适应方面考虑,我采用的是绝对定位的方式。左边的导航栏隐藏显示动画是通过设置margin-left和transition属性实现的。
/*左边导航栏*/.menu-wrap { position: absolute; transition: margin-left .3s ease-in-out; top: 50px;left: 0; width: 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动画等。布局示例请看如下的代码:
很多后台管理模版都是通过模版引擎编译页面内容,这样生成的每个页面都会包含导航栏和内容块,这样的好处就是编写比较简单。但是点击导航栏里的链接就回重新加载整个页面,在网速不佳的情况,就会看到整个页面在跳动。
另一种方式是使用frameset或iframe,嵌套页面。这样内容页和母版页是分离的,分别加载的。这样会体验比较好,编写的代码也是隔离的。但也是隔离了作用域,所以要专门处理框架内外层通信的问题,同时编写也会稍麻烦。
我这里选用的是iframe方案,因为使用多iframe实现母板页多tab显示比较方便。这样左边导航栏点击后就会创建新的iframe并填入链接,然后再将该iframe插入内容块。同时tab栏也对应插入一一对应的tab标签,这样点击tab标签就隐藏显示对应iframe块。请看如下的html代码结构:
母板页的添加iframe和添加tab标签的代码
//添加页面function appendPage(url){ $('.page-con .page').removeClass('active'); $('.page-con').append('');}//添加tabfunction appendTab(txt){ $nav.find('li').removeClass('active'); $nav.append('
当然这中间有很多细节,比如添加,删除,选择,滚动页面,tab栏的选择关闭,tab栏内容超出页面宽度的处理,当前tab如何滚动到当前显示区等,具体实现可以查看github代码。
完成母板页之后,接下来就是添加内容页了。首先就是定义导航链接,添加了自定义属性data-type="tab"的链接就是要在右边内容iframe打开的页面,否则就是打开外部链接了。每个在iframe打开的a标签要配置title属性,因为我是通过title来区分页面是否已经打开过,tab中已经存在就不再打开。
内容页既可以是静态页面,也可以用vue,react构造页面,demo里面有部分页面使用了vue来实现逻辑功能。
这个模版还有很多地方需要完善,可以在此基础上修改添加相应功能,也可以在此基础上使用vue,react实现内容页的功能。 具体细节请查看代码:
转载地址:http://zjduz.baihongyu.com/