基于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 相关文章推荐
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
js控制table合并具体实现
Feb 20 Javascript
angular.foreach 循环方法使用指南
Jan 06 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
angularjs实现的前端分页控件示例
Feb 10 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
js回溯法计算最佳旅行线路代码实例
Sep 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
同时提取多条新闻中的文本一例
2006/10/09 PHP
php数组总结篇(一)
2008/09/30 PHP
理解PHP中的stdClass类
2014/04/18 PHP
Destoon实现多表查询示例
2014/08/21 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
php中preg_match的isU代表什么意思
2015/10/01 PHP
PHP explode()函数的几个应用和implode()函数有什么区别
2015/11/05 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
用javascript替换URL中的参数值示例代码
2014/01/27 Javascript
js中各种类型的变量在if条件中是true还是false
2014/07/16 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
jQuery实现获取动态添加的标签对象示例
2018/06/28 jQuery
node.js使用redis储存session的方法
2018/09/26 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
Python使用三种方法实现PCA算法
2017/12/12 Python
Django自定义manage命令实例代码
2018/02/11 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
python基于opencv检测程序运行效率
2019/12/28 Python
python清空命令行方式
2020/01/13 Python
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
NET程序员上机面试题
2015/05/23 面试题
计算机毕业生求职信
2014/06/10 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android