bootstrap加载mysql数据库_bootstrap后台管理系统前后台实现(含数据库)

撰写本文档目的是让后续开发者在理解该系统架构的基础上遵循一定规范保持系统架构的合理性；同时也能够达到允许没有开发经验仅有web基础的入门开发者能够通过复制粘贴的方式仿照demo示例进行开发的目的。

目  录

1       案例调研与选取... 2

1.1      案例调研... 2

1.2      UI选取... 3

2       系统实现... 3

2.1      实现效果... 3

2.2      开发规范... 6

3       详细设计... 7

3.1      框架介绍... 7

3.2      数据库设计... 8

3.3      菜单管理... 8

3.4      权限管理/角色管理... 11

3.5      权限管理/权限分配... 13

3.6      权限管理/用户管理... 14

4       延伸思考... 14

5       致谢! 14

6       文档说明... 15

7       参考文献... 15

案例调研与选取

案例调研

1)easyUI(No1)

图片

2)easyUI(No2)

图片

3)Bootstrap

图片

4)vue/iview

图片

以上四套UI框架对比分析，可以得出如下结论

结论：

easyUI功能完善，界面简洁友好，非常方便后端开发人员开发，是优秀的前端开源框架，尤其适合后台管理，但是非响应式，页面不会随屏幕大小而变化，美观方面(仁者见仁)；

bootstrap是响应式开源框架，支持插件广泛，界面相对酷炫，美观方面(有目共睹)，同样也非常适合管理平台的开发；

至于Vue和其它一些前端人员自己写的UI框架，必须要承认Vue是不错的开源框架，但是个人感觉对管理平台来说Vue增加了开发人员的学习成本、兼容性、美观等方面的调试成本，开发周期偏长，至于是否适合管理品台开发就……；

综上分析，对于管理平台开发建议选用easyUI或基于bootstrap搭建好的管理平台，本文选择基于bootstrap的管理平台进行说明。

UI选取

经过调研，选取了一套业内好评率较高的UI(ace-master)，

Ace是一个基于Twitter bootstrap3开发的后台模板。

GitHub Ace地址：https://github.com/bopoda/ace

Ace演示：http://ace.jeka.by/

主体界面如下：

此框架功能多多，详细功能请看演示。

系统实现

实现效果

登录

2)首页

3)以下是权限管理的具体模块

开发规范

下图为框架的三个区域，其中主面板区域采用为一个div(没有采用iframe设计)，每个菜单的内容均会更新主面板区域，故在主面板区域内容需要遵循一定的规范：

建议每个一级菜单在一个包中，每个包中的二级菜单均为一个单独的控制器。建议页面也需按同样方式设计。每个页面中的字段必须全局唯一(very import)

每个页面中的字段可采用驼峰式也可用下划线式，但必须确保每个页面以及下面多级页面中的每个字段名必须不同(即使业务上为同一张表的同一个字段)，不可在模态框与主面板区用同一个页面。(如此设计的原因是：由于主页面采用div设计，故为防止js检测异常)

(important)由于主面板区域采用div设计，父页面(main.jsp)中已经有了

故子页面面不要引入这个js了(也无需引入)，否则会引起密码修改的模态框无法弹出；

如果想要引入的话，请修改密码修改的模态框弹出效果。

命名规范示例：

每个页面中字段命名(包括方法名、表单字段、div等元素的id等)：  模块名+页面名+数据库字段名

示例：userManageListAccountName

或者    user_manage_list_account_name

这样组成了全局唯一字段，防止浏览器缓存导致的页面插件功能异常和表单提交异常等问题；

详细设计

框架介绍

1)页面布局

页面布局见开发规范中截图，三个主要区域。

2)功能

功能上主要为权限管理和其它的项目相关的开发人员自定义的菜单模块。前后端交互采用ajax技术，页面核心的公共区域的交互在

；该文件中封装了菜单url调用和菜单效果切花、主面板区域更新的ajax、菜单树的动态加载、解析、拼装等功能。

3)权限

权限管理中包括用户管理、菜单管理、角色管理、权限分配和密码修改。

4)菜单加载

用户状态为启用时可登录到系统，进入到主板面后根据用户对应角色查找相应的菜单加载到菜单区域，从而实现不同角色的用户能够看到不同的菜单权限。

5)插件

框架中整合的插件主要如下(部分)：

Bootstrap-table、bootstrap-datetimepicker、jquery.gritter(右上角弹框插件)、bootstra