【斗医】【10】Web应用开发20天
? ?本文在前面封裝Hibernate工具的基礎上重點完成用戶登錄功能，目前系統頁面展示的名稱是在HTML中寫死的，所以下面要做的事：若用戶已登錄則顯示用戶名；若用戶未登錄則點擊進入登錄頁面。
一、修改登錄名稱缺省為“登錄”
打開D:\medical\war\js\common\common.js文件，修改generateSystemMenu（）方法方法，修改后
/***?生成系統公共菜單*/ function?generateSystemMenu() {var?systemMenu?=?'<div?class="system_menu">';systemMenu????+=?????'<div?class="system_menu_wrapper">';systemMenu????+=?????????'<div?class="system_menu_search">';systemMenu????+=?????????????'<input?type="text"?id="system_menu_searcher">';systemMenu????+=?????????'</div>';systemMenu????+=?????????'<div?class="system_menu_item">';systemMenu????+=?????????????'<ul>';systemMenu????+=?????????????????'<li><a?href="#">下戰書</a></li>';systemMenu????+=?????????????????'<li?id="system_home_menu"><a?href="#">首頁</a></li>';systemMenu????+=?????????????????'<li?id="system_expert_menu"><a?href="#">專家</a></li>';systemMenu????+=?????????????'</ul>';systemMenu????+=?????????'</div>';systemMenu????+=?????????'<div?class="system_menu_user">';systemMenu????+=?????????????'<div?class="system_menu_user_wrapper">';systemMenu????+=?????????????????'<a?href="login.act">';systemMenu????+=????????????????????'<i?id="system_login_user_icon"></i>';systemMenu????+=????????????????????'<span?id="system_login_user_name">登錄</span>';systemMenu????+=?????????????????'</a>';systemMenu????+=?????????????'</div>';systemMenu????+=?????????????'<div?class="system_menu_user_setting">';systemMenu????+=?????????????????'<ul>';systemMenu????+=?????????????????????'<li><i?class="system_menu_user_setting_set"></i><span>設置</span></li>';systemMenu????+=?????????????????????'<li><i?class="system_menu_user_setting_exit"></i><span>退出</span></li>';systemMenu????+=?????????????????'</ul>';systemMenu????+=?????????????'</div>';systemMenu????+=?????????'</div>';systemMenu????+=?????'</div>';systemMenu????+=?'</div>';$(systemMenu).appendTo($("#system_navigation_menu")); }
? ?在Eclipse中運行Tomcat，瀏覽器中輸入http://localhost:8080/medical/index.act，系統菜單登錄變為“登錄”，但會發現當能量幣的值過長時會把下拉菜單遮蓋住了，如下圖所示：
二、修改navigation.css樣式文件
1、把菜單包裹器的寬度設置為1000像素，并設置為相對定位，如下：
.system_menu_wrapper{
? ?margin: 0 auto;
? ?height: inherit;
? ?width: 1000px;
? ?position: relative;
}
2、把用戶登錄菜單設置為絕對定位，且在菜單包裹器的最右側顯示，如下：
.system_menu_user{
? ?width: 120px;
? ?height: inherit;
? ?position: absolute;
? ?right: 0px;
? ?z-index: 10;
}
修改后在chrome瀏覽器中效果如圖所示：
三、編寫登錄界面及CSS樣式文件
1、在D:\medical\war\module\login下創建login.html文件
<!DOCTYPE?HTML> <html><head><title>斗醫</title><!--利于搜索引擎查詢--><meta?name="description"?content="斗醫是一個醫學交流平臺"?/><meta?name="keywords"?content="醫學,交流,討論"?/><!--設置字符集--><meta?http-equiv="content-type"?content="text/html;charset=utf-8"?/><!--頁面不緩存--><meta?http-equiv="pragma"?content="no-cache"?/><meta?http-equiv="cache-control"?content="no-cache,must-revalidate"?/><meta?http-equiv="expires"?content="Wed,?26?Feb?1997?08:21:57?GMT"?/><!--引入外部文件--><link?rel="stylesheet"?type="text/css"?href="theme/navigation/navigation.css"><link?rel="stylesheet"?type="text/css"?href="theme/login/login.css"><script?src="js/common/jquery.js"></script><script?src="js/common/common.js"></script><script?src="js/login/login.js"></script></head><body><!--系統導航菜單--><div?id="system_navigation_menu"></div><!--登錄頁面--><div?class="system_content"><div?class="login_wrapper"><div?class="login_title">用戶登錄</div><input?type="text"?class="login_user_input"?placeholder="請輸入用戶名"?id="login_dynamic_user_name"?/><input?type="text"?class="login_user_input"?placeholder="請輸入密碼"???id="login_dynamic_user_pass"?/><div?class="login_button_wrapper"><a?class="login_confirm_button"?href="#">登錄</a><a?class="login_regist_button"??href="#">注冊</a></div></div></div></body> </html>
2、在D:\medical\war\theme\login下創建login.css文件
/*********************************************************************/ /*????????????????????????????系統登錄樣式???????????????????????????*/ /*********************************************************************/ .login_wrapper{width:?420px;height:?250px;margin:?0?auto;border:?1px?solid?#AAA;border-radius:?8px;box-shadow:?1px?1px?rgba(0,?0,?0,?.4); } .login_title{width:?inherit;height:?40px;line-height:?40px;background-color:?#1575D5;border:?1px?solid?#0D6EB8;border-radius:?8px?8px?0?0;box-shadow:?1px?1px?rgba(255,?255,?255,?.1)?inset;font-size:?14px;text-align:?center;color:?#FFF; } .login_user_name{width:?inherit;height:?40px;line-height:?40px;font-size:?14px;margin:?15px; } .login_user_input{width:?400px;height:?40px;border:?1px?solid?#DDD;border-radius:?4px;margin:?20px?10px?5px?10px;outline:?none; } .login_button_wrapper{width:?inherit;height:?30px;line-height:?30px;margin-top:?20px; } .login_regist_button{float:?right;margin-right:?20px;text-decoration:?underline;font-size:?13px;color:?#259; } .login_confirm_button{float:?right;width:?70px;margin-right:?10px;background-color:?#1575D5;text-shadow:?0?-1px?0?rgba(0,0,0,.5);text-align:?center;border:?1px?solid?#0D6EB8;color:?#FFF;box-shadow:?0?1px?0?rgba(255,255,255,.2)?inset,0?1px?0?rgba(0,0,0,.2);border-radius:?3px;white-space:?nowrap; }
3、在瀏覽器中輸入http://localhost:8080/medical，回車后點擊右側的“登錄”按鈕，打開網頁的效果圖如下：
4、細心的用戶可以發現登錄框在當前屏幕沒有垂直居中
（1）在D:\medical\war\js\common\common.js中增加垂直居中方法
/***?使DIV垂直水平居中*/ function?centerComponent(component) {var?x?=?($(window).width()?-?component.outerWidth())?/?2;??var?y?=?($(window).height()?-?component.outerHeight())?/?2;??component.css({left:?x,?top:?y}); }
（2）對D:\medical\war\theme\login\login.css文件的.login_wrapper增加絕對定位樣式
.login_wrapper{width:?420px;height:?250px;margin:?0?auto;border:?1px?solid?#AAA;border-radius:?8px;box-shadow:?1px?1px?rgba(0,?0,?0,?.4);position:?absolute; }
（3）對D:\medical\war\js\login\login.js文件中的$(document).ready(）增加垂直居中方法調用
(function(?window){$(document).ready(function(){//?生成系統菜單generateSystemMenu();//?登錄框垂直居中centerComponent($("#login_dynamic_wrapper"));}); })(?window?);
（4）在瀏覽器中輸入http://localhost:8080/medical，回車后點擊右側的“登錄”按鈕打開登錄網頁，此時可見登錄框已垂直居中。
【備注】：
1、對于輸入框的placeholderIE10才支持，由于本系統只在Chrome、Firefox中調試運行，若讓IE10之下的支持，可問問谷歌會搜索到多個解決方法。
2、具體登錄功能在下一節完成，會涉及到登錄、注冊按鈕響應動作；向服務端下發請求；服務端獲取數據返回；驗證不通過彈出提示信息等。
轉載于:https://blog.51cto.com/qingkechina/1381866
總結
以上是生活随笔為你收集整理的【斗医】【10】Web应用开发20天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Computer Science The
- 下一篇： PL/SQL程序设计 第一章 PL/SQ