编写登陆与注册界面

源来在

已于 2023-10-16 23:16:43 修改

阅读量2.9k

点赞数 17

分类专栏： Javaweb 文章标签：前端 javaee web html

于 2023-10-12 20:52:37 首次发布

本文链接：https://blog.csdn.net/m0_75073812/article/details/133720760

版权

Javaweb 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

实验三登录与注册

编写主页面index.jsp，该页面提供两个超链接，分别链接到注册页面和登录页面；
编写一个注册页面zhuce.jsp，包括：用户名，密码，密码确认以及确认和重设按钮；
编写一个登录页面denglu.jsp，包括：用户名，密码以及确认和重设按钮；
注册处理页面treatZhuCe.jsp，分别判断用户名和密码是否为空、密码和密码确认是否相同，并在用户名和密码为空以及密码或密码确认不相同时提示用户，否则提示用户注册成功“您好！***注册成功”；
登录处理页面treatDengLu.jsp，判断用户名和密码是否为空，若为空则提示用户，否则判断用户名是否为“姓名”以及密码是否为“学号”，全部相等则显示“您好！***登录成功”，否则提示用户用户名或密码错误。

（二）扩展要求：

1.基于Forward动作标签，将注册处理页面treatZhuCe.jsp拆成三个页面：注册处理页面treatZhuCe.jsp、注册处理结果页面zhuCeSuccess.jsp以及zhuCeFail.jsp。其中注册处理页面treatZhuCe.jsp负责接收注册页面zhuce.jsp传递过来的用户注册信息，并处理信息，根据注册是否成功分别交给注册处理结果页面zhuCeSuccess.jsp以及zhuCeFail.jsp显示。具体如下图所示：

2.基于Forward动作标签，将登录处理页面treatDengLu.jsp拆成三个页面：登录处理页面treatDengLu.jsp、登录处理结果页面dengLuSuccess.jsp以及dengLuFail.jsp。其中登录处理页面treatDengLu.jsp负责接收登录页面denglu.jsp传递过来的用户登录信息，并处理信息，根据登录是否成功分别交给登录处理结果页面dengLuSuccess.jsp以及dengLuFail.jsp显示。具体如下图所示：

三、一些需用的技术

1、表单

注册登录页面利用标单传递各种信息给处理页面。

在HTML中，Form 的标记有开始标记<form>和结束标记</from>，在开始标记中一般包含属性：ACTION、METHOD。

ACTION：传递到的处理页面名称以及所处位置。
METHOD：传递所使用的方法：get，post。

2、利用表单中各种主要元素完成基本要求。

姓名：INPUT中的TEXT类型。
密码：INPUT中的PASSWORD类型
密码确认：INPUT中的PASSWORD类型
确认：INPUT中的SUBMIT类型
重设：INPUT中的RESET类型

3、jsp:forward动作标签与jsp:param动作标签

<jsp:forward>动作标识用来将请求转发到另外一个JSP、HTML或相关的资源文件中。当该标识被执行后，当前的页面将不再被执行，而是去执行该标识指定的目标页面。该标识使用的格式如下：

<jsp:forward page="文件路径 | 表示路径的表达式"/>

如果转发的目标是一个JSP文件，还可以向该文件中传递参数，使用格式如下：

<jsp:include page="被包含文件的路径">

<jsp:param name="参数名称1" value="参数值"/>

......

<jsp:param name="参数名称n" value="参数值"/>

</jsp:include>

四、实验步骤

1.新建index.jsp文件

页面中有两个超链接，用超链接传递，<a href="跳转的页面">,在index.jsp页面中一个跳转到注册页面，一个跳转登录页面，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"

    pageEncoding="GBK"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="GBK">

<title>首页</title>

</head>

<body>

<p align="center">首页</p>

<p>没有账号？<a href="zhuce.jsp">点击注册</a>

<p>已有账号？<a href="denglu.jsp">立即登录</a>

</body>

</html>

运行结果如图所示

2.新建zhuce.jsp页面

注册页面包括用户名，密码，密码确认以及确认和重设按钮，这些内容都放在form表单中，根据基本要求4可以知道注册表单最后要提交到treatZhuCe.jsp中，action=“treatZhuCe.jsp”，用户名为text类型，密码和密码确认都是password类，最后还有两个按钮确认就用submit提交，重设用reset重设，但是密码和确认密码的命名不同，密码是PassWord，确认密码是PassCode，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"

    pageEncoding="GBK"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="GBK">

<title>注册账号</title>

</head>

