您的位置:首页 > Web前端 > JavaScript

JSP+Servlet实现登录功能.

2017-04-12 17:54 351 查看

前言

该项目运行在
jdk 7u80
,
Tomcat 7.0
,
Linux 6.u.6
,
Linux jdk 7u80
Dynamic web module version 2.5
,

创建项目

首先创建一个
Dynamic Web Project
,点击File->New->Other->Web->Dynamic Web Project

弹出如下窗口:



选择好后,点击Next



继续点击next



勾选Generate…,(2.5版本好像自动勾选了,3.0的需要自己勾选这里不要太早点击finish,其实没有勾选也行,创建好项目再创建web.xml也可以的.)然后点击finish.

项目创建后的目录如下图:



然后找到如图下方的Servers,点击蓝色



弹出如下对话框:

这里选择Tomcat7.0(如果本机没有Tomcat的话,可以点击Tomcat 7.0 Download下载)



切换到如下对话框:

点击
Browse..
选择你解压到本地的Tomcat目录,JRE那里默认就行.

然后点击next



点击右侧的GCL_login,再点击Add,添加到右侧,点击finish.



这样,在Project Explorer界面就可以看到有一个Servers的文件夹了.

jsp页面文件创建

项目创建好后,我们先把页面创建一下.

右键点击
WebContent
->new->JSP File.名称为login.jsp.点击finish.

这样就可以看到我们的login.jsp文件了.



按照上述的步骤继续创建两个分别名为
success.jsp
/
fenqing.jsp
的文件.

这样就有3个jsp文件了.

双击打开
login.jsp


在body中添加如下代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
</head>
<body>
<!--
这里的action里面的loginServlet是一个loginServlet.java文件,也就是一个servlet文件.
稍后我们再创建.
method就是请求的方式,这里我们选择post,因为涉及到隐私数据.
剩下的都是一些HTML的内容.
input标签里面的name值,将会被作为key值,在servlet文件中使用.
-->
<form action="loginServlet" method="post">
<div align="center">
用户名:<input name="username" type="text" /> <br>
密    码:<input name="password" type="password" /> <br>
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>


打开
fenqing.jsp
文件,添加如下代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<h1>Hello,Fenqing!</h1>
</div>
</body>
</html>


打开success.jsp,添加如下代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<h1>Login Success!</h1>
</div>
</body>
</html>


success.jsp
是在用户登录成功后,展示的页面,如果登录失败,还展示
login.jsp
登录页面,
fenqing.jsp
在使用
filter
的时候会用到.

Servlet文件创建

JSP页面文件创建完成,我们需要用到Servlet文件来进行处理页面传来的数据,来进行逻辑处理

Project Explorer
窗口,点击
Deployment Descriptor: GCL_login
右边的小箭头.

右键Servlet->New->Servlet,



弹出如下对话框:



填写package, Class name,然后点击finish.

我们会在

Java Resources
->
src
->
com.abc.servlet
下,看到一个
loginServlet.java
的文件.双击打开.

添加如下代码:

package com.abc.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class loginServlet
*/
public class loginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public loginServlet() {
super();
// TODO Auto-generated constructor stub
}

/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//我也不太清楚下面这行代码的意思..干脆直接注释掉了
//      response.getWriter().append("Served at: ").append(request.getContextPath());
}

/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//同上,直接注释掉了.
//      doGet(request, response);
//获取表单传过来的账号.
//此处的username就是login.jsp那个input标签的name的值.
//input标签的value就是网页上文本输入框里面用户填写的值.
String username = request.getParameter("username");
//获取密码
String password = request.getParameter("password");
//判断密码是否正确
if (username.equals("abc") && password.equals("123")) {
//密码正确
//这里填写要跳转的jsp文件的路径,因为都是在根目录下
//这里的根目录有点绕,此处不再具体说明.
response.sendRedirect("success.jsp");
} else {
//验证失败,继续留在登陆页面.
response.sendRedirect("login.jsp"); //
}

}

}


接着打开
WebContent/WEB-INF/web.xml
文件,对立面的代码进行如下修改:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>GCL_login</display-name>
<welcome-file-list>
<!-- 这里设置欢迎界面为login.jsp -->
<welcome-file>login.jsp</welcome-file>
</welcome-file-list>
<servlet>
<description></description>
<display-name>loginServlet</display-name>
<servlet-name>loginServlet</servlet-name>
<servlet-class>com.abc.servlet.loginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loginServlet</servlet-name>
<url-pattern>/loginServlet</url-pattern>
</servlet-mapping>
</web-app>


运行工程

首先,我们进行一下浏览器的设置:

点击菜单栏的Window->Web Browser->选择你要用的浏览器(我这里选择的是chrome浏览器).

接下来就是运行该web工程:

如下图:



弹出的对话框,直接选择finish

这时不出意外就会弹出我们写的登陆页面:

用户名: abc, 密码: 123

填写完后,点击提交



就会看到Login Success.

跋文

至此,JSP+Servlet实现登陆功能就完成了.

其中也有不少坑,因为我第一次写的时候,没有注意这个工程的版本问题,在web.xml配置的时候,查了很多资料,根本不知道从
Deployment Descriptor
那里创建servlet或者filter,eclipse会在web.xml里自动帮你生成好关于loginServlet的内容.

这个也是我在网上搜索别人的代码自己摸索的写出来的,没有接触过jsp,也没有做过Java开发,完全靠经理给的学习任务和百度加谷歌搜索做出来的..提前有了解过JSP的9大内置对象,9大内置对象也是看了一遍就忘了,还是在实战中才对
HttpServletRequest
HttpServletResponse
有所了解.

下篇博文将会介绍Filter的使用,并且完成: 如果登陆的用户是
fenqing
的话,那么我们就不显示success.jsp页面,而是去显示fenqing.jsp页面.

如果有任何问题,欢迎加Q:958246321进行探讨.

Peace Out
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jsp