基於BootStrap Metronic開發框架經驗小結【八】框架功能總體界面介紹

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 基於BootStrap Metronic開發框架經驗小結【八】框架功能總體界面介紹

編輯：關於JavaScript

本文主要介紹這個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進行快速開發，實現整體性開發的最大效率提高。

框架的總體結構如下所示：

使得控制器能夠獲得很好的繼承關系，並能以更少的代碼，更高效的開發效率，實現Web項目的開發工作，整個控制器的設計思路如下所示。

權限控制：良好的控制器設計規則，可以為Web開發框架本身提供了很好用戶訪問控制和權限控制，使得用戶界面呈現菜單、Web界面的按鈕和內容、Action的提交控制，均能在總體權限功能分配和控制之下。

代碼快速生成：良好的架構使得無論在業務邏輯層、控制器層、Web界面的UI層，均能提供統一的代碼邏輯，這些代碼均能通過代碼生成工具Database2Sharp進行生成。Web界面代碼可以充分利用代碼生成工具Database2Sharp的元數據信息，實現Web界面的快速生成。有效減少出錯的幾率，提高Web界面編碼的開發效率和樂趣，更可以使得企業內部的編碼模式進行高效的統一。

Enterprise Library代碼生成，可以快速生成除界面外的整體性的框架代碼，Bootstrap的Web界面代碼生成，可以快速生成基於Metronic的Bootstrap的前端界面代碼和後台控制器代碼，界面部分包括查詢、分頁、數據展示、數據導入導出、新增、編輯、查看、刪除等基礎功能界面，生成後我們可以基於這個基礎上進行簡單、快速的修改即可符合實際需要，極大提高我們Web界面的開發效率。

框架布局：以下是我整體性項目的總的效果圖。

【系統菜單欄】的內容，是動態從數據庫裡面獲取的菜單；【系統頂欄】放置一些信息展示，以及提供用戶對個人數據快速處理，如查看個人信息、注銷、鎖屏等操作內容；內容區一般包括【樹列表區】、【條件查詢區】和【列表數據及分頁】內容，內容區域主要是可視化展示的數據，可以通過樹列表控件、表格控件進行展示，一般數據還有增刪改查、以及分頁的需要，因此需要整合各種功能的處理。另外，用戶的數據，除了查詢展示外，還需要有導入、導出等相關操作，這些是常規性的數據處理功能。

菜單的處理和展示：一般為了管理方便，菜單分為三級，選中的菜單和別的菜單樣式有所區分，菜單可以折疊最小化，效果如下所示。