前言
- 寫完第一篇后，我一直在想接下來應該從哪一方面開始講。后來我覺得不用那么死板的把每一個課程和大綱都列出來吧，畢竟我又不是教書的，呵呵。。。我覺得就像做實驗一樣，我們一部分一部分的完成，最后總個結果應該就出來呢。那么這一篇就來把前端的樣子弄出來，至少得知道長成什么樣吧。接下來就應該開始捯飭了。。。
下載前端框架EasyUI
- 到EasyUI的官網下載壓縮包。一個是基於GPL的開源版，一個是商業版。我們自己做研究就下個開源版呢。目前是1.4.3的版本，解壓縮后，我們去掉一些不要的文件，畢竟項目中放那么多不用的文件也是浪費。
- demo文件夾：里存放的都是easyui的官方示例，在項目中我們不需要加載，刪除里面的全部文件夾，只留下demo.css樣式文件；
- demo-mobile文件夾：看名字就知道是移動開發要用的呢，我們把總個demo-mobile文件夾全部刪掉；
- locale文件夾：這是easyui的本地和全球化語言包，我們留下中文簡體、中文繁體、英文三個js文件，分別是easyui-lang-zh_CN.js、easyui-lang-zh_TW.js、easyui-lang-en.js，其他的全部刪除掉；
- plugins和src文件夾：存放一些有用的插件，這個保留；
- themes文件夾：里面存放easyui為我們提供的5種皮膚，這個保留；
- 刪除jquery.easyui.mobile.js文件；
將EasyUI整合到MVC中
- 在解決方案的Web工程項目中新建一個EasyUI的文件夾，將先前整理好的EasyUI文件復制進去。
- 在解決方案的Web工程項目中新建一個data的文件夾,存放我們需要演示的json格式的數據，因為現在項目的數據庫還沒有搭建，所以可以讀取json格式文件中存放的本地數據來查看效果。
設計系統的登錄界面和主界面
- 登錄界面：添加AccountController,在里面添加Login視圖，返回空的view就行呢，目前我們只是做演示搭建。在Login視圖中添加如下代碼：
@{ ViewBag.Title = "Login"; } <script type="text/javascript" language="javascript"> function clearForm() { $('#ff').form('clear'); } </script> <div style="display: block; width: 400px; margin: 0 auto; text-align: left; margin-top:200px;"> <div class="easyui-panel" title="登錄界面" style="width: 400px"> <div style="padding:10px 60px 20px 60px"> <form id="ff" action="/Main/Index" method="post"> <div class="fitem"> <label>用戶名:</label> <input id="UserName" name="UserName" class="easyui-validatebox" required="true" value="admin"> </div> <div style="height:20px;"></div> <div class="fitem"> <label>密 碼:</label> <input id="UserPwd" name="UserPwd" class="easyui-validatebox" required="true" type="password" value="123"> </div> <div style="height:20px;"></div> <div style="text-align:center;padding:5px"> <input class="easyui-linkbutton" type="submit" value="登 錄" /> <input class="easyui-linkbutton" type="button" value="清 除" onclick="clearForm()" /> </div> </form> </div> </div> </div> <div style="text-align:center; margin-top:20px; font-size:14px; font-weight:400;"> Copyright © 2015 http//:wangweimutou.cnblogs.com. All Rights Reserved. </div>
- 但我們運行的Login視圖的時候，應該是沒有樣式的，接下來我們就要結合mvc來設置一下_Layout，就行asp.net中的母版頁一樣，每個頁面都可以調用此樣式。打開視圖當中Shared文件夾下的_Layout.cshtml，引用EasyUI的樣式和js文件，修改其中的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/EasyUI/themes/default/easyui.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/EasyUI/themes/icon.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/EasyUI/demo/demo.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.8.2.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/EasyUI/jquery.easyui.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/EasyUI/locale/easyui-lang-zh_CN.js")" type="text/javascript"></script>
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@RenderBody()
@RenderSection("scripts", required: false)
</body>
</html>
- 現在運行我們的登錄頁面應該就有樣式呢，使用的themes里面的default樣式，如果想使用其他的樣式就把上面的default換成themes里的其他主題，比如bootstrap、gray等。這里提供的5套皮膚，如果你對前端樣式比較熟悉，也可以仿照的編寫自定義的皮膚。
- 主界面設置：添加MainController，添加Index和Test視圖，Index中返回用戶名和角色名稱，Test返回空視圖就行。Test視圖用於主頁面的部分視圖。Index視圖中的代碼如下：
@{ ViewBag.Title = "系統后台框架"; Layout = null; } <!DOCTYPE html> <html> <head> <title>系統后台框架</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="../../EasyUI/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="../../EasyUI/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="../../EasyUI/demo/demo.css" rel="stylesheet" type="text/css" /> <script src="../../EasyUI/jquery.min.js" type="text/javascript"></script> <script src="../../EasyUI/jquery.easyui.min.js" type="text/javascript"></script> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0px; padding: 0px; } .fl { float: left; display: inline; } .fr { float: right; display: inline; } .leftcol, .rightcol { width: 30%; height: 24px; text-align: right; font-size: 14px; font-weight: 400; color: red; } .main { height: 24px; text-align: center; font-size: 14px; font-weight: 400; } .content { margin-right: 30px; } .cl { clear: both; } </style> </head> <body> <div class="easyui-layout" style="width:100%;height:100%; margin:0px;"> <div data-options="region:'north'" style="height: 55px; background-image: url(/Content/themes/base/images/topbg.png); background-position: right bottom; "> <div style="text-align: left; float: left; height: 100%; width: 60%; margin-left:4px; font-size:xx-large; font-weight:600; "> XXX系統后台界面 </div> <div style="float:right; margin-top:4px; margin-left:8px; margin-right:8px;"> <a href="/Account/Login"> <strong>退出</strong> </a> </div> <div style="float:right; margin-top:4px; margin-left:8px;"> <a href="#"> <strong>密碼修改 |</strong></a> </div> <div style="float:right; margin-top:4px; margin-left:8px;"> <a href="#"><strong>設置 |</strong></a> </div> </div> <div data-options="region:'south'" style="height:25px;"> <div class="content"> <div class="fl leftcol"></div> <div class="fr rightcol">當前用戶：@ViewBag.UserName 所屬角色：@ViewBag.RoleName</div> <div class="main">Copyright © 2015 http//:wangweimutou.cnblogs.com. All Rights Reserved.</div> <div class="cl"></div> </div> </div> <div data-options="region:'west',split:true" title="系統主菜單" style="width:168px;"> <div class="easyui-accordion" data-options="fit:true,border:false"> <ul class="easyui-tree" id="txt" data-options="url:'../../data/tree_data.json',method:'get',animate:true,lines:true"></ul> </div> </div> <div data-options="region:'center'" borer="false"> <div class="easyui-tabs" data-options="fit:true,border:false,plain:true" id="tt"> <div title="系統主頁" style="padding:10px"> @Html.Partial("Test") </div> </div> </div> </div> <script language="javascript" type="text/javascript"> $(document).ready(function () { $('#txt').tree({ onClick: function (node) { if (node.treelevel != 2) //如果點擊的不是父節點 { //alert(node.text + node.treelevel); addTab(node.text, node.url, node.iconCls); } } }); }) function addTab(title, url, iconCls) { if ($('#tt').tabs('exists', title)) { $('#tt').tabs('select', title); } else { var content = '<iframe scrolling="auto" frameborder="0" src="' + url + '" style="width:99.5%;height:99.5%;"></iframe>'; $('#tt').tabs('add', { title: title, content: content, closable: true, iconCls: iconCls }); } } </script> </body> </html>
- 主窗體采用采用easyui-layout來划分，里面嵌套的div可以參照data-options屬性將區域進行詳細划分。比如<div data-options="region:'north'"></div>就代表北部區域，也就是頂部區域，easyui-layout里面划分區域是按照地圖的表示方法：上北下南，左西右東
- 主窗體中含有一個addTab(title, url, iconCls)方法，這個就是操作tab標簽的方法。采用的還是添加iframe的方式，不過EasyUI幫我們做好了封裝。因此我們只需要傳入標簽名稱(title)、頁面鏈接(url)、標簽圖標(iconCls)就可以達到我們想要的效果。
- 左邊的菜單，我們可以利用easyui-tree來完成，可以通過data-options的get方式加載我們想要的json數據，注意一定要是json格式。后期我們就是通過數據庫來讀取菜單項。示例中讀取的data文件夾中tree_data.json文件，我們將以下json格式的數據添加到此文件中：
[{ "id":1, "text":"系統權限管理", "iconCls":"icon-large-chart", "children":[{ "text":"用戶管理", "iconCls":"icon-large-picture", "url":"/System/UserList" },{ "text":"角色管理", "iconCls":"icon-large-clipart", "url":"/System/RoleList" },{ "text":"菜單管理", "iconCls":"icon-large-shapes", "url":"/System/MenuList" },{ "text":"權限設置", "iconCls":"icon-large-smartart", "url":"/System/PermitList" }] }, { "id":2, "text":"數據管理", "iconCls":"icon-save", "children":[{ "text":"數據錄入", "url":"System/Test2" },{ "text":"Test", "url":"System/Test2" }] }]
- 接下來就是調節一下左邊頁面菜單的樣式，因為我發現tree的菜單項太擁擠呢。不過我現在調整的是default皮膚下的easyui.css樣式。如果使用的是別的皮膚，那就要修改對應皮膚下的easyui.css樣式。
tree-title { display: inline-block; font-size: 12px; height: 28px; line-height: 28px; padding: 0 2px; text-decoration: none; vertical-align: middle; white-space: nowrap; } .tree-expanded, .tree-collapsed, .tree-folder, .tree-file, .tree-checkbox, .tree-indent { display: inline-block; height: 18px; overflow: hidden; vertical-align: middle; width: 16px; } .tree-node { height: 28px; white-space: nowrap; cursor: pointer; }
- 到此，主界面搭建完成。可能是沒有亮點的東西，會覺得枯燥，但是我們從0開始，就必須一步一步來搭建。調整樣式這些都是前端工程師所擅長的，EasyUI只是為我們提供了默認的一下樣式，如果可以，你可以發揮強大的css功力，就像博客園為我們提供了上百套的皮膚，但如果喜歡，我們還是可以按照自己的方式來進行修改。主界面完成后效果如下：
備注
- 完成此篇后，我們就把頁面給搭建完成了，雖然沒什么美觀度，呵呵。現在Web工程登錄和主界面的靜態頁面效果完成。到下一篇，我們就把代碼部署到Visual Studio Online(TFVC)中，部署后，我們再進行代碼的編寫。
- 到此雖然框架還是空的，但是我們可以看到頁面效果呢。博客園的存儲空間有限，我還是把這個空的框架放到網盤上吧。如果園友本地的環境合適，就可以下載按照以后的博文進行操作呢。點此下載