<body>

    <form method="post" action="treatZhuCe.jsp">

        <table>

            <tr>

                <td>用户名：</td>

                <td><input type="text" name="Name"></td>

            </tr>

            <tr>

                <td>密码：</td>

                <td><input type="password" name="PassWord"></td>

            </tr>

            <tr>

                <td>确认密码：</td>

                <td><input type="password" name="PassCode"></td>

            </tr>

            <tr>

                <td colspan="2">

                    <input type="submit" value="确&nbsp认">

                    <input type="reset" value="重&nbsp设">

                </td>

            </tr>

        </table>

    </form>

</body>

</html>

运行显示效果如图

3.新建登录页面denglu.jsp

其中包括用户名、密码以及去任何重设按钮，这些都放在form表单中，有基本要求5可知，最后提交到treatDengLu.jsp中，其中用户名为text类，密码为password类，确认按钮为submit提交，重设按钮为reset清空重新设置，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>登陆账号</title>
</head>
<body>
	<form method="post" action="treatDengLu.jsp">
        <table>
            <tr>
                <td>用户名：</td>
                <td><input type="text" name="Name"></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password" name="PassWord"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="确&nbsp认">
                    <input type="reset" value="重&nbsp设">
                </td>
            </tr>
        </table>
	</form>
</body>
</html>

显示效果如图所示

4.新建注册处理页面treatZhuCe.jsp

用request获取注册页面的用户名和密码等信息，为了让输入中文能正常输出，要保证编码一致性，这里手动将输出格式改为GBK编码同样用request。

题目中要求判断用户名和密码是否为空，这里用equals方法，前面在实验二简单介绍过equals方法和“==”的区别，这里不在赘述。当用户名或密码为空时，给出提示“请输入用户名和密码！”；

判断密码和确认密码是否相等，同样是判断值是否相等用equals方法，这里注意我对密码和确认密码的命名不同，密码是passw，确认密码是passc，若密码盒确认密码相同给出提示“您好！xxx注册成功！”；若两次密码输入不一致，即密码和确认密码不同则给出提示“请确认两次密码输入一致！”。

注意：这里Java代码穿插其中，一定要用好<% %>，否则容易报错。

代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"

    pageEncoding="GBK"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="GBK">

<title>注册处理页面</title>

</head>

<body>

<%

        request.setCharacterEncoding("GBK");

       String name=request.getParameter("Name");

       String passw=request.getParameter("PassWord");

       String passc=request.getParameter("PassCode");

        if(name==null||name.equals("")||passw==null||passw.equals("")){

           out.println("请输入用户名和密码！");

       }

       else if(passw.equals(passc)){%>

           <p>

           您好！<%=name%>注册成功 <br/>

<%     }

       else{

           out.println("请确认两次密码输入一致！");

       } %>



</body>

</html>

当用户名或密码为空时，如下图1只输入用户名，不输入密码，点击确认，显示效果如图2

图1

图2

当密码和确认密码输入不一样时，密码输入了12，确认密码输入123，如图3，点击确认显示效果如图4

图3

图4

5.新建登陆处理页面treatDengLu.jsp

题目中要求判断用户名和密码是否为空，这里用equals方法，这里不在赘述。当用户名或密码为空时，给出提示“请输入用户名和密码！”；

判断用户名是否为“姓名” ，密码是否为“学号”，这里密码和学号是自己设定的，如果用户名和密码都匹配成功，则输出“您好！xxx登陆成功！”，匹配不成提示“请确认用户名和密码输入正确！”

<%@ page language="java" contentType="text/html; charset=GBK"

    pageEncoding="GBK"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="GBK">

<title>登陆处理页面</title>

</head>

<body>

<%

        request.setCharacterEncoding("GBK");

       String name=request.getParameter("Name");

       String passw=request.getParameter("PassWord");

      

        if(name==null||name.equals("")||passw==null||passw.equals("")){

           out.println("请输入用户名和密码！");

       }

       else if(name.equals("大长腿")&&passw.equals("123456")){%>

           <p>

           您好！<%=name%>登陆成功 <br/>

<%     }

       else{

           out.println("请确认用户名和密码输入正确！");

       } %>

</body>

</html>

用户名或密码为空时同上面注册处理页面相同，当用户名不是姓名，密码不是学号时如图5，显示如图6

图5

图6

6.扩展一

基于forward动作标签，将注册处理页面treatZhuCe.jsp拆成三个页面，新建注册处理结果页面zhuCeSuccess.jsp以及zhuCeFail.jsp，其中注册处理页面treatZhuCe.jsp负责接收注册页面zhuce.jsp传递过来的用户注册信息，并处理信息，当注册处理成功交付给zhuCeSuccess.jsp，注册处理不成功交付给zhuCeFail.jsp。

<jsp:forward>动作标识用来将请求转发到另外一个JSP、HTML或相关的资源文件中。当该标识被执行后，当前的页面将不再被执行，而是去执行该标识指定的目标页面。最后浏览器上显示还是原页面地址。

①修改treatZhuCe.jsp页面，在判断注册成功和失败后forward到不同的页面，用param标签传递用户名到注册成功zhuCeSuccess.jsp页面，传递失败理由到zhuCeFail.jsp页面，使用forward标签虽然是不同的jsp文件，但是在浏览器上显示的都是treatZhuCe.jsp，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>注册处理页面</title>
</head>
<body>

<%
		
	    request.setCharacterEncoding("GBK");
		String name=request.getParameter("Name");
		String passw=request.getParameter("PassWord");
		String passc=request.getParameter("PassCode");
		String message="";
		if(name==null||name.equals("")||passw==null||passw.equals("")){
			message="用户名或密码为空！";
		%>
			<jsp:forward page="zhuCeFail.jsp">
			<jsp:param value="<%=message %>" name="message"/></jsp:forward>
		<%}
		else if(passw.equals(passc)){
			%>
			<jsp:forward page="zhuCeSuccess.jsp">
			<jsp:param value="<%=name %>" name="name"/></jsp:forward>
<%		}
	   	else{ 
	   	message="两次密码输入不一样！";%>
	   		<jsp:forward page="zhuCeFail.jsp">
	   		<jsp:param value="<%=message %>" name="message"/>
	   		</jsp:forward>
	<% 	} %>
</body>
</html>

②新建注册成功zhuCeSuccess.jsp页面，在此页面接收param标签传递过来的用户名，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>注册成功</title>
</head>
<body>
<%request.setCharacterEncoding("GBK");
String name=request.getParameter("Name");
%>
<p>
<h3>您好！<%=name%>注册成功 </h3>
</body>
</html>

③新建注册失败zhuCeFail.jsp页面，在此页面接收param标签传递过来的失败理由，这是在treatZhuCe.jspparam标签中的“用户名或密码为空！”和“两次密码输入不一样！”，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>注册失败</title>
</head>
<body>
<%String message = request.getParameter("message");  %>
<h3><%=message %></h3>
</body>
</html>

拆分页面后运行结果与前面基本要求的treatZhuCe.jsp页面显示结果相同，这里不再展示。

7.扩展二

同扩展一相似，都是用forward标签拆分treatDengLu.jsp页面，这里不再详细介绍，直接放代码。

①修改treatDengLu.jsp页面代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>登陆处理页面</title>
</head>
<body>
<%
	    request.setCharacterEncoding("GBK");
		String name=request.getParameter("Name");
		String passw=request.getParameter("PassWord");
		String message="";
		if(name==null||name.equals("")||passw==null||passw.equals("")){
			message="用户名或密码为空！";
			%><jsp:forward page="dengLuFail.jsp">
			<jsp:param value="<%=message %>" name="message"/></jsp:forward>
			<% 
		}
		else if(name.equals("大长腿")&&passw.equals("123456")){%>
			<jsp:forward page="dengLuSuccess.jsp">
			<jsp:param value="<%=name %>" name="name"/></jsp:forward>
<%		}
	   	else{ 
	   		message="用户名或密码输入错误！";%>
	   		<jsp:forward page="dengLuFail.jsp">
	   		<jsp:param value="<%=message %>" name="message"/>
	   		</jsp:forward>
	<%
		} %>
</body>
</html>

②新建登陆成功dengLuSuccess.jsp页面，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>登陆成功</title>
</head>
<body>
<%request.setCharacterEncoding("GBK");
String name=request.getParameter("Name");
%>
<h3>您好！<%=name%>登陆成功 </h3>
</body>
</html>

③新建登陆失败dengLuFail.jsp页面，代码如下：

<%@ page language="java" contentType="text/html; charset=GBK"
    pageEncoding="GBK"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="GBK">
<title>登陆失败</title>
</head>
<body>
<%String message = request.getParameter("message");  %>
<h3><%=message %></h3>
</body>
</html>

运行显示效果与前面基本要求treatDengLu.jsp页面显示效果相同，这里不再展示。

代码仅供参考，如有不足，感谢指正！