基于Metronic的Bootstrap開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)（1）-框架總覽及菜單模塊的處理

最近一直很多事情，博客停下來(lái)好久沒(méi)寫(xiě)了，整理下思路，把最近研究的基于Metronic的Bootstrap開(kāi)發(fā)框架進(jìn)行經(jīng)驗(yàn)的總結(jié)出來(lái)和大家分享下，同時(shí)也記錄自己對(duì)Bootstrap開(kāi)發(fā)的學(xué)習(xí)研究的點(diǎn)點(diǎn)滴滴，希望在開(kāi)一個(gè)《基于MVC4+EasyUI的Web開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)》的系列文章，逐步介紹這個(gè)響應(yīng)式框架的點(diǎn)點(diǎn)滴滴。

Bootstrap是一個(gè)前端的技術(shù)框架，很多平臺(tái)都可以采用，JAVA/PHP/.NET都可以用來(lái)做前端界面，整合JQuery可以實(shí)現(xiàn)非常豐富的界面效果，目前也有很多Bootstrap的插件能夠提供給大家使用，但是在國(guó)內(nèi)很多基于Bootstrap的介紹很多還是停留在教學(xué)的基礎(chǔ)上，介紹Bootstrap的各種基礎(chǔ)知識(shí)和簡(jiǎn)單的使用；本文希望以基于C#的MVC實(shí)際項(xiàng)目的基礎(chǔ)上，對(duì)Bootstrap開(kāi)發(fā)框架進(jìn)行全面的案例介紹，以實(shí)際項(xiàng)目的代碼和效果截圖進(jìn)行講解，力求詳盡、直觀(guān)為大家介紹這方面的經(jīng)驗(yàn)和心得。

1、基于Metronic的Bootstrap開(kāi)發(fā)框架總覽

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

以下是我整體性項(xiàng)目的總的效果圖。

啟動(dòng)菜單區(qū)的內(nèi)容，動(dòng)態(tài)從數(shù)據(jù)庫(kù)里面獲取，系統(tǒng)頂欄放置一些信息展示，以及提供用戶(hù)對(duì)個(gè)人數(shù)據(jù)快速處理，如查看個(gè)人信息、注銷(xiāo)、鎖屏等操作，內(nèi)容區(qū)域則主要是可視化展示的數(shù)據(jù)，可以通過(guò)樹(shù)列表控件、表格控件進(jìn)行展示，一般數(shù)據(jù)還有增刪改查、以及分頁(yè)的需要，因此需要整合各種功能的處理。另外，用戶(hù)的數(shù)據(jù)，除了查詢(xún)展示外，還需要有導(dǎo)入、導(dǎo)出等相關(guān)操作，這些是常規(guī)性的數(shù)據(jù)處理功能。確定好這些規(guī)則和界面效果后，我們可以通過(guò)代碼生成工具進(jìn)行生成，快速生成這些Web項(xiàng)目的界面效果了。

2、Bootstrap開(kāi)發(fā)框架菜單展示

整個(gè)框架涉及了很多內(nèi)容，包括常規(guī)Bootstrap的各種CSS特性的使用，以及菜單欄、Bootstrap圖標(biāo)管理、系統(tǒng)頂欄、樹(shù)形控件JSTree、Portlet容器、Modal對(duì)話(huà)框、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ù)回到框架的開(kāi)始部分，菜單的處理和展示。一般為了管理方便，菜單分為三級(jí)，選中的菜單和別的菜單樣式有所區(qū)分，菜單可以折疊最小化，效果如下所示。

