基于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是1个海外的依据HTML、JS等技能的Bootstrap开发框架整合,整合了重重Bootstrap的前端技术和插件的使用,是2个分外科学的技能框架。本框架以那么些为根基,结合本身对MVC的Web框架的研商,整合了依据MVC的Bootstrap开发框架,使之能够符合实际项指标结构须要。

框架后台采取基于C#的MVC技术,是最近.NET开发最为成熟流行的技术,框架后台数据库帮忙Oracle、SqlServer、MySql、Sqlite、Access等健康数据库,可透过安顿进行随机切换,使用Enterprise
Library模块进行数量访问的决定,使得数据访问更有益自在。

完全框架开发使用Visual Studuio 2012以及页面编辑工具Sublime
Text结合开发,页面以及后台代码,通过代码生成工具Database2Sharp进行高效支付,完成全部性开发的最大频率增加。

框架的一体化布局如下所示:

图片 1

控制器设计:Bootstrap开发框架沿用了自身的《Winform开发框架》和《基于EasyUI的Web框架》的很多架构设计思路和特征,对Controller举办了包装。使得控制器能够赢得很好的接轨关系,并能以更少的代码,更高效的付出功用,实现Web项目标开发工作,整个控制器的陈设性思路如下所示。

图片 2

权力控制:好好的控制器设计规则,能够为Web开发框架自个儿提供了很好用户访问控制和权力决定,使得用户界面展现菜单、Web界面包车型地铁按钮和剧情、Action的交付控制,均能在整体权限成效分配和决定之下。

图片 3

代码神速转移:完美的架构使得无论在事情逻辑层、控制器层、Web界面包车型大巴UI层,均能提供统一的代码逻辑,那个代码均能经过代码生成工具Database2Sharp进行转移。Web界面代码能够丰盛利用代码生成工具Database2Sharp的元数据音讯,达成Web界面包车型客车敏捷变化。有效压缩失误的可能率,提升Web界面编码的费用效用和意趣,更能够使得集团中间的编码方式开始展览高效的统一。

图片 4 

Enterprise
Library代码生成,能够快速生成除界面外的全部性的框架代码,Bootstrap的Web界面代码生成,能够快捷变化基于Metronic的Bootstrap的前端界面代码和后台控制器代码,界面部分包蕴查询、分页、数据突显、数据导入导出、新增、编辑、查看、删除等基础效用界面,生成后大家能够依照这几个基础上海展览中心开简易、快捷的改动即可符合实际须要,十分的大升高大家Web界面包车型地铁费用功能。

框架布局:以下是自己全部性项目标总的效果图。

图片 5

【系统菜单栏】的剧情,是动态从数据Curry面获取的菜单;【系统顶栏】放置一些音讯显示,以及提供用户对民用数据急忙处理,如查看个人消息、注销、锁屏等操作内容;内容区一般包含【树列表区】、【条件查询区】和【列表数据及分页】内容,内容区域重点是可视化体现的数码,能够因此树列表控件、表格控件进行体现,一般数量还有增加和删除改查、以及分页的须要,由此需求组合各类效率的拍卖。其余,用户的数目,除了查询展现外,还索要有导入、导出等辅车相依操作,这个是常规性的多少处理成效。

菜单的拍卖和体现:一般为了管住有利于,菜单分为三级,选中的食谱和别的菜单样式富有分化,菜单能够折叠最小化,效果如下所示。

图片 6 
 图片 7

 

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

2.1 首页图表模块界面

图片 8

2.2 系统顶栏功用

图片 9

 

图片 10

 

2.3 行业动态功效(政策法规、布告公告、动态音讯)

政策法规/公告布告/动态新闻 列表界面

图片 11

编纂界面如下所示:

图片 12

查看内容界面如下所示:

图片 13

 

2.4 客户信息保管

客户列表界面如下所示:

图片 14

客户音讯编辑界面:

图片 15

客户消息导入界面:

图片 16

 

2.5 客户联系人管理

图片 17

客户联系人拉长/编辑界面

图片 18

客户关系人查看界面

图片 19

附属类小部件音讯界面

图片 20

 

2.6 通信录管理

简报录列表

图片 21

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

图片 22

 

2.7 权限管理 

1) 系统用户 列表界面

图片 23

系统用户导入界面

图片 24

系统用户编辑界面

图片 25

图片 26

图片 27

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

图片 28

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

图片 29

系统用户的库罗德DLC报表界面。

图片 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

 

假诺有趣味,能够一连参照多重文章:

依照Metronic的Bootstrap开发框架经验总括(1)-框架总览及菜单模块的处理

听闻Metronic的Bootstrap开发框架经验总计(2)–列表分页处理和插件JSTree的运用

基于Metronic的Bootstrap开发框架经验计算(3)–下拉列表Select2插件的施用

依照Metronic的Bootstrap开发框架经验计算(4)–Bootstrap图标的领到和利用 

基于Metronic的Bootstrap开发框架经验总计(5)–Bootstrap文件上传插件File
Input的使用

遵照Metronic的Bootstrap开发框架经验总括(6)–对话框及提示框的处理和优化

听别人讲Metronic的Bootstrap开发框架经验总结(7)–数据的导入、导出及附属类小部件的查阅读处理理

基于Metronic的Bootstrap开发框架经验计算(8)–框架功用完全界面介绍

依据Metronic的Bootstrap开发框架经验总括(9)–完毕Web页面内容的打字与印刷预览和保存操作

 

相关文章