“MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构、登录窗口、以及主界面)
一、在上一篇文章中,主要说的就是把主框架搭建起来,并且Nhibernate能达到增删改查的地步。测试好之后再来看这篇文章,我的主框架相对来说简答一点,重点还是实现系统的功能,以及对Jquery-EasyUI的使用。先把数据库的结构展示出来,记得是ORM思想,先写Model类和*.hbm.xml,再生成数据库,我这边已经写完,所以直接给大家看看数据库的结构吧!
分别介绍一下各个表的意思:
Users:用户表。News:新闻表。UserModules:模块表(与权限表UserLimits是一对多的关系)。UserLimits:权限表。UserPriviliges:是Users表与UserLimits表之间产生的第三个表,它俩之间是多对多的关系。HomeImages:图片专题表(发表完之后,前台显示图片的功能!下面的这个截图!)
二、表建完之后,就可以直接做系统的功能了,思路就按照我当初做系统的思路来吧,先写后台再写前台,后台的功能实现了,前台说白了只是一个展示数据的地方。所以我第一步当然是写“布局页”,所谓的母板页,MVC中houtai文件夹下Shared下,添加_houtai.cshtml,但是在此之前最好建立一个Areas(原因是:有个前台和后台两个大的模块),看看下面的截图:
三、要实现下面截图的功能,主要是对Jquery-EasyUI的功能要熟悉。
四、大体结构是用的“easyui-layout”布局,上下左右这种格式。
1、 左边的菜单栏是用的Jquery-EasyUI的“Accordion”。
(1)、在咱们的博客园里,菜单项很少使用According的,大部分使用的是那个Tree,第一前面可以有icon图标,第二、树形结构可以有多级菜单。我这个就比较简单了。
(2)、我的According前面也可以有图标,文字前面放的就是一个<img />标签,不过确实也挺好看的。呵呵。。
2、中间部分用的Tabs页,Content里加入Iframe标签。
3、直接上代码吧...
第一部分:引入JS包括:Jquery-EasyUI的,还有自己定义的"houtai.js",后面用到的时候会讲到。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<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(),布局页必须得有一个,以后做登录功能的时候就是嵌套到它里面的。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<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= "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= "150px;" <span style= "color: #ff6600;" >id= "bodyColor" </span> > <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;" <span style= "color: #ff6600;" ><strong>id= "bodyColor1" </strong></span> > <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= "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= "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。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
//------------------------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:更换主题 //步骤:1、加入Jquery.Cookie,2、Theme的CSS中加入ID 3、写方法 ChangeName(themeName) 4、前台调用 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' )); } |
五、今天还想把登录窗口的功能给说一下了,但是时间的关系,留在下一篇吧,这篇的内容也够多的,朋友们也得搭建一段时间。如果对您还有帮助的话,关注我吧,也给我一些动力继续写下去,顺便点击右下角的”推荐“,让更多的朋友了解和学习。如果有问题,请留言。。。