基於Metronic的Bootstrap開發框架總覽

時間 2019-11-17

標籤基於 metronic bootstrap 開發框架總覽欄目 Bootstarp 简体版

原文原文鏈接

基於Metronic的Bootstrap開發框架經驗總結（1）-框架總覽及菜單模塊的處理

最近一直不少事情，博客停下來很久沒寫了，整理下思路，把最近研究的基於Metronic的Bootstrap開發框架進行經驗的總結出來和你們分享下，同時也記錄本身對Bootstrap開發的學習研究的點點滴滴，但願在開一個《基於MVC4+EasyUI的Web開發框架經驗總結》的系列文章，逐步介紹這個響應式框架的點點滴滴。javascript

Bootstrap是一個前端的技術框架，不少平臺均可以採用，JAVA/PHP/.NET均可以用來作前端界面，整合JQuery能夠實現很是豐富的界面效果，目前也有不少Bootstrap的插件可以提供給你們使用，可是在國內不少基於Bootstrap的介紹不少仍是停留在教學的基礎上，介紹Bootstrap的各類基礎知識和簡單的使用；本文但願以基於C#的MVC實際項目的基礎上，對Bootstrap開發框架進行全面的案例介紹，以實際項目的代碼和效果截圖進行講解，力求詳盡、直觀爲你們介紹這方面的經驗和心得。html

一、基於Metronic的Bootstrap開發框架總覽

Metronic是一個國外的基於HTML、JS等技術的Bootstrap開發框架整合，整合了不少Bootstrap的前端技術和插件的使用，是一個很是不錯的技術框架。本文以這個爲基礎，結合我對MVC的Web框架的研究，整合了基於MVC的Bootstrap開發框架，使之可以符合實際項目的結構須要的實際項目。前端

如下是我總體性項目的總的效果圖。java

啓動菜單區的內容，動態從數據庫裏面獲取，系統頂欄放置一些信息展現，以及提供用戶對我的數據快速處理，如查看我的信息、註銷、鎖屏等操做，內容區域則主要是可視化展現的數據，能夠經過樹列表控件、表格控件進行展現，通常數據還有增刪改查、以及分頁的須要，所以須要整合各類功能的處理。另外，用戶的數據，除了查詢展現外，還須要有導入、導出等相關操做，這些是常規性的數據處理功能。肯定好這些規則和界面效果後，咱們能夠經過代碼生成工具進行生成，快速生成這些Web項目的界面效果了。數據庫

二、Bootstrap開發框架菜單展現

整個框架涉及了不少內容，包括常規Bootstrap的各類CSS特性的使用，以及菜單欄、Bootstrap圖標管理、系統頂欄、樹形控件JSTree、Portlet容器、Modal對話框、Tab控件、、下拉列表Select二、複選框iCheck、多文本編輯控件summernote、文件及圖片上傳展現fileinput、提示控件bootstrap-toastr和sweetalert、數值調整控件touchspin、視頻播放展現控件video-player等等，這些特性在總體性的解決方案裏面都有設計，集合這些優秀的插件，可以爲咱們的框架提供更強大的功能和豐富的界面體驗。bootstrap

本節繼續回到框架的開始部分，菜單的處理和展現。通常爲了管理方便，菜單分爲三級，選中的菜單和別的菜單樣式有所區分，菜單能夠摺疊最小化，效果以下所示。緩存

在Bootstrap，構建菜單是一個相對比較容易的事情，主要是利用了UL和LI，經過樣式的處理，就能夠實現了菜單的佈局設置了，代碼以下所示。併發

                <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">行業動態</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>
                                行業動態
                            </li>
                            <li>
                                <a href="#">
                                    <i class="icon-home"></i>
                                    <span class="badge badge-danger">4</span>
                                    政策法規
                                </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>
                                    動態信息
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>

可是，咱們通常的菜單是動態變化的，也就是須要從數據庫裏面獲取，並設置到前端顯示，這樣咱們就須要在MVC的控制器裏面，輸出菜單的內容，而後綁定到前端的界面上，實現菜單數據的動態化，同時這也是權限控制的基礎處理。框架

在基類裏面，咱們能夠在用戶登錄後，獲取菜單的數據放到ViewBag對象裏面。ide

具體代碼以下所示，先判斷用戶是否登錄，若是登錄，則獲取用戶的菜單數據，存在ViewBag裏面待用。

        /// <summary>
        /// 重寫基類在Action執行以前的處理
        /// </summary>
        /// <param name="filterContext">重寫方法的參數</param>
        protected override void OnActionExecuting(ActionExecutingContext filterContext)
        {
            base.OnActionExecuting(filterContext);

            //獲得用戶登陸的信息
            CurrentUser = Session["UserInfo"] as UserInfo;
            if (CurrentUser == null)
            {
                Response.Redirect("/Login/Index");//若是用戶爲空跳轉到登陸界面
            }
            else
            {
                //設置受權屬性，而後賦值給ViewBag保存
                ConvertAuthorizedInfo();
                ViewBag.AuthorizeKey = AuthorizeKey;

                //登陸信息統一設置
                ViewBag.FullName = CurrentUser.FullName;
                ViewBag.Name = CurrentUser.Name;

                ViewBag.MenuString = GetMenuString();
                //ViewBag.MenuString = GetMenuStringCache(); //使用緩存，隔一段時間更新
            }
        }

其中，GetMenuString函數就是對菜單的組裝處理。數據庫中菜單的信息是一個樹形結構，以下所示。

咱們能夠根據數據庫的菜單信息，構建一部分界面用到的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

例如三級菜單就能夠經過代碼進行生成。

                        //三級
                        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);

固然，若是想提升併發量，能夠減小菜單的頻繁檢索，把這部分數據放到MemeryCache裏面，以下處理便可。

        public string GetMenuStringCache()
        {
            string itemValue = MemoryCacheHelper.GetCacheItem<string>("GetMenuStringCache", delegate()
                {
                    return GetMenuString();
                },
                null, DateTime.Now.AddMinutes(5) //5分鐘之後過時，從新獲取
            );
            return itemValue;
        }

三、佈局頁面的使用

同時，咱們爲了提升頁面的重用，通常狀況下，是把每一個頁面相同部分的內容抽離出來，放到總的佈局頁面上，這樣處理內容區域外，其餘部分所有是繼承自佈局視圖頁面的內容了，咱們的動態菜單部分，也是在佈局視圖裏面的一部份內容。

上圖的_Layout.cshtml就是基於C#的MVC總的佈局視圖頁面。這樣，咱們在這個頁面裏面，設定了菜單的展現內容，以及留出主頁面內容的部分，以及腳本的部分展現，就能夠了。

菜單的展現代碼以下所示：

佈局頁面留出的頁面展現Section以下所示。

因爲Bootstrap通常把JS文件放到最後加載，所以咱們在佈局頁面保留部分必備的Jquery等腳本外，還須要把腳本部份內容放到頁面底部進行加載，而且咱們腳本加載能夠利用MVC的Bundles技術進行壓縮整合處理。關於這方面技術，能夠參考我以前的文章介紹《基於MVC4+EasyUI的Web開發框架經驗總結（11）--使用Bundles處理簡化頁面代碼》。

這樣，咱們在各個子頁面的視圖裏面，引入佈局視圖頁面後，只須要編寫個性化展現內容的部分便可，具體代碼以下所示。

而後在頁面底部，包含所需部分的腳本代碼便可，這樣在頁面生成後，就會依據佈局頁面設置好的順序塊，進行合理的展現，而且是把全部部份內容進行整合了。