AdminLte 开发中遇到得坑

直奔主题~

1.框架搭建~.net 

在搭建框架得过程中,想必很多人会遇到与我类似得问题

  (1)就是把全量包直接导入到vs中,vs直接卡死。无力回天得那种死法。

解决:在试了几次不行得情况下,就只能按照系统自带得demo引用路径整理一下需要引用得JS css ....

https://download.csdn.net/download/lllooollpp/10816540 有需要得小伙伴可以下载。

(2)导入后按照Demo中得starter.html 页,进行布局,细节都是泛泛得HTML CSS JS 得知识,不多说了。

界面图如下:

AdminLte 开发中遇到得坑_第1张图片

左侧菜单栏,右侧为可切换的DIV(本来合计用IFREAME做,但缺点比较多,后来就用div加载的方式进行页面切换了)。

2.开发阶段~ .net 

开发阶段遇到得问题很多,很多很头疼得东西,希望大家能引以为戒,少走弯路。

(1)左侧菜单动态生成后,点击右侧下拉按钮无法下拉。

解决: 反正现在也没实际得解决,只是用js对下拉属性      display: none /block 的控制进行合并和展开。

虽然有些生硬,但是目的达到了。下面是创建菜单步骤,希望有遇到类似问题加以指点。

1.1在数据库中创建了菜单表,结构如下

CREATE TABLE "ETLMONITOR"."EMRAM_MENU" 
   (    "PID" NUMBER NOT NULL ENABLE, 
    "MENUNAME" VARCHAR2(50), 
    "MEUNURL" VARCHAR2(50), 
    "SORTORDER" NUMBER, 
    "PARENTID" NUMBER, 
    "ICO" VARCHAR2(32), 
    "ISSHOW" NUMBER, 
    "MENUKEY" VARCHAR2(50) NOT NULL ENABLE
   ) 

1.2后台动态拼接前端HTML

 public static string GetMenuItem()
        {
            var svc =   ObjectContainer.GetObject();
            var ItemMenu = svc.GetMenuItem();
            if (ItemMenu.Count() > 0)
            {
                StringBuilder sbstr = new StringBuilder();
                sbstr.Append("");
                return sbstr.ToString();
            }

            return Newtonsoft.Json.JsonConvert.SerializeObject(svc);
        }



  private static string GenerateChildMenuHtml(MenuDto menus)
        {
            StringBuilder sb = new StringBuilder();
            List childList = menus.ChildItem;
            sb.Append("
    ");             foreach (MenuDto item in childList)             {                 sb.Append("
  • " + item.MenuName + "
  • ");             }             sb.Append("
");             return sb.ToString();         }

1.3.前端获取并添加到adminlte中

 $("#MenuDiv").append(result.d);

这样一套菜单的加载就搞定了。

1.4遇到的问题:

菜单加载后,左侧菜单中有子项的点击不能展开。这种情况是时常出现,时常好使,很难琢磨。用了好多方法。

  • 最开始以为是刷新网页的时候走了缓存   304  200 文件,后来加上了时间戳,也是不好用。
  •    不让页面缓存     
       
       
       
       
  • 禁用掉F5 
        //禁用F5
        //$(document).ready(function () {
        //    $(document).bind("keydown", function (e) {
        //        e = window.event || e;
        //        if (e.keyCode == 116) {
        //            e.keyCode = 0;
        //            return false;
        //        }
        //    });
        //});   依然不好用,折腾一圈后,得出个结论,根本不是缓存得问题(成本有点小小得大啊)。
  • 实在没办法了,只能用js控制了,就如开头时候说得控制他得css样式,与其框架进行交互。

(2)页面中js冲突、css冲突

        前期没有统一框架、开发人员分散、前端知识匮乏,所以一些控件基本上都是网上找来得。这就导致了整个项目得引用5花八门。

引用得东西也很多种,就单单jquery就引用了3个版本。到集成得时候发现整个web系统就首页能看,其他得没有好用得。所以大家又花费了些时间清理了冗余得css js 等文件。

(3)头疼得页面切换

 框架是Adminlte得,但是切换页面是大家想出来的。没有统一的设计,都是需要跳转就调用tabpage方法,如果不适用再开发新的,结果导致页面tabpage方法过多,冗余代码也很多。所以这部分大家应当引以为戒。一定要再设计初期把相应的业务场景都想到,形成统一的共识的跳转方式方法。

你可能感兴趣的:(前端)