【斗医】【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天相关推荐

【斗医】【11】Web应用开发20天
本文在上文的基础上完成用户登录验证功能. 四.获取数据请求业务处理封装 1.配置数据读取方式,它的作用是使用FrameDataGainer响应以.data结尾的请求,并把处理后的数据返回给客户端.打开 ...
【斗医】【18】Web应用开发20天
原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://qingkechina.blog.51cto.com/5552198/154492 ...
【斗医】【3】Web应用开发20天
在上面提及异常的中英文从资源文件中读取,若读取失败需要日志记录,所以使用网上正在闹腾的Logback来记录.关于Logback与Log4j这里不做评判和说明,所有疑问可以请教谷歌. 一.Logback ...
【斗医】【13】Web应用开发20天
在上文中完成用户注册/登录后显示用户名的功能,同时也谈了谈系统编码问题,本文重点聊聊"下战书"功能,里面涉及第三方在线HTML编辑器的问题. 一.Navicat for MySQL ...
Web前端开发北京林业大学概论-单元测试
Web前端开发北京林业大学通关攻略 Web前端开发客观题编程题概论单元测试1 HTML基础单元测试2 单元作业1 CSS样式单元测试3 单元作业2 CSS布局与定位单元测试4 单元作 ...
推荐20个很有帮助的 Web 前端开发教程
在平常的搜索中,我碰到过很多有趣的信息,应用程序和文档,我把它们整理在下面这个列表.这是收藏的遇到的有用内容的一个伟大的方式,可以在你需要的时候方便查阅.相信你会在这个列表中发现对你很有用的资料. 您 ...
给 Web 前端开发人员推荐20款 CSS 编辑器
CSS 和 HTML,JavaScript 是网页的基础,作为前端开发人员,对这三者都要很熟悉.特别是未来流行全栈开发的时代,每项技术都是你知识结构中必要的一个节点. 在开发中,选择好工具是非常重要的 ...
python开发web项目_Django2：Web项目开发入门笔记（20）
该楼层疑似违规已被系统折叠隐藏此楼查看此楼这一篇教程,我们一起来了解如何在CentOS系统中将Django2的Web项目部署到Nginx服务器. CentOS系统虽然和Ubuntu系统都是Linu ...
web前端开发常用的10个高端CSS UI开源框架
随着人们对体验的极致追求,web页面设计也面临着新的挑战,不仅需要更人性化的设计理念,还需要设计出更酷炫的页面.作为web前端开发人员,运用开源资源,更快更好地实现一些现代化的界面,是必备技能之一.下 ...

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

【斗医】【10】Web应用开发20天相关推荐

最新文章

热门文章