登录页面login.jsp>

1、登录页面login.jsp

首先我们来新建一个登录页面login.jsp。Eclipse为我们提供了新建JSP页面的快捷向导，单击菜单【File'JSP】，选择新建JSP页面，则显示如图4-4所示的窗口。

图4-4 新建JSP页面
在该窗口中包含三个选项，默认我们只需要修改第二个选项，即填写你要创建的文件名。这里我们填写"login.jsp"，单击【完成】按钮完成新建，此时在项目demo的WebContent目录下就会出现该文件的图标。双击打开该文件，其代码包含如下几个部分：

①第1行是JSP页面的固定语句，使用Page指令设置页面语言为java、导入Java包java.util.*、设置页面编码为UTF-8；

②通过request对象取得当前文件的上下文路径path，并通过request对象取得协议、主机名、端口，将这四个变量组合起来形成一个URL的路径；

③设置HTML的head信息，将取得的URL路径设置到<base>标签中，这样当前页面就拥有了访问路径的属性。并设置HTML页面的标题元素title、元信息meta，以及CSS引用文件。这里的CSS引用使用HTML的注释给注释掉了，在后面的开发中我们会添加一个CSS文件，将会去掉这里的注释；

④设置HTML的Body信息，即添加页面的主题内容。

该文件是使用Eclipse向导创建的默认JSP文件，这里的代码也是固定的，因此在后文的代码讲解中，将不再重复粘贴类似的代码。最终的代码如程序4-3所示。

程序4-3 登录页面login.jsp

<%@ page language="java" import="java.util.*"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"
+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'login.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="
keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    
</head>

<body>
    This is my JSP page. <br>
</body>
</html>
登录页面的作用是让用户进行登录，根据需求设计中该页面的设计可知，需要添加两个表单项，分别是用户名和密码，并需要提供一个登录按钮和一个引入到注册页面register.jsp的链接。这部分的代码如程序4-4所示。

程序4-4 登录页面login.jsp的表单

<form name="form1" action="login_action.jsp" method="post">
<table width="200" border="1">
    <tr>
        <td colspan="2">登录窗口</td>
    <tr>
        <td>用户名</td>
        <td><input type="text" name="username" size="10"></td>
    </tr>
    <tr>
        <td>密码</td>
        <td><input type="password" name="password" size="10"></td>
    </tr>
    <tr>
        <td colspan="2"><input type="submit"
name="submit" value="登录"> <a href="register.
jsp">注册新用户</a></td>
    </tr>
</table>
</form>
其中的表单元素action属性为login_action.jsp，表示响应的页面。该页面的显示效果如图4-5所示。

图4-5 登录页面效果图

猜你喜欢