直奔主题~
1.框架搭建~.net
在搭建框架得过程中,想必很多人会遇到与我类似得问题
(1)就是把全量包直接导入到vs中,vs直接卡死。无力回天得那种死法。
解决:在试了几次不行得情况下,就只能按照系统自带得demo引用路径整理一下需要引用得JS css ....
https://download.csdn.net/download/lllooollpp/10816540 有需要得小伙伴可以下载。
(2)导入后按照Demo中得starter.html 页,进行布局,细节都是泛泛得HTML CSS JS 得知识,不多说了。
界面图如下:
左侧菜单栏,右侧为可切换的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<IBll.Service.IMenuService>();
var ItemMenu = svc.GetMenuItem();
if (ItemMenu.Count() > 0)
{
StringBuilder sbstr = new StringBuilder();
sbstr.Append("<ul class=\"sidebar-menu\" data-widget=\"tree\">");
var round =new Random();
foreach (MenuDto item in ItemMenu)
{
if (item.IsHaveChild)
{
string childHtml = GenerateChildMenuHtml(item);
sbstr.Append("<li title=\"" + item.MeunURL + "?ran=" + round.Next()+"\" class=\"treeview\">");
sbstr.Append(" <a href=\"#\"><i class=\"fa " + item.Ico + "\"></i> <span>" + item.MenuName + "</span>");
sbstr.Append("<span class=\"pull-right-container\">");
sbstr.Append(" <i class=\"fa fa-angle-left pull-right\"></i>");
sbstr.Append("</span> </a >");
sbstr.Append(childHtml);
sbstr.Append("</li>");
}
else
{
sbstr.Append("<li title=\"" + item.MeunURL + "?ran=" + round.Next() + "\"><a href=\"#\"><i class=\"fa " + item.Ico + "\"></i> <span>" + item.MenuName + "</span></a></li>");
}
}
sbstr.Append("</ul>");
return sbstr.ToString();
}
return Newtonsoft.Json.JsonConvert.SerializeObject(svc);
}
private static string GenerateChildMenuHtml(MenuDto menus)
{
StringBuilder sb = new StringBuilder();
List<MenuDto> childList = menus.ChildItem;
sb.Append("<ul class=\"treeview-menu\" style=\"display: none;\">");
foreach (MenuDto item in childList)
{
sb.Append("<li id=\""+ item .MenuKey+ "\" title = \"\"><a href=\"#\">" + item.MenuName + "</a></li>");
}
sb.Append("</ul>");
return sb.ToString();
}
1.3.前端获取并添加到adminlte中
$("#MenuDiv").append(result.d);
这样一套菜单的加载就搞定了。
1.4遇到的问题:
菜单加载后,左侧菜单中有子项的点击不能展开。这种情况是时常出现,时常好使,很难琢磨。用了好多方法。
- 最开始以为是刷新网页的时候走了缓存 304 200 文件,后来加上了时间戳,也是不好用。
- 不让页面缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META HTTP-EQUIV="expires" CONTENT="0">
<meta charset="utf-8"> - 禁用掉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方法过多,冗余代码也很多。所以这部分大家应当引以为戒。一定要再设计初期把相应的业务场景都想到,形成统一的共识的跳转方式方法。