Jq+Bootstrap构建的传统后台管理系统

时间:2017年09月10日分类:Javascript

现在流行的是前后端分离,MV*模式,我作为一个相对传统行业的老菜鸟来说说最近手上的一个后台管理系统项目的前端工作,欢迎提各种意见。

项目背景:传统后台管理系统,面向的是企业级客户,兼容IE8+等主流浏览器,所以对界面友好程度相对来说并不是太大,你懂得

前端框架(类库):jq+bootstrap+layer+zTree+Validform

谈框架这种高大上的东西,我更想用类库来表达(恩,因为我觉得自己对框架这个概念的认识还很浅),没错正如标题所言,由jq+bootstrap构建,再新增一个皮肤包,根据UI出的视觉稿进行编码,就将其称为个性化,换肤功能吧。

在css 公共调用上,我又添加了一些简单字体大小,间距等等

如:

/*定位*/

.pos-r { position:relative;}
.pos-a { position:absolute;}
.pos-f { position:fixed;}

/*文字溢出省略号*/

.single-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0 2px;
}

/*文字尺寸*/

.f-12{font-size:12px}.f-14{font-size:14px}.f-16{font-size:16px}.f-18{font-size:18px}.f-20{font-size:20px}.f-25{font-size:25px}.f-30{font-size:30px}.f-40{font-size:40px}.f-50{font-size:50px}

/*文字颜色*/

.c-red,.c-red a,a.c-red{color: #f00;}
.c-green,.c-green a,a.c-green{color: #008000;}
.c-blue,.c-blue a,a.c-blue{color: #00f;}
.c-white,.c-white a,a.c-white{color: #fff;}
.c-black,.c-black a {color:#333;}
.c-black a:hover{color:#f60;}
.c-gray,.c-gray a,a.c-gray{color: #808080;}
.c-666,.c-666 a,a.c-666{color: #666;}
.c-999,.c-999 a,a.c-999{color: #999;}
.c-orange,.c-orange a,a.c-orange{color: #ffa500;}

/*间距padding,margin*/

.ml-5{margin-left:5px !important}
.mr-5{margin-right:5px !important}
.mt-5{margin-top:5px !important}
.mb-5{margin-bottom:5px !important}

.pl-5,.pt-5,pb-5,pr-5等等以此类推

 


 

bootstrap上主要应用到的东西有:
  • Modal,主要用来做异步请求时的表单操作,像增,改。
  • bootstrapTable,个人认为是整个系统的主体,后台系统大多数据展示是以表格形式来视图化,然后这个接口已然够用。有些个性化的东西,在此基础上再进行开发,也就方便,比如,列表表单的显示个性化,可以通过h5的localstorage进行本地存储,这里在开发过程中碰到一个小坑,在IE下面好像没法直接将原来存储的数据清除,只能使用localstorage.clear()方法?chremo下面可以在开发工具下直接删除
  • 然后就是bootstrap上应用到的个个小组件啦,自行去官网看api吧

 

layer
  • 作为提示控件来使用,关于api啥的也自行前往官网查看

 

zTree
  • 系统中涉及到的树形结构就用zTree,调用时使用列表形式的json数据格式进行交互,最好使用异步的展示形式,不然大数据时会影响性能

 

Validform
  • Validform用来表单的校验,一般都是通过ajax来进行表单提交,所以我把ajax都封装在了beforeSubmit这个接口中,还有一个要说明一下,因为错误提示可能需要自定义,可在tiptype中进行修改,还有一个就是考虑表单防重复提交

 

公共的js类库

我目前是通过单体模式进行封装的,

var Project = {
  //公共模块
  Util: {
    util_method1:function () {
      console.log('util_method1')
    },
    util_method2:function () {
      console.log('util_method2')
    }
  },
  //工具模块
  Tool:{
    tool_method1:function () {
      console.log('tool_method1')
    },
    tool_method2:function () {
      console.log('tool_method2')
    }
  },
  //其他模块,ajax等
  Others:{}
};

综上所述,那么我觉得一个传统的后台系统开发基本够用了,最后可能需要处理一下前端上的性能,比如,将静态资源打包压缩成一个文件,这里其实还有一个小坑,就是在IE9以下的低版本,如果你打包出来的一个css文件过大(内容过多),那么IE9及以下版本的部分css样式就不会生效啦,这时就需要做hack处理。

  • 查看[964]
  • |
  • 评论[1]

相关标签

javascript html+css jQuery

1条评论

  1. 2018-02-15 12:51:16

    就是在IE9以下的低版本,如果你打包出来的一个css文件过大(内容过多),那么IE9及以下版本的部分css样式就不会生效啦

    搜了下,果然是这样。附上相关地址:https://support.microsoft.com/en-us/help/262161/a-webpage-that-uses-css-styles-does-not-render-correctly-in-internet-e

发表你的评论

回到顶部