asheng99012 / Qpage

一个后台管理系统的 javascript 类库

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Qpage

一个后台管理系统的 javascript 类库

在做后台管理系统中,经常会遇到以下几个问题

  • 当页面提交或刷新或后退时,页面状态如何保存? 常规方案是,通过url地址中的参数,或一次性session,用后端代码来保存并回显状态,但这种方式只能解决一层返回的状态保存,并且十分繁琐
  • 后台页面的基本非常相似,但代码如何共用? 后台页面一般分为 列表页表单编辑页 ,这些页面的业务流程都十分相似,常规的做法是每个页面中都包含一堆相似的代码,而且不同的人写的代码的风格基本都不相同,即时同一个的代码,风格也不一定相同
  • 后台页面一般都是用 iframe 结构,iframe 高度以及弾层是个难题 当采用 iframe 结构时,可以用js定时调整 iframe 的高度,这个不难,可当 iframe内部有弾层时,弾层一般都是在 iframe 中居中显示,但不等于在整个屏幕居中,尤其当 iframe 页面很长是,要向下滚动很长才能看见弾层,体验很不好

Qpage应运而生

  • Qpage 用纯 javascript 方式保存页面状态,对开发人员完全透明
  • Qpage 采用 模板模式 这种设计模式,把几种常用页面的操作尽可能的分解为颗粒度很小的 function ,子页面只要重写其中几个function就可以了
  • 针对弾层,Qpage 让弾层在父框架上弹出来,从而让弾层在整个屏幕中居中,提供更好的用户体验

与其他类库的区别

  • Qpage 只是定义了页面层面的流程方面的封装,并不提供各种各种组件,也不提供UI样式, Qpage 可以很方便的和市面上流行的任何组件库和UI库结合使用
  • 现在市面上流行的 Vuejs angular react 等类库,更多的用来编写组件的,尽管 Qpage 也可以写组件,当更推荐直接用 Vuejs angular react 写组件,然后供 Qpage 调用
  • 现在市面上流行的 bootstrap jquery ui 等,直接提供的样式和组件库,可以直接拿来给 Qpage 使用

如何使用

  • 只要在页面上引用 <script src="QBase.js" /> 就可以了

About

一个后台管理系统的 javascript 类库


Languages

Language:JavaScript 92.1%Language:CSS 7.9%