在Bootstrap，構(gòu)建菜單是一個(gè)相對(duì)比較容易的事情，主要是利用了UL和LI，通過(guò)樣式的處理，就可以實(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">首頁(yè)</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è)動(dòng)態(tài)</span>
				<span class="selected"></span>
				<span class="arrow open"></span>
			</a>
			<ul class="sub-menu">
				<li class="heading" >
					<i class="icon-home"></i>
					行業(yè)動(dòng)態(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>
						動(dòng)態(tài)信息                                </a>
				</li>
			</ul>
		</li>
	</ul>

但是，我們一般的菜單是動(dòng)態(tài)變化的，也就是需要從數(shù)據(jù)庫(kù)里面獲取，并設(shè)置到前端顯示，這樣我們就需要在MVC的控制器里面，輸出菜單的內(nèi)容，然后綁定到前端的界面上，實(shí)現(xiàn)菜單數(shù)據(jù)的動(dòng)態(tài)化，同時(shí)這也是權(quán)限控制的基礎(chǔ)處理。

在基類(lèi)里面，我們可以在用戶(hù)登陸后，獲取菜單的數(shù)據(jù)放到ViewBag對(duì)象里面。

具體代碼如下所示，先判斷用戶(hù)是否登陸，如果登陸，則獲取用戶(hù)的菜單數(shù)據(jù)，存在ViewBag里面待用。

        /// <summary>
        /// 重寫(xiě)基類(lèi)在A(yíng)ction執(zhí)行之前的處理
        /// </summary>
        /// <param name="filterContext">重寫(xiě)方法的參數(shù)</param>
        protected override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            base.OnActionExecuting(filterContext);

            //得到用戶(hù)登錄的信息
            CurrentUser = Session["UserInfo"] as UserInfo;
            if (CurrentUser == null)
            {
                Response.Redirect("/Login/Index");//如果用戶(hù)為空跳轉(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ù)就是對(duì)菜單的組裝處理。數(shù)據(jù)庫(kù)中菜單的信息是一個(gè)樹(shù)形結(jié)構(gòu)，如下所示。

我們可以根據(jù)數(shù)據(jù)庫(kù)的菜單信息，構(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í)菜單就可以通過(guò)代碼進(jìn)行生成。

	//三級(jí)
	icon = subNodeInfo.WebIcon;
	//tid 為頂級(jí)分類(lèi)id，sid 為第三級(jí)菜單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分鐘以后過(guò)期，重新獲取
            );
            return itemValue;
        }

3、布局頁(yè)面的使用

同時(shí)，我們?yōu)榱颂岣唔?yè)面的重用，一般情況下，是把每個(gè)頁(yè)面相同部分的內(nèi)容抽離出來(lái)，放到總的布局頁(yè)面上，這樣處理內(nèi)容區(qū)域外，其他部分全部是繼承自布局視圖頁(yè)面的內(nèi)容了，我們的動(dòng)態(tài)菜單部分，也是在布局視圖里面的一部分內(nèi)容。

上圖的_Layout.cshtml就是基于C#的MVC總的布局視圖頁(yè)面。這樣，我們?cè)谶@個(gè)頁(yè)面里面，設(shè)定了菜單的展示內(nèi)容，以及留出主頁(yè)面內(nèi)容的部分，以及腳本的部分展示，就可以了。

菜單的展示代碼如下所示：

布局頁(yè)面留出的頁(yè)面展示Section如下所示。

由于Bootstrap一般把JS文件放到最后加載，因此我們?cè)诓季猪?yè)面保留部分必備的Jquery等腳本外，還需要把腳本部分內(nèi)容放到頁(yè)面底部進(jìn)行加載，并且我們腳本加載可以利用MVC的Bundles技術(shù)進(jìn)行壓縮整合處理。關(guān)于這方面技術(shù)，可以參考我之前的文章介紹《基于MVC4+EasyUI的Web開(kāi)發(fā)框架經(jīng)驗(yàn)總結(jié)（11）--使用Bundles處理簡(jiǎn)化頁(yè)面代碼》。

這樣，我們?cè)诟鱾€(gè)子頁(yè)面的視圖里面，引入布局視圖頁(yè)面后，只需要編寫(xiě)個(gè)性化展示內(nèi)容的部分即可，具體代碼如下所示。

然后在頁(yè)面底部，包含所需部分的腳本代碼即可，這樣在頁(yè)面生成后，就會(huì)依據(jù)布局頁(yè)面設(shè)置好的順序塊，進(jìn)行合理的展示，并且是把所有部分內(nèi)容進(jìn)行整合了。

4、頁(yè)面編輯工具Sublime Text的使用

我前面截圖，很多是VS環(huán)境里面的，不過(guò)一般我們編輯視圖頁(yè)面的時(shí)候，都是采用Sublime Text這個(gè)強(qiáng)大的編輯工具的，豐富的插件、智能語(yǔ)法提示等，會(huì)讓你用了之后愛(ài)不釋手，是編輯視圖頁(yè)面非常快速的利器，強(qiáng)烈推薦使用。

VS一般我們用來(lái)做文件管理，以及編譯等處理就可以了。