基于Metronic的Bootstrap开发框架经验总结（8）--框架功能总体界面介绍

转载来源

在前面介绍了一系列的《基于Metronic的Bootstrap开发框架经验总结》的随笔文章，随笔主要是介绍各个知识点的内容，对框架的总体性界面没有很好的阐述，本篇随笔主要介绍这个Bootstrap框架的总体性功能界面，介绍其中用到的知识点和整体性的界面。希望读者对框架有一个更加直观、真实的认识了解，界面设计以及相关思路可以借鉴提高，也可以对相关的内容进行相互探讨，共同提高。

1、《基于Metronic的Bootstrap开发框架》技术特点

1）采用最新最炫的Bootstrap响应式框架技术

整个基于Metronic的Bootstrap开发框架，界面部分采用较新的Bootstrap技术，采用当前最新的Bootstrap3.x，集成了众多功能强大的Bootstrap控件。

Bootstrap是一个前端的技术框架，很多平台都可以采用，JAVA/PHP/.NET都可以用来做前端界面，整合JQuery可以实现非常丰富的界面效果，目前也有很多Bootstrap的插件能够提供给大家使用，本框架集合了众多最为优秀的插件，能给我们Web的用户体验提升到一个前所未有的水平。

Metronic是一个国外的基于HTML、JS等技术的Bootstrap开发框架整合，整合了很多Bootstrap的前端技术和插件的使用，是一个非常不错的技术框架。本框架以这个为基础，结合我对MVC的Web框架的研究，整合了基于MVC的Bootstrap开发框架，使之能够符合实际项目的结构需要。

框架后台采用基于C#的MVC技术，是目前.NET开发最为成熟流行的技术，框架后台数据库支持Oracle、SqlServer、MySql、Sqlite、Access等常规数据库，可通过配置进行自由切换，使用Enterprise Library模块进行数据访问的控制，使得数据访问更方便轻松。

整体框架开发采用Visual Studuio 2013以及页面编辑工具Sublime Text结合开发，页面以及后台代码，通过代码生成工具Database2Sharp进行快速开发，实现整体性开发的最大效率提高。

框架的总体结构如下所示：



控制器设计：Bootstrap开发框架沿用了我的《Winform开发框架》和《基于EasyUI的Web框架》的很多架构设计思路和特点，对Controller进行了封装。使得控制器能够获得很好的继承关系，并能以更少的代码，更高效的开发效率，实现Web项目的开发工作，整个控制器的设计思路如下所示。



权限控制：良好的控制器设计规则，可以为Web开发框架本身提供了很好用户访问控制和权限控制，使得用户界面呈现菜单、Web界面的按钮和内容、Action的提交控制，均能在总体权限功能分配和控制之下。



代码快速生成：良好的架构使得无论在业务逻辑层、控制器层、Web界面的UI层，均能提供统一的代码逻辑，这些代码均能通过代码生成工具Database2Sharp进行生成。Web界面代码可以充分利用代码生成工具Database2Sharp的元数据信息，实现Web界面的快速生成。有效减少出错的几率，提高Web界面编码的开发效率和乐趣，更可以使得企业内部的编码模式进行高效的统一。



Enterprise Library代码生成，可以快速生成除界面外的整体性的框架代码，Bootstrap的Web界面代码生成，可以快速生成基于Metronic的Bootstrap的前端界面代码和后台控制器代码，界面部分包括查询、分页、数据展示、数据导入导出、新增、编辑、查看、删除等基础功能界面，生成后我们可以基于这个基础上进行简单、快速的修改即可符合实际需要，极大提高我们Web界面的开发效率。

框架布局：以下是我整体性项目的总的效果图。



【系统菜单栏】的内容，是动态从数据库里面获取的菜单；【系统顶栏】放置一些信息展示，以及提供用户对个人数据快速处理，如查看个人信息、注销、锁屏等操作内容；内容区一般包括【树列表区】、【条件查询区】和【列表数据及分页】内容，内容区域主要是可视化展示的数据，可以通过树列表控件、表格控件进行展示，一般数据还有增删改查、以及分页的需要，因此需要整合各种功能的处理。另外，用户的数据，除了查询展示外，还需要有导入、导出等相关操作，这些是常规性的数据处理功能。

菜单的处理和展示：一般为了管理方便，菜单分为三级，选中的菜单和别的菜单样式有所区分，菜单可以折叠最小化，效果如下所示。

2、《基于Metronic的Bootstrap开发框架》模块界面介绍

2.1 首页图表模块界面



2.2 系统顶栏功能







2.3 行业动态功能（政策法规、通知公告、动态信息）

政策法规/通知公告/动态信息 列表界面





编辑界面如下所示：



查看内容界面如下所示：



2.4 客户信息管理

客户列表界面如下所示：



客户信息编辑界面：



客户信息导入界面：



2.5 客户联系人管理



客户联系人添加/编辑界面



客户联系人查看界面



附件信息界面



2.6 通讯录管理

通讯录列表



通讯录编辑界面如下所示。



2.7 权限管理

1) 系统用户 列表界面



系统用户导入界面



系统用户编辑界面







系统用户的肖像上传和编辑



系统用户删除确认对话框。



系统用户的RDLC报表界面。



2）机构管理界面



组织机构包含用户编辑界面



3）用户角色管理



角色可操作功能集合展示



角色可访问数据权限控制：



角色包含机构管理：



4）系统功能管理



5）系统菜单管理



编辑菜单信息界面：



选择菜单图标界面：



6）系统登录日志管理



7）通用字典管理



8）菜单图标管理



9）图片相册管理



编辑图片界面如下所示：



图片查看界面