（转）基于Metronic的Bootstrap开发框架经验总结（1）-框架总览及菜单模块的处理

时间 2019-11-17

标签基于 metronic bootstrap 开发框架经验总结总览菜单模块处理栏目 Bootstarp 繁體版

原文原文链接

http://www.cnblogs.com/wuhuacong/p/4757984.htmljavascript

最近一直不少事情，博客停下来很久没写了，整理下思路，把最近研究的基于Metronic的Bootstrap开发框架进行经验的总结出来和你们分享下，同时也记录本身对Bootstrap开发的学习研究的点点滴滴，但愿在开一个《基于MVC4+EasyUI的Web开发框架经验总结》的系列文章，逐步介绍这个响应式框架的点点滴滴。html

Bootstrap是一个前端的技术框架，不少平台均可以采用，JAVA/PHP/.NET均可以用来作前端界面，整合JQuery能够实现很是丰富的界面效果，目前也有不少Bootstrap的插件可以提供给你们使用，可是在国内不少基于Bootstrap的介绍不少仍是停留在教学的基础上，介绍Bootstrap的各类基础知识和简单的使用；本文但愿以基于C#的MVC实际项目的基础上，对Bootstrap开发框架进行全面的案例介绍，以实际项目的代码和效果截图进行讲解，力求详尽、直观为你们介绍这方面的经验和心得。前端

一、基于Metronic的Bootstrap开发框架总览

Metronic是一个国外的基于HTML、JS等技术的Bootstrap开发框架整合，整合了不少Bootstrap的前端技术和插件的使用，是一个很是不错的技术框架。本文以这个为基础，结合我对MVC的Web框架的研究，整合了基于MVC的Bootstrap开发框架，使之可以符合实际项目的结构须要的实际项目。java

如下是我总体性项目的总的效果图。数据库

启动菜单区的内容，动态从数据库里面获取，系统顶栏放置一些信息展现，以及提供用户对我的数据快速处理，如查看我的信息、注销、锁屏等操做，内容区域则主要是可视化展现的数据，能够经过树列表控件、表格控件进行展现，通常数据还有增删改查、以及分页的须要，所以须要整合各类功能的处理。另外，用户的数据，除了查询展现外，还须要有导入、导出等相关操做，这些是常规性的数据处理功能。肯定好这些规则和界面效果后，咱们能够经过代码生成工具进行生成，快速生成这些Web项目的界面效果了。bootstrap

二、Bootstrap开发框架菜单展现

整个框架涉及了不少内容，包括常规Bootstrap的各类CSS特性的使用，以及菜单栏、Bootstrap图标管理、系统顶栏、树形控件JSTree、Portlet容器、Modal对话框、Tab控件、、下拉列表Select二、复选框iCheck、多文本编辑控件summernote、文件及图片上传展现fileinput、提示控件bootstrap-toastr和sweetalert、数值调整控件touchspin、视频播放展现控件video-player等等，这些特性在总体性的解决方案里面都有设计，集合这些优秀的插件，可以为咱们的框架提供更强大的功能和丰富的界面体验。缓存

本节继续回到框架的开始部分，菜单的处理和展现。通常为了管理方便，菜单分为三级，选中的菜单和别的菜单样式有所区分，菜单能够折叠最小化，效果以下所示。并发

在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的控制器里面，输出菜单的内容，而后绑定到前端的界面上，实现菜单数据的动态化，同时这也是权限控制的基础处理。ide

在基类里面，咱们能够在用户登录后，获取菜单的数据放到ViewBag对象里面。

具体代码以下所示，先判断用户是否登录，若是登录，则获取用户的菜单数据，存在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处理简化页面代码》。

这样，咱们在各个子页面的视图里面，引入布局视图页面后，只须要编写个性化展现内容的部分便可，具体代码以下所示。

而后在页面底部，包含所需部分的脚本代码便可，这样在页面生成后，就会依据布局页面设置好的顺序块，进行合理的展现，而且是把全部部份内容进行整合了。

四、页面编辑工具Sublime Text的使用

我前面截图，不少是VS环境里面的，不过通常咱们编辑视图页面的时候，都是采用Sublime Text这个强大的编辑工具的，丰富的插件、智能语法提示等，会让你用了以后爱不释手，是编辑视图页面很是快速的利器，强烈推荐使用。

VS通常咱们用来作文件管理，以及编译等处理就能够了。