学习笔记
需要使用servlet验证用户名以及账号密码(账号密码存于本地),并根据验证结果跳转到指定页面或错误提示。
文件结构
运行结果
代码
//Check.java
package ch04;
import java.io.IOException;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Check extends HttpServlet {
/**
* Constructor of the object.
*/
public Check() {
super();
}
/**
* Destruction of the servlet. <br>
*/
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
/*
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
out.println("<HTML>");
out.println(" <HEAD><TITLE>A Servlet</TITLE></HEAD>");
out.println(" <BODY>");
out.print(" This is ");
out.print(this.getClass());
out.println(", using the GET method");
out.println(" </BODY>");
out.println("</HTML>");
out.flush();
out.close();
}
*/
/**
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name=request.getParameter("user");//获取用户名
String password=request.getParameter("password");//获取密码
if(("kindol".equals(name))&&"1001".equals(password)){//设置用户名和密码
//如果用户名和密码相对应,则跳转到报名页面
RequestDispatcher rd=request.getRequestDispatcher("Application.html");
rd.forward(request, response);
}else{//账户名或密码不正确则跳转登录失败页面
RequestDispatcher rd=request.getRequestDispatcher("WEB-INF/Faile.jsp");
rd.forward(request, response);
}
}
/**
* Initialization of the servlet. <br>
*
* @throws ServletException if an error occurs
*/
public void init() throws ServletException {
// Put your code here
}
}
//web.xml
<?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">
<servlet>
<servlet-name>Check</servlet-name>
<servlet-class>ch04.Check</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Check</servlet-name>
<url-pattern>/Check</url-pattern>
</servlet-mapping>
</web-app>
//index.jsp
<%--
Created by IntelliJ IDEA.
User: MI
Date: 2019/4/7
Time: 14:43
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录账号</title>
</head>
<body>
<div id="main">
<p id="formName">登录</p>
<form id="user" action="Check" method="post">
用户名:<input type="text" name="user" value="kindol" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" required /><br/>
密 码:<input type="password" name="password" placeholder="1001" onkeyup="this.value=this.value.replace(/^ +| +$/g,'')" required /><br/>
<input type="submit" value="登录" >
</form>
</div>
<style type="text/css">
body{text-align:center}
#main {
background-color: #ebedf0;
position:relative;
width: 500px;
height: 250px;
margin:0 auto;
border:1px solid #000;
}
</style>
</body>
</html>
//Application.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<title>志愿者报名表</title>
<style>
body {
font-family: "microsoft yahei";
color: #323232;
min-width: 100%;
}
mip-fixed {
bottom: 120px !important;
right: 12px !important;
}
mip-gototop {
width: 40px;
height: 40px;
border: none;
background-repeat: no-repeat;
background-position: 0 -40px;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
mip-gototop {
background-size: 40px 80px;
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 458dpi) {
mip-gototop {
background-size: 40px 80px;
}
}
.normalcut {
font-size: 14px;
font-weight: normal;
}
.bottom_btn_wrap {
background: #fff;
text-align: center;
position: fixed;
bottom: 0px;
padding: 4px 20px 24px;
width: 100%;
}
.bottom_btn {
display: inline-block;
border-radius: 6px;
height: 45px;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 16px;
background: #1ea0fa;
}
.bottom_btn:hover {
color: #fff;
}
.topic__type {
padding-bottom: 76px;
}
.goBackBtn {
display: none;
}
.area-btn-lf a {
position: relative;
height: 40px;
font-size: 16px;
line-height: 40px;
border-radius: 4px;
outline: none;
text-align: center;
padding: 0 20px;
margin: 0 10px;
margin-top: 20px;
}
body {
background: #ebedf0;
padding-top: 50px;
}
#toptitle {
padding-top: 26px;
}
.pcWrap {
background: #fff;
width: 920px;
*width: 780px;
padding: 0 70px;
margin: 0 auto;
}
.bottom_btn_wrap {
text-align: center;
width: 920px;
bottom: 0px;
padding: 20px 0;
background: #ebedf0;
margin-left: -70px;
}
.bottom_btn {
margin: 0 25px;
width: 200px;
border-radius: 8px;
}
.bottom_btn:hover {
background: #0987db;
color: #fff;
}
.topic__type {
padding-bottom: 100px;
}
mip-gototop {
background-color: transparent;
background-size: unset;
}
.goBackBtn {
display: inline-block;
border-color: #999;
color: #999;
background: #fff
}
.goBackBtn:hover {
background: #fff;
color: #666;
border-color: #666;
}
table {
width: 100%;
overflow: hidden;
}
table.matrix-rating tr td {
padding: 5px 0;
}
.ui-control-group :last-child {
margin-bottom: 0;
}
.ui-matrix-header li {
flex: 1 1 auto;
text-align: center;
padding: 12px 5px;
line-height: 26px;
}
</style>
</head>
<script type="text/javascript">
function checkAge() //判断年龄是否合法
{
var Age = parseInt(document.getElementById("age").value)
if(Age > 78 || Age < 18 || isNaN(Age)) {
alert("报名志愿者年龄需在18~78之间");
document.getElementById('age').value = "";
}
}
$(function() {
var availableTags = ["华南师范大学","华南农业大学","中山大学","暨南大学","深圳大学","广东工业大学","广东技术师范大学","华南理工大学","广州美术学院","广东中医药大学","广东药科大学","广东外语外贸大学"];
$( "#school" ).autocomplete({
source:
function(request, response) {
var results = $.ui.autocomplete.filter(availableTags, request.term);
response(results.slice(0, 12));//只显示自动提示的前十条数据
},
messages: {
noResults: '',
results: function() {}
},
});
});
</script>
<body>
<form>
<div class="pcWrap">
<div id="toptitle">
<h1 class="htitle" id="htitle" style="align-content: center" align="center">
志愿者报名表</h1>
</div>
<div class="topic__type" tabindex="1">
<div class="topic__inner" tabindex="1">
<div class="topic__type-des">
<span style="font-size:16px;"> 志愿服务是一项非常高尚的行为,青年利用空余时间进行志愿服务,既能帮助他人也有利于自身的成长!</span>
</div>
<div class="topic__type-body" tabindex="1">
<fieldset>
<p class="topic__type-title">
1.您的姓名:<input type="text">
</p>
</fieldset>
<fieldset>
<p class="topic__type-title">
2.您的年龄 : <input type="text" id="age" name="age" onkeyup="value=value.replace(/[^(\d)]/g,'')"
onblur="checkAge()" />
</p>
</fieldset>
<fieldset>
<p class="topic__type-title">
3.您的性别:
<br>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女
</p>
</fieldset>
<fieldset>
<p class="topic__type-title">
4.请输入您的手机号码:<input type="text">
</p>
</fieldset>
<fieldset>
<p class="topic__type-title">
5. 您的学校 <input type="text" id="school">
</p>
</fieldset>
<fieldset>
<p class="topic__type-title">
6. 您什么时候有时间进行志愿服务<br/>
<textarea rows="3" cols="20">
</textarea>
</p>
</fieldset>
<fieldset>
<p class="topic__type-title">
7. 请填写您拥有的专业技能,以便我们分配合适的志愿服务工作<br/>
<textarea rows="3" cols="20">
</textarea>
</p>
</fieldset>
<fieldset>
<p class="topic__type-title">
8. 您对我们本次志愿活动还有什么建议或疑问<br/>
<textarea rows="3" cols="20">
</textarea>
</p>
</fieldset>
<fieldset>
<p class='normalcut'>
<div align="center"><span style="font-size:16px;">填写完毕,非常感谢您参加志愿服务的高尚工作!</span></div>
</p>
</fieldset>
</div>
</div>
</div>
<div class="bottom_btn_wrap" id="divV3">
<a class="bottom_btn goBackBtn" href="" id="goBack" target="_blank" onclick="checkAge()">提交</a>
</div>
</div>
</form>
</body>
</html>
//Fail.jsp
<%--
Created by IntelliJ IDEA.
User: MI
Date: 2019/4/7
Time: 14:48
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
<head> <title>登陆失败</title> </head>
<body>
账号/密码错误!
<!--获取用户名 -->
<%String Name=request.getParameter("user"); %>
<!--重新跳转到登陆页面 -->
<br><a href="index.jsp">请重新登录,<%=Name %>同学!
</body>
</html>
本博文中关于servlet的核心代码来自野心家,侵权即删。