简单实用的后端管理界面模板

好模板的重要性

XXX管理系统是一个后端人员永远绕不过的坑, 不是所有公司都会配一个靠谱的前端人员给你, 这个时候一个靠谱的后端管理模板将显得至关重要。

angularjs 后端人员好朋友

操作dom永远是后端人员的噩梦,而angularjs则是银弹。angular是一个双向绑定的js库,将数据与dom进行绑定, 让我们关心数据, 而不是关心dom.

adminlte不错的UI界面

adminlte提供了丰富的组件, 我们能想到的基本上都提供了, 无需修改, 开箱即用。

一些高级点的东西

sass

相对于大量的css, 我们更希望能有更逻辑一点的方法, 控制css, 不过于膨胀. 这样即催生了sass这样的预编译脚本。scss帮我们管理好css, 能让我们更好的控制样式.

compass

强大的scss库, 当后端人员的前端水平很高的时候, 需要用到这个强大的库.

adminlte + angularjs 最终形态

adminlte_sass 这是adminlte 和 angular的组合版本,其中我用sass替换掉了adminlte原生的less, 同时用angular替换掉start.html页面。从start.html页面我们可以快速的知道怎么用adminlte_sass 构建一个属于自己的后端页面。

实践

首页inde.html

这个地方我们已经用angularjs进行了分离, 避免出现html膨胀。

主要app.js

router进行了路由

main.html

最终需要填充的html

渲染效果

结语

通过简单的配置, 我们就可以实现一个看得过去的后端管理系统。通过前后端分离, 后端模板在angularjs的帮助下实现局部刷新,给用户呈现出来的就是一个单页面应用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注