【斗医】【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、具体登录功能在下一节完成，会涉及到登录、注册按钮响应动作；向服务端下发请求；服务端获取数据返回；验证不通过弹出提示信息等。