【斗医】【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
- 下一篇： nexys3使用笔记1