本文在前面封装Hibernate工具的基础上重点完成用户登录功能，目前系统页面展示的名称是在HTML中写死的，所以下面要做的事：若用户已登录则显示用户名；若用户未登录则点击进入登录页面。

【斗医】【10】Web应用开发20天


一、修改登录名称缺省为“登录”

打开D:\medical\war\js\common\common.js文件，修改generateSystemMenu（）方法方法，修改后

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
/**
 * 生成系统公共菜单
 */
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，系统菜单登录变为“登录”，但会发现当能量币的值过长时会把下拉菜单遮盖住了，如下图所示：

【斗医】【10】Web应用开发20天


二、修改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浏览器中效果如图所示：

【斗医】【10】Web应用开发20天


三、编写登录界面及CSS样式文件

1、在D:\medical\war\module\login下创建login.html文件

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
<!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文件

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
/*********************************************************************/
/*                            系统登录样式                           */
/*********************************************************************/
.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，回车后点击右侧的“登录”按钮，打开网页的效果图如下：

【斗医】【10】Web应用开发20天


4、细心的用户可以发现登录框在当前屏幕没有垂直居中

（1）在D:\medical\war\js\common\common.js中增加垂直居中方法

1
2
3
4
5
6
7
8
9
/**
 * 使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增加绝对定位样式

1
2
3
4
5
6
7
8
9
.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(）增加垂直居中方法调用

1
2
3
4
5
6
7
8
9
(function( window){
    $(document).ready(function()
    {
        // 生成系统菜单
        generateSystemMenu();
        // 登录框垂直居中
        centerComponent($("#login_dynamic_wrapper"));
    });
})( window );


（4）在浏览器中输入http://localhost:8080/medical，回车后点击右侧的“登录”按钮打开登录网页，此时可见登录框已垂直居中。

【备注】：

1、对于输入框的placeholderIE10才支持，由于本系统只在Chrome、Firefox中调试运行，若让IE10之下的支持，可问问谷歌会搜索到多个解决方法。

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