基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【八】框架功能總體界面介紹

更新時間：2016年05月12日 12:11:42 作者：伍華聰

這篇文章主要介紹了基于BootStrap Metronic開發(fā)框架經(jīng)驗小結(jié)【八】框架功能總體界面介紹的相關(guān)資料,需要的朋友可以參考下

本文主要介紹這個Bootstrap框架的總體性功能界面，介紹其中用到的知識點和整體性的界面。希望讀者對框架有一個更加直觀、真實的認識了解，界面設(shè)計以及相關(guān)思路可以借鑒提高，也可以對相關(guān)的內(nèi)容進行相互探討，共同提高。

1、《基于Metronic的Bootstrap開發(fā)框架》技術(shù)特點

1）采用最新最炫的Bootstrap響應(yīng)式框架技術(shù)

整個基于Metronic的Bootstrap開發(fā)框架，界面部分采用較新的Bootstrap技術(shù)，采用當前最新的Bootstrap3.x，集成了眾多功能強大的Bootstrap控件。

Bootstrap是一個前端的技術(shù)框架，很多平臺都可以采用，JAVA/PHP/.NET都可以用來做前端界面，整合JQuery可以實現(xiàn)非常豐富的界面效果，目前也有很多Bootstrap的插件能夠提供給大家使用，本框架集合了眾多最為優(yōu)秀的插件，能給我們Web的用戶體驗提升到一個前所未有的水平。

Metronic是一個國外的基于HTML、JS等技術(shù)的Bootstrap開發(fā)框架整合，整合了很多Bootstrap的前端技術(shù)和插件的使用，是一個非常不錯的技術(shù)框架。本框架以這個為基礎(chǔ)，結(jié)合我對MVC的Web框架的研究，整合了基于MVC的Bootstrap開發(fā)框架，使之能夠符合實際項目的結(jié)構(gòu)需要。

框架后臺采用基于C#的MVC技術(shù)，是目前.NET開發(fā)最為成熟流行的技術(shù)，框架后臺數(shù)據(jù)庫支持Oracle、SqlServer、MySql、Sqlite、Access等常規(guī)數(shù)據(jù)庫，可通過配置進行自由切換，使用Enterprise Library模塊進行數(shù)據(jù)訪問的控制，使得數(shù)據(jù)訪問更方便輕松。

整體框架開發(fā)采用Visual Studuio 2013以及頁面編輯工具Sublime Text結(jié)合開發(fā)，頁面以及后臺代碼，通過代碼生成工具Database2Sharp進行快速開發(fā)，實現(xiàn)整體性開發(fā)的最大效率提高。

框架的總體結(jié)構(gòu)如下所示：

使得控制器能夠獲得很好的繼承關(guān)系，并能以更少的代碼，更高效的開發(fā)效率，實現(xiàn)Web項目的開發(fā)工作，整個控制器的設(shè)計思路如下所示。

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

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

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

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

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

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