基于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 full screen 全屏显示页面元素的方法
Sep 27 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
jQuery菜单插件superfish使用指南
Apr 21 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
原生js实现回复评论功能
Jan 18 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
js实现内置计时器
Dec 16 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
基于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
php5.2.0内存管理改进
2007/01/22 PHP
php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
2013/10/29 Javascript
快速解决jQuery与其他库冲突的方法介绍
2014/01/02 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
JavaScript返回上一页的三种方法及区别介绍
2015/07/04 Javascript
vuex实现简易计数器
2016/10/27 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
在Django的模型和公用函数中使用惰性翻译对象
2015/07/27 Python
python删除列表内容
2015/08/04 Python
利用Python自动监控网站并发送邮件告警的方法
2016/08/24 Python
python操作mysql数据库
2017/03/05 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python用csv写入文件_消除空余行的方法
2018/07/06 Python
Python3.4解释器用法简单示例
2019/03/22 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python tornado上传文件的功能
2020/03/26 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
分享PyCharm最新激活码(真永久激活方法)不用每月找安装参数或最新激活码了
2020/12/27 Python
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
应聘护士自荐信
2013/10/21 职场文书
批评与自我批评材料
2014/02/15 职场文书
企业安全生产责任书
2014/04/14 职场文书
秋天的雨教学反思
2014/04/27 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python