基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理
大家對Bootstrap框架知識了解多少
Bootstrap是一個(gè)前端的技術(shù)框架，很多平臺都可以采用，JAVA/PHP/.NET都可以用來做前端界面，整合JQuery可以實(shí)現(xiàn)非常豐富的界面效果，目前也有很多Bootstrap的插件能夠提供給大家使用，但是在國內(nèi)很多基于Bootstrap的介紹很多還是停留在教學(xué)的基礎(chǔ)上，介紹Bootstrap的各種基礎(chǔ)知識和簡單的使用；本文希望以基于C#的MVC實(shí)際項(xiàng)目的基礎(chǔ)上，對Bootstrap開發(fā)框架進(jìn)行全面的案例介紹，以實(shí)際項(xiàng)目的代碼和效果截圖進(jìn)行講解，力求詳盡、直觀為大家介紹這方面的經(jīng)驗(yàn)和心得。
1、基于Metronic的Bootstrap開發(fā)框架總覽
Metronic是一個(gè)國外的基于HTML、JS等技術(shù)的Bootstrap開發(fā)框架整合，整合了很多Bootstrap的前端技術(shù)和插件的使用，是一個(gè)非常不錯(cuò)的技術(shù)框架。本文以這個(gè)為基礎(chǔ)，結(jié)合我對MVC的Web框架的研究，整合了基于MVC的Bootstrap開發(fā)框架，使之能夠符合實(shí)際項(xiàng)目的結(jié)構(gòu)需要的實(shí)際項(xiàng)目。
以下是我整體性項(xiàng)目的總的效果圖。
啟動菜單區(qū)的內(nèi)容，動態(tài)從數(shù)據(jù)庫里面獲取，系統(tǒng)頂欄放置一些信息展示，以及提供用戶對個(gè)人數(shù)據(jù)快速處理，如查看個(gè)人信息、注銷、鎖屏等操作，內(nèi)容區(qū)域則主要是可視化展示的數(shù)據(jù)，可以通過樹列表控件、表格控件進(jìn)行展示，一般數(shù)據(jù)還有增刪改查、以及分頁的需要，因此需要整合各種功能的處理。另外，用戶的數(shù)據(jù)，除了查詢展示外，還需要有導(dǎo)入、導(dǎo)出等相關(guān)操作，這些是常規(guī)性的數(shù)據(jù)處理功能。確定好這些規(guī)則和界面效果后，我們可以通過代碼生成工具進(jìn)行生成，快速生成這些Web項(xiàng)目的界面效果了。
2、Bootstrap開發(fā)框架菜單展示
整個(gè)框架涉及了很多內(nèi)容，包括常規(guī)Bootstrap的各種CSS特性的使用，以及菜單欄、Bootstrap圖標(biāo)管理、系統(tǒng)頂欄、樹形控件JSTree、Portlet容器、Modal對話框、Tab控件、、下拉列表Select2、復(fù)選框iCheck、多文本編輯控件summernote、文件及圖片上傳展示fileinput、提示控件bootstrap-toastr和sweetalert、數(shù)值調(diào)整控件touchspin、視頻播放展示控件video-player等等，這些特性在整體性的解決方案里面都有設(shè)計(jì)，集合這些優(yōu)秀的插件，能夠?yàn)槲覀兊目蚣芴峁└鼜?qiáng)大的功能和豐富的界面體驗(yàn)。
本節(jié)繼續(xù)回到框架的開始部分，菜單的處理和展示。一般為了管理方便，菜單分為三級，選中的菜單和別的菜單樣式有所區(qū)分，菜單可以折疊最小化，效果如下所示。
在Bootstrap，構(gòu)建菜單是一個(gè)相對比較容易的事情，主要是利用了UL和LI，通過樣式的處理，就可以實(shí)現(xiàn)了菜單的布局設(shè)置了，代碼如下所示。
<ul class="page-sidebar-menu page-sidebar-menu-hover-submenu " data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="start" id="1">
<a href="/Home/index">
<i class="icon-home"></i>
<span class="title">首頁</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
</li>
<li id="2">
<a href="javascript:;">
<i class="icon-basket"></i>
<span class="title">行業(yè)動態(tài)</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
<ul class="sub-menu">
<li class="heading" style="font-size:14px;color:yellow">
<i class="icon-home"></i>
行業(yè)動態(tài)
</li>
<li>
<a href="#">
<i class="icon-home"></i>
<span class="badge badge-danger">4</span>
政策法規(guī)
</a>
</li>
<li>
<a href="#">
<i class="icon-basket"></i>
<span class="badge badge-warning">4</span>
通知公告
</a>
</li>
<li>
<a href="#">
<i class="icon-tag"></i>
<span class="badge badge-success">4</span>
動態(tài)信息
</a>
</li>
</ul>
</li>
</ul>
但是，我們一般的菜單是動態(tài)變化的，也就是需要從數(shù)據(jù)庫里面獲取，并設(shè)置到前端顯示，這樣我們就需要在MVC的控制器里面，輸出菜單的內(nèi)容，然后綁定到前端的界面上，實(shí)現(xiàn)菜單數(shù)據(jù)的動態(tài)化，同時(shí)這也是權(quán)限控制的基礎(chǔ)處理。
在基類里面，我們可以在用戶登陸后，獲取菜單的數(shù)據(jù)放到ViewBag對象里面。
具體代碼如下所示，先判斷用戶是否登陸，如果登陸，則獲取用戶的菜單數(shù)據(jù)，存在ViewBag里面待用。
/// <summary>
/// 重寫基類在Action執(zhí)行之前的處理
/// </summary>
/// <param name="filterContext">重寫方法的參數(shù)</param>
protected override void OnActionExecuting(ActionExecutingContext filterContext)
{
base.OnActionExecuting(filterContext);
//得到用戶登錄的信息
CurrentUser = Session["UserInfo"] as UserInfo;
if (CurrentUser == null)
{
Response.Redirect("/Login/Index");//如果用戶為空跳轉(zhuǎn)到登錄界面
}
else
{
//設(shè)置授權(quán)屬性，然后賦值給ViewBag保存
ConvertAuthorizedInfo();
ViewBag.AuthorizeKey = AuthorizeKey;
//登錄信息統(tǒng)一設(shè)置
ViewBag.FullName = CurrentUser.FullName;
ViewBag.Name = CurrentUser.Name;
ViewBag.MenuString = GetMenuString();
//ViewBag.MenuString = GetMenuStringCache(); //使用緩存，隔一段時(shí)間更新
}
}
其中，GetMenuString函數(shù)就是對菜單的組裝處理。數(shù)據(jù)庫中菜單的信息是一個(gè)樹形結(jié)構(gòu)，如下所示。
我們可以根據(jù)數(shù)據(jù)庫的菜單信息，構(gòu)建一部分界面用到的HTML代碼。
#region 定義的格式模板
// javascript:;
// {0}?tid={1}
var firstTemplate = @"
<li id='{3}'>
<a href='{0}'>
<i class='{1}'></i>
<span class='title'>{2}</span>
<span class='selected'></span>
<span class='arrow open'></span>
</a>";
var secondTemplate = @"
<li class='heading' style='font-size:14px;color:yellow'>
<i class='{0}'></i>
{1}
</li>";
var thirdTemplate = @"
<li id='{3}'>
<a href='{0}'>
<i class='{1}'></i>
{2}
</a>
</li>";
var firstTemplateEnd = "</li>";
var secondTemplateStart = "<ul class='sub-menu'>";
var secondTemplateEnd = "</ul>";
#endregion
例如三級菜單就可以通過代碼進(jìn)行生成。
//三級
icon = subNodeInfo.WebIcon;
//tid 為頂級分類id，sid 為第三級菜單id
tmpUrl = string.Format("{0}{1}tid={2}&sid={3}", subNodeInfo.Url, GetUrlJoiner(subNodeInfo.Url), info.ID, subNodeInfo.ID);
url = (!string.IsNullOrEmpty(subNodeInfo.Url) && subNodeInfo.Url.Trim() != "#") ? tmpUrl : "javascript:;";
sb = sb.AppendFormat(thirdTemplate, url, icon, subNodeInfo.Name, subNodeInfo.ID);
當(dāng)然，如果想提高并發(fā)量，可以減少菜單的頻繁檢索，把這部分?jǐn)?shù)據(jù)放到MemeryCache里面，如下處理即可。
public string GetMenuStringCache()
{
string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache", delegate()
{
return GetMenuString();
},
null, DateTime.Now.AddMinutes(5) //5分鐘以后過期，重新獲取
);
return itemValue;
}
3、布局頁面的使用
同時(shí)，我們?yōu)榱颂岣唔撁娴闹赜茫话闱闆r下，是把每個(gè)頁面相同部分的內(nèi)容抽離出來，放到總的布局頁面上，這樣處理內(nèi)容區(qū)域外，其他部分全部是繼承自布局視圖頁面的內(nèi)容了，我們的動態(tài)菜單部分，也是在布局視圖里面的一部分內(nèi)容。
上圖的_Layout.cshtml就是基于C#的MVC總的布局視圖頁面。這樣，我們在這個(gè)頁面里面，設(shè)定了菜單的展示內(nèi)容，以及留出主頁面內(nèi)容的部分，以及腳本的部分展示，就可以了。
菜單的展示代碼如下所示：
布局頁面留出的頁面展示Section如下所示。
由于Bootstrap一般把JS文件放到最后加載，因此我們在布局頁面保留部分必備的Jquery等腳本外，還需要把腳本部分內(nèi)容放到頁面底部進(jìn)行加載，并且我們腳本加載可以利用MVC的Bundles技術(shù)進(jìn)行壓縮整合處理。關(guān)于這方面技術(shù)，可以參考我之前的文章介紹《基于MVC4+EasyUI的Web開發(fā)框架經(jīng)驗(yàn)總結(jié)（11）--使用Bundles處理簡化頁面代碼》。
這樣，我們在各個(gè)子頁面的視圖里面，引入布局視圖頁面后，只需要編寫個(gè)性化展示內(nèi)容的部分即可，具體代碼如下所示。
然后在頁面底部，包含所需部分的腳本代碼即可，這樣在頁面生成后，就會依據(jù)布局頁面設(shè)置好的順序塊，進(jìn)行合理的展示，并且是把所有部分內(nèi)容進(jìn)行整合了。
4、頁面編輯工具Sublime Text的使用
我前面截圖，很多是VS環(huán)境里面的，不過一般我們編輯視圖頁面的時(shí)候，都是采用Sublime Text這個(gè)強(qiáng)大的編輯工具的，豐富的插件、智能語法提示等，會讓你用了之后愛不釋手，是編輯視圖頁面非?？焖俚睦鳎瑥?qiáng)烈推薦使用。
VS一般我們用來做文件管理，以及編譯等處理就可以了。
以上內(nèi)容是小編給大家介紹的基于BootStrap Metronic開發(fā)框架經(jīng)驗(yàn)小結(jié)【一】框架總覽及菜單模塊的處理的相關(guān)知識，希望對大家有所幫助，如果大家想了解更多資訊敬請關(guān)注腳本之家網(wǎng)站！
- Bootstrap入門書籍之（四）菜單、按鈕及導(dǎo)航
- Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(一)
- Bootstrap打造一個(gè)左側(cè)折疊菜單的系統(tǒng)模板(二)
- BootStrap點(diǎn)擊下拉菜單項(xiàng)后顯示一個(gè)新的輸入框?qū)崿F(xiàn)代碼
- Bootstrap導(dǎo)航欄各元素操作方法(表單、按鈕、文本)
- 第一次接觸神奇的Bootstrap菜單和導(dǎo)航
- 基于Bootstrap實(shí)現(xiàn)下拉菜單項(xiàng)和表單導(dǎo)航條(兩個(gè)菜單項(xiàng)，一個(gè)下拉菜單和登錄表單導(dǎo)航條)
- Bootstrap導(dǎo)航條可點(diǎn)擊和鼠標(biāo)懸停顯示下拉菜單的實(shí)現(xiàn)代碼
- 第九篇Bootstrap導(dǎo)航菜單創(chuàng)建步驟詳解
- Bootstrap菜單按鈕及導(dǎo)航實(shí)例解析
相關(guān)文章
JavaScript讓IE瀏覽器event對象符合W3C DOM標(biāo)準(zhǔn)
IE瀏覽器event對象跟W3C實(shí)現(xiàn)的不一樣.所以自己封裝一個(gè)EventUtil類來讓IE瀏覽器的event對象與W3C一樣.2009-11-11
查看圖片(前進(jìn)后退)功能實(shí)現(xiàn)js代碼
前進(jìn)后退實(shí)現(xiàn)的前提是：images文件夾下圖片的命名是從1~5.jpg有規(guī)律的，感興趣的朋友可以參考下哈，希望可以幫助到你2013-04-04
這篇文章主要介紹了JS中的防抖與節(jié)流及作用詳解，本文通過文字說明加示例代碼的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了JavaScript File分段上傳的相關(guān)資料,需要的朋友可以參考下2016-03-03
javascript定時(shí)保存表單數(shù)據(jù)的代碼
我相信有不少TX用過QQ或163的郵箱吧？他們中有一個(gè)比較有用且有趣的功能，如果您在編寫郵件，那在固定一個(gè)時(shí)間頻率內(nèi)，它會自動將您的郵件內(nèi)容保存起來，以免丟失。2011-03-03
js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容
這篇文章主要介紹了如何使用js控制iframe的高度/寬度讓其自適應(yīng)內(nèi)容,需要的朋友可以參考下2014-04-04
詳解如何用babel轉(zhuǎn)換es6的class語法
這篇文章主要介紹了詳解如何用babel轉(zhuǎn)換es6的class語法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了JAVA截取字符串 substring方法，要的朋友可以參考下2017-04-04
教你如何使用THREEJS實(shí)現(xiàn)一個(gè)可調(diào)節(jié)檔位、可搖頭的電風(fēng)扇
夏天到了，用Three.js實(shí)現(xiàn)一個(gè)可以搖頭和調(diào)節(jié)檔位的電風(fēng)扇，主要使用到Blender處理3D模型，用Vite+Typescript搭建項(xiàng)目框架，這篇文章主要介紹了使用THREEJS實(shí)現(xiàn)一個(gè)可調(diào)節(jié)檔位、可搖頭的電風(fēng)扇,需要的朋友可以參考下2023-06-06
JavaScript是一種描述型腳本語言，由瀏覽器進(jìn)行動態(tài)的解析與執(zhí)行，瀏覽器對于不同的方式有不同的解析順序，詳細(xì)介紹如下，感興趣的朋友可以參考下哈2013-05-05