「MVC+Nhibernate+Jquery-EasyUI」信息發佈系統 第二篇（數據庫結構、登陸窗口、以及主界面）
1、在上一篇文章中，主要說的就是把主框架搭建起來，而且Nhibernate能達到增刪改查的地步。測試好以後再來看這篇文章，個人主框架相對來講簡答一點，重點仍是實現系統的功能，以及對Jquery-EasyUI的使用。先把數據庫的結構展現出來，記得是ORM思想，先寫Model類和*.hbm.xml,再生成數據庫，我這邊已經寫完，因此直接給你們看看數據庫的結構吧！javascript
分別介紹一下各個表的意思：css
Users:用戶表。News:新聞表。UserModules:模塊表（與權限表UserLimits是一對多的關係）。UserLimits：權限表。UserPriviliges:是Users表與UserLimits表之間產生的第三個表，它倆之間是多對多的關係。HomeImages:圖片專題表（發表完以後，前臺顯示圖片的功能！下面的這個截圖！）html
2、表建完以後，就能夠直接作系統的功能了，思路就按照我當初作系統的思路來吧，先寫後臺再寫前臺，後臺的功能實現了，前臺說白了只是一個展現數據的地方。因此我第一步固然是寫「佈局頁」，所謂的母板頁，MVC中houtai文件夾下Shared下，添加_houtai.cshtml，可是在此以前最好創建一個Areas（緣由是：有個前臺和後臺兩個大的模塊），看看下面的截圖：java
3、要實現下面截圖的功能，主要是對Jquery-EasyUI的功能要熟悉。jquery
4、大致結構是用的「easyui-layout」佈局，上下左右這種格式。數據庫
一、 左邊的菜單欄是用的Jquery-EasyUI的「Accordion」。bootstrap
（1）、在我們的博客園裏,菜單項不多使用According的,大部分使用的是那個Tree，第一前面能夠有icon圖標，第2、樹形結構能夠有多級菜單。我這個就比較簡單了。cookie
（2）、個人According前面也能夠有圖標，文字前面放的就是一個<img />標籤，不過確實也挺好看的。呵呵。。框架
二、中間部分用的Tabs頁，Content里加入Iframe標籤。ide
三、直接上代碼吧...
第一部分：引入JS包括：Jquery-EasyUI的，還有本身定義的"houtai.js",後面用到的時候會講到。
<link href="@Url.Content("~/Content/houtai.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/jquery-easyui-1.3.2/jquery-1.8.0.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script> <script src="@Url.Content("~/jquery-easyui-1.3.2/jquery.easyui.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js")" type="text/javascript"></script> <!--themesTX是方便之後「更換主題」功能來作的！記得<link />裏得放一個id="easyuiTheme",之後寫Jquery就能夠從Cookie中取值，這樣比較容易取到！--> @{var themesTX = "pepper-grinder";} <link id="easyuiTheme" href="@Url.Content("~/jquery-easyui-1.3.2/themes/" + themesTX + "/easyui.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/ChangeTheme.js")" type="text/javascript"></script> <link href="@Url.Content("~/jquery-easyui-1.3.2/themes/icon.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/houtai.js")" type="text/javascript"></script> <script src="@Url.Content("~/ckeditor/ckeditor.js")" type="text/javascript"></script> <script src="@Url.Content("~/ckfinder/ckfinder.js")" type="text/javascript"></script>
第二部分：body裏的"north「部分，記得放一個@RenderBody()，佈局頁必須得有一個，之後作登陸功能的時候就是嵌套到它裏面的。
<div>@RenderBody()</div>
<div region="north" title="" split="true" style="height:100px;">
<div class="easyui-layout" data-options="fit:true" style="background:#e8d1d1;">
<div id="top" data-options="region:'center'" style="background-color:#bebee5;text-align:center;font-size:20px;font-weight:bolder;color:Blue;padding-top:20px;">信息發佈網站後臺管理系統
<p style="color:#e86161;font-size:13px;">Author：田鑫(使用MVC+NHibernate+Jquery-EasyUI框架)</p>
</div>
<div data-options="region:'east',split:true"style="width:500px;background-color:#bebee5;">
<div style="float: right; padding-right:30px; font-size: 14px; padding-top: 30px; ">
<b id="currentTime"></b> @Html.ActionLink("退出系統", "Index", "Home", new { area = "houtai" }, new { style = "color:#ec3030" })
<br />
<a href="javascript:void(0)" id="mb" iconCls="icon-edit">更換主題</a>
</div>
</div>
</div>
</div>
第三部分：body裏的"West",最主要的菜單項。那個<img />中的Icon本身在網上下載吧，好多素材。記得有個id="bodyColor"，是剛進入登陸頁面的時候，沒有登陸進來的時候這塊「菜單內容和Tabs內容」是不能展現出來的，用Jquery進行了隱藏，下面會有Jquery代碼的講解。
<div region="west" class="menu_top" href="" split="true" title="菜單欄" style="width:150px;" id="bodyColor" > <div id="accordionId" class="easyui-accordion" data-options="fit:true,border:false"> <div title="個人首頁" id="MenuID" iconcls="icon-CategorizeMenu" data-options="selected:true" style="padding: 10px; overflow: auto;"> <p><img width="18px;" height="18px;" src="../../../../ICON/basket_edit.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/Permission">訪問統計</a></p> </div> <div title="系統管理" id="MenuID" iconcls="icon-edit" style="padding: 10px;"> <p><img width="18px;" height="18px;" src="../../../../ICON/group.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">用戶管理</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/transmit_go.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/LimitManage">權限管理</a></p> @*<a href="javascript:void(0)" src="/houtai/Privilige/ZTreeList">權限管理</a></p>*@ <p><img width="18px;" height="18px;" src="../../../../ICON/wrench.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/ModuleManage">模塊管理</a></p> </div> <div title="導航管理" id="MenuID" iconcls="icon-plugin_big" style="padding: 10px"> <p><img width="18px;" height="18px;" src="../../../../ICON/chart_curve.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">網站導航</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/comments_add.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">相關連接</a></p> </div> <div title="公文發佈" id="MenuID" iconcls="icon-group" style="padding: 10px"> <p><img width="18px;" height="18px;" src="../../../../ICON/key.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">公告設置</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/lock_break.png" /> <a href="javascript:void(0)" src="/houtai/Home/ImageManege">首頁圖片專題</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/layers.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">重要通知</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/lightning.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">執業註冊</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/lightbulb_off.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">政策法規</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/package_green.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">繼續教育</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/paintcan.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">考試考務</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/palette.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">圖書信息</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/style.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">考前培訓</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/script_code.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">訂書通知</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/text_uppercase.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">其餘</a></p> </div> <div title="主任信箱" id="MenuID" iconcls="icon-ok" style="padding: 10px"> <p><img width="18px;" height="18px;" src="../../../../ICON/email_edit.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">主任信箱</a></p> </div> <div title="相關知識" id="MenuID" iconcls="icon-edit" style="padding: 10px"> <p><img width="18px;" height="18px;" src="../../../../ICON/world.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">執業師執業範圍</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/table_relationship.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">執業師權利義務</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/ipod.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">執業師法律責任</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/color_wheel.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">執業師註冊條件</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/paintcan.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">繼續教育標準</a></p> </div> <div title="執業師分類導航" id="MenuID" iconcls="icon-TableDrawTable" style="padding: 10px"> <p><img width="18px;" height="18px;" src="../../../../ICON/package_green.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">常見問題答疑</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/basket_remove.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">註冊申報流程</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/flag_blue.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">註冊條件及所需材料</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/folder_image.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">報考指南</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/palette.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">服務承諾</a></p> </div> <div title="組織機構" id="MenuID" iconcls="icon-tip" style="padding: 10px"> <p><img width="18px;" height="18px;" src="../../../../ICON/basket_edit.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">領導小組</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/flag_orange.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">中心領導</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/basket_edit.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">中心綜合科</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/film.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">教育考試科</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/keyboard.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">註冊管理科</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/chart_bar_error.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">建造管理科</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/flag_green.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">圖書發行部</a></p> <p><img width="18px;" height="18px;" src="../../../../ICON/tux.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">各市主管部門</a></p> </div> <div title="登陸管理" id="MenuID" iconcls="icon-ShowCustomPropertiesPage" style="padding: 10px"> <p><img width="18px;" height="18px;" src="../../../../ICON/zoom_in.png" /> <a href="javascript:void(0)" src="/houtai/Privilige/UserManeger">密碼修改</a></p> </div> </div> </div>
第四部分：Tabs內容，也就是中間那部分，展現數據的地方。默認放了一個<iframe>標籤。之後id=tabWork的地方都會加入iframe,是在Jquery中寫的。id="bodyColor1"這部分剛進入登陸頁面的時候最好也得是隱藏的。
<div region="center" fit="true" title="系統管理" style="overflow:hidden;" id="bodyColor1" >
<div id="tabWork" fit="true" border="false">
<div title="首頁" id="HomeIndex">
<iframe id="frmWorkArea2" width="100%" height="100%" frameborder="0" scrolling="yes" src="/qiantai/Home/Index"></iframe>
</div>
</div>
</div>
第五部分：最底層，放一些版權的信息，公司的地址，等等。
<div region="south" href="" title="" style="overflow:hidden;height:40px;">
<center>版權全部:田鑫 Email：tianxinbest@163.com<br />Copyright(C) All Rights Reserved</center>
</div>
第六部分：還記得截圖中的右鍵Tabs頁，出現好幾種「關閉「的選項嗎？沒錯就是下面的代碼！它也是個DIV。他的JS部分，稍後增長。。。
<div id="mm" class="easyui-menu" style="width:150px;"> <div title="refresh" data-options="iconCls:'icon-reload'">刷新</div> <div class="menu-sep"></div> <div title="close" data-options="iconCls:'icon-Delete'">關閉</div> <div title="closeOther" data-options="iconCls:'icon-Delete'">關閉其餘</div> <div title="closeAll" data-options="iconCls:'icon-Delete'">關閉全部</div> </div>
第七部分：還記得更換主題的時候下拉框裏不少種可選擇的主題嗎？他也是個DIV，其中有個ChangeName()方法，也在JS中（他就是選擇一個主題以後，進行Cookie的保存，而後把<head>中的.css樣式換成你選擇的，前面在css定義的<link id="easyuiTheme" href="@Url.Content("~/jquery-easyui-1.3.2/themes/" + themesTX + "/easyui.css")" rel="stylesheet" type="text/css" />爲何用id，你應該明白了吧！！
）。
<div id="ThemeMenu" style="width:150px;">
<div onclick="ChangeName('black');" data-options="iconCls:'icon-redo'" title="black">黑色</div>
<div onclick="ChangeName('bootstrap');" data-options="iconCls:'icon-TableDrawTable'" title="bootstrap">淡白色</div>
<div class="menu-sep"></div>
<div onclick="ChangeName('default');" data-options="iconCls:'icon-ShowCustomPropertiesPage'" title="default">淺藍色</div>
<div onclick="ChangeName('gray');" data-options="iconCls:'icon-CategorizeMenu'" title="gray">灰色</div>
<div onclick="ChangeName('metro');" data-options="iconCls:'icon-directory'" title="metro">metro</div>
<div class="menu-sep"></div>
<div onclick="ChangeName('pepper-grinder');" data-options="iconCls:'icon-sum'" title="pepper-grinder">金屬色</div>
</div>
第八部分:記得前面說到的，除了引入的Css和JS那些內容，其餘的都在」Body「裏。下面說說在<head>中的JS
<script type="text/javascript"> $(function () { //剛進入頁面，菜單項和Tabs內容是隱藏的 $("#bodyColor").css("display", "none"); $("#bodyColor1").css("display", "none"); $("#tabWork").tabs({ fit: true, border: false, onContextMenu: function (e, title) { e.preventDefault(); $("#mm").menu('show', { left: e.pageX, top: e.pageY }).data('tabTitle', title); } }); //點擊菜單項連接進行添加Tabs TabsAdd(); //右鍵菜單出現多種「關閉」選項 CloseFunc(); //對主題進行menu $("#mb").menubutton({ menu: "#ThemeMenu" }); }); </script>
第九部分：houtai.js代碼,包括：右鍵關閉、更換主題、點擊菜單項連接添加Tabs。
//------------------------Author:田鑫-----------------------------------------// //右鍵刷新方法 function refreshTab(title) { var tab = $("#tabWork").tabs("getTab", title); $("#tabWork").tabs("update", { tab: tab, options: tab.panel("options") }); } //點擊連接的時候建立Iframe function TabsAdd() { //點擊<a>標籤連接的時候，右側添加Tabs，Tabs裏是個Iframe。 $("#accordionId p a").click(function () { //得到連接文字，目的顯示在Tabs的Title上 var titile = $(this).text(); //建立IFrame var strHtml = '<iframe frameborder="0" width="90%" height="90%" src="' + $(this).attr("src") + '"></iframe > '; //獲取到文字前「圖片」 var iconUrl=$(this).siblings("img").attr("src"); var iconimg=iconUrl.substring(17, iconUrl.length-4); //圖片格式爲「icon-****」,在jquery-easyui-1.3.2--->themes--->icon.css進行添加本身的圖片，通常爲.png格式 var iconcssimg='icon-'+iconimg; //先判斷是否已經加載過 tab頁籤 var isExist = $('#tabWork').tabs('exists', titile); if (!isExist) { //將主框架的 iframe跳轉到菜單指向的地址 $('#tabWork').tabs('add', { title: titile, content: strHtml, iconCls: iconcssimg, closable: true, fit: true, border:"false", tools: [{ iconCls: "icon-mini-refresh", handler: function () { refreshTab(titile) } }] }); } else { //若是存在獲取焦點 $('#tabWork').tabs('select', titile); } }); } //------------------------田鑫：右鍵菜單關閉Tabs-----------------------------------------// function CloseFunc() { $("#mm").menu({ onClick: function (item) { var curTabTitle = $(this).data('tabTitle'); var type = $(item.target).attr('title'); if (type === 'refresh') { $("#tabWork").tabs('getTab', curTabTitle).panel('refresh'); return; } if (type === 'close') { var t = $("#tabWork").tabs('getTab', curTabTitle); if (t.panel('options').closable) { $("#tabWork").tabs('close', curTabTitle); } return; } var allTabs = $("#tabWork").tabs('tabs'); var closeTabsTitle = []; $.each(allTabs, function () { var opt = $(this).panel('options'); if (opt.closable && opt.title != curTabTitle && type === 'closeOther') { closeTabsTitle.push(opt.title); } else if (opt.closable && type === 'closeAll') { closeTabsTitle.push(opt.title); } }); for (var i = 0; i < closeTabsTitle.length; i++) { $("#tabWork").tabs('close', closeTabsTitle[i]); } } }); } //TX：更換主題 //步驟：一、加入Jquery.Cookie,二、Theme的CSS中加入ID 三、寫方法 ChangeName(themeName) 四、前臺調用 function ChangeName(themeName) {/* 更換主題 */ var $easyuiTheme = $('#easyuiTheme'); var url = $easyuiTheme.attr('href'); var href = url.substring(0, 21) + "themes/" + themeName + "/easyui.css"; $easyuiTheme.attr('href', href); var $iframe = $('iframe'); if ($iframe.length > 0) { for ( var i = 0; i < $iframe.length; i++) { var ifr = $iframe[i]; $(ifr).contents().find('#easyuiTheme1').attr('href', href); } } $.cookie('easyuiThemeName', themeName, { expires : 7 }); }; if ($.cookie('easyuiThemeName')) { ChangeName($.cookie('easyuiThemeName')); }
5、今天還想把登陸窗口的功能給說一下了，可是時間的關係，留在下一篇吧，這篇的內容也夠多的，朋友們也得搭建一段時間。若是對您還有幫助的話，關注我吧，也給我一些動力繼續寫下去，順便點擊右下角的」推薦「，讓更多的朋友瞭解和學習。若是有問題，請留言。。。
相關文章
- 1. 學生信息管理系統之第三篇登陸界面java代碼
- 2. Java圖形化界面登陸窗口
- 3. MFC 簡單的用戶登陸界面（在主程序窗口以前）
- 4. 物資管理信息系統2 -- 主窗體界面
- 5. 人事管理系統主界面與登陸界面--WPF
- 6. 學生信息管理系統----登陸後的主界面設計
- 7. 使用java+Mysql數據庫作一個簡單的登陸窗口界面
- 8. IDA Pro 數據庫文件、函數窗口、結構體窗口
- 9. WPF登陸界面及程序主界面設計
- 10. 用VB與數據庫結合製作的登陸界面系統
- 更多相關文章...
- • HTTP 消息結構 - HTTP 教程
- • 登錄MySQL數據庫 - MySQL教程
- • Flink 數據傳輸及反壓詳解
- • 算法總結-滑動窗口
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
歡迎關注本站公眾號,獲取更多信息
