基于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 行业动态功能(政策法规、通知公告、动态信息)
政策法规/通知公告/动态信息 列表界面


编辑界面如下所示:
[图片上传中。。。(12)]
查看内容界面如下所示:

2.4 客户信息管理
客户列表界面如下所示:
[图片上传中。。。(14)]
客户信息编辑界面:


客户信息导入界面:

2.5 客户联系人管理


客户联系人添加/编辑界面
[图片上传中。。。(18)]
客户联系人查看界面
[图片上传中。。。(19)]
附件信息界面
[图片上传中。。。(20)]

2.6 通讯录管理
通讯录列表
[图片上传中。。。(21)]
通讯录编辑界面如下所示。
[图片上传中。。。(22)]

2.7 权限管理

  1. 系统用户 列表界面
    [图片上传中。。。(23)]
    系统用户导入界面
    [图片上传中。。。(24)]
    系统用户编辑界面
    [图片上传中。。。(25)]
    [图片上传中。。。(26)]
    [图片上传中。。。(27)]
    系统用户的肖像上传和编辑
    [图片上传中。。。(28)]
    系统用户删除确认对话框。
    [图片上传中。。。(29)]
    系统用户的RDLC报表界面。
    [图片上传中。。。(30)]

2)机构管理界面
[图片上传中。。。(31)]
组织机构包含用户编辑界面
[图片上传中。。。(32)]

3)用户角色管理
[图片上传中。。。(33)]
角色可操作功能集合展示
[图片上传中。。。(34)]
角色可访问数据权限控制:
[图片上传中。。。(35)]
角色包含机构管理:
[图片上传中。。。(36)]
4)系统功能管理
[图片上传中。。。(37)]
5)系统菜单管理
[图片上传中。。。(38)]
编辑菜单信息界面:
[图片上传中。。。(39)]
选择菜单图标界面:
[图片上传中。。。(40)]

6)系统登录日志管理
[图片上传中。。。(41)]

7)通用字典管理
[图片上传中。。。(42)]
8)菜单图标管理
[图片上传中。。。(43)]
9)图片相册管理
[图片上传中。。。(44)]
编辑图片界面如下所示:
[图片上传中。。。(45)]
图片查看界面
[图片上传中。。。(46)]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容