网页简单登录设计

今天学了servlet的基础知识,阔以做一个简单的登录效果。

一个网页的登录页面,首先肯定要有这个页面
首先第一步,先创建一个web project
在这里插入图片描述
创建完以后,在左侧就会有项目了。
在这里插入图片描述
那么登录的第一步就是我们需要在index.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 'index.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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
		<form action="Login" method="post">
			用户名:<input type="text" name="name" /></br>
			密码: <input type="password" name="pwd" />
			<input type="submit" value="登录" />
		</form>
	</body>
</html>

写好后,去Servers中添加项目
w在这里插入图片描述
我这已经添加好了,直接运行就可以去网页输入本机id查看登录页面了。

登录页面的效果如下图,这里我只是做个测试,所以登录页面很单调,有兴趣的阔以好好设计哈。
在这里插入图片描述
现在呢,这个页面算是设计好了,那么我们就要写后台如何获取提交的用户名和密码了.
这里呢,我们需要先在src中建包分层,这属于jdbc的知识了,不会的可以去了解一下.
在这里插入图片描述
然后我们要在servlet包中创建一个LoginServlet类,然后再创建的时候直接添加父类

在这里插入图片描述
然后点finish创建即可,这里呢,原来应该先把生命周期写出来,这里我就不写了,下面这是它的生命周期,有想试的可以写写。
在这里插入图片描述
不要在意生命周期,创建完以后,我们要在类里面写两个方法,一个试doget(),一个是dopost().并且再每个方法中添加获取用户名和密码的方法

package lession.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// 方法括号里的内容为你要获取页面那个内容所对应的名字
		String name = req.getParameter("name");
		String pwd = req.getParameter("pwd");
		System.out.println("用户名:" + name + " ; " + "密码:" + pwd);

	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// 方法括号里的内容为你要获取页面那个内容所对应的名字
		String name = req.getParameter("name");
		String pwd = req.getParameter("pwd");
		System.out.println("用户名:" + name + " ; " + "密码:" + pwd);
	}
}

对于上面那个再多做一个解释: .getParameter()方法中需要的名称为你.jsp文件中name设置的值
在这里插入图片描述
写完以后,我们就需要去配置web.xml文件了,这个文件在WebRoot --> WEB-INF --> web.xml
在这里插入图片描述
如果点web.xml是这个页面,在左下角有一个source,点击即可

在这里插入图片描述
在这里需要配置几个东西
在这里插入图片描述
具体的代码呢,就是,这个名字可以随机,它是个过程,先写,下面会说一下它的具体过程

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
  <display-name></display-name>	
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
  
	<servlet>
		<servlet-name>Login</servlet-name>
		<servlet-class>lession.servlet.LoginServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>Login</servlet-name>
		<url-pattern>/Login</url-pattern>
	</servlet-mapping>
	
</web-app>

这里就先说一下它的过程

在.jsp中的form表单,当输入完数据后,点击登录提交,它会找到action对应的url-pattern中
在这里插入图片描述
到web.xml页面后,先从1,也就是url-paddern得到对应的2,再根据2找到对应的3,最后得到4,即servlet-class,最后运行进入的类

在这里插入图片描述

serblet-class 中写的是那个包下的哪个类,最后就要跳到那个类
在这里插入图片描述
过程就说到这里,然后就是运行一下,输入个用户名和密码,点击登录,最后的效果图
在这里插入图片描述
其实到这里还没有完,我们现在可以获取登录的用户名和密码了,那么接下来我们就可以把这个用户名和密码去数据库中查找看是否注册过,如果存在,并且正确,那么即登录成功,如果密码错误,则登录失败。

这个看完后,可以去了解后续的: 网页登录设计(二)

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值