基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍


Posted in Javascript onMay 12, 2016

本文主要介绍这个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 Metronic开发框架经验小结【八】框架功能总体界面介绍

使得控制器能够获得很好的继承关系,并能以更少的代码,更高效的开发效率,实现Web项目的开发工作,整个控制器的设计思路如下所示。

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

2.1 首页图表模块界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2.2 系统顶栏功能

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

编辑界面如下所示:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

查看内容界面如下所示:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2.4 客户信息管理

客户列表界面如下所示:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

客户信息编辑界面:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

客户信息导入界面:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2.5 客户联系人管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

客户联系人查看界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

附件信息界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2.6 通讯录管理

通讯录列表

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2.7 权限管理

1) 系统用户 列表界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

系统用户导入界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

系统用户编辑界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

系统用户的RDLC报表界面。

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

2)机构管理界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

3)用户角色管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

角色可操作功能集合展示

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

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

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

角色包含机构管理:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

4)系统功能管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

5)系统菜单管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

编辑菜单信息界面:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

选择菜单图标界面:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

6)系统登录日志管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

7)通用字典管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

8)菜单图标管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

9)图片相册管理

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

编辑图片界面如下所示:

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

图片查看界面

基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍

以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
Oct 24 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 #Javascript
使用bootstrap3开发响应式网站
May 12 #Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 #Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 #Javascript
You might like
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
JQuery小知识
2010/10/15 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
JavaScript动态创建div等元素实例讲解
2016/01/06 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
Python使用logging结合decorator模式实现优化日志输出的方法
2016/04/16 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
详解django2中关于时间处理策略
2019/03/06 Python
Windows上安装tensorflow  详细教程(图文详解)
2020/02/04 Python
在tensorflow实现直接读取网络的参数(weight and bias)的值
2020/06/24 Python
C#笔试题集合
2013/06/21 面试题
优良学风班总结材料
2014/02/08 职场文书
创先争优活动方案
2014/02/12 职场文书
先进集体获奖感言
2014/02/13 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
法制宣传月活动方案
2014/05/11 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
导游词之崇武古城
2019/10/07 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS