[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证
本系列文章是作者暑假给学生进行实训分享的笔记，主要介绍MyEclipse环境下JSP网站开发，包括JAVA基础、网页布局、数据库基础、Servlet、前端后台数据库交互、DAO等知识。
前一篇文章讲解了MyEclipse+Servlet+JSP实现火车票管理系统的查询页面、模糊查询、修改车票信息、删除车票等操作，本篇文章将完善注册页面插入数据和登陆页面验证用户名、密码。基础性文章，希望对读者有所帮助 ，尤其是我的学生。
参考前文：
Java+MyEclipse+Tomcat (一)配置过程及jsp网站开发入门
Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交
Java+MyEclipse+Tomcat (三)配置MySQL及查询数据显示在JSP网页中
Java+MyEclipse+Tomcat (四)Servlet提交表单和数据库操作
Java+MyEclipse+Tomcat (五)DAO和Java Bean实现数据库和界面分开操作
Java+MyEclipse+Tomcat (六)详解Servlet和DAO数据库增删改查操作
前文：
[JSP暑假实训] 一.MyEclipse安装及JAVA基础知识
[JSP暑假实训] 二.JSP网站创建及Servlet实现注册表单提交、计算器运算
[JSP暑假实训] 三.MySQL数据库基本操作及Servlet网站连接显示数据库信息
[JSP暑假实训] 四.MyEclipse+Servlet+JSP实现火车票网站查询、修改、删除操作
下载地址：
文章目录
- 一.注册页面
- 二.登陆页面
- 三.登陆验证
- 四.总结
一.注册页面
1.当前Web工程为“test0706_hcp”，其结果如下。
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第1张图片](http://img.e-com-net.com/image/info8/4f08f529c9824112bf34e070984e519c.jpg)
2.创建注册页面“Zhuce.jsp”，其代码如下所示：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'Zhuce.jsp' starting pagetitle>
<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">
<script language="javascript" type="text/javascript">
script>
<style type="text/css">
style>
<script language="javascript" type="text/javascript">
function do_selected()
{
var yourchoise="";
for(var i=0;i<form1.subject.length;i++)
{
if(form1.subject.options[i].selected)
{
yourchoise +=form1.subject[i].value+";";
}
}
return yourchoise;
}
function mycheck() {
//学号非空
if(document.form1.number.value==""){
alert("亲,请输入学号!");
document.form1.number.focus();
return false;
}
var number = /^[0-9]{6,14}$/;
if (!number.exec(document.form1.number.value)) {
window.alert("学号必须由数字组成且长度为6-14!");
document.form1.number.focus();
return false;
}
if(document.form1.name.value=="")
{
alert("请输入姓名");
document.form1.name.focus();
return false;
}
if(document.form1.sex.value=="未指定")
{
alert("请指明性别");
document.form1.sex.focus();
return false;
}
if(document.form1.email.value.indexOf("@")==-1||document.form1.email.value.indexOf(".")==-1)
{
alert("邮箱格式不正确，请重新输入!");
document.form1.email.focus();
return false;
}
if(document.form1.pwd.value=="")
{
alert("请输入密码");
document.form1.pwd.focus();
return false;
}
var patrn=/^[a-zA-Z0-9]{5,20}$/;
if (!patrn.exec(document.form1.pwd.value))
{
window.alert("密码只能由字母或者数字组成且长度为5-20之间!");
return false;
}
if(document.form1.pwd2.value=="")
{
alert("请输入确认密码");
document.form1.pwd2.focus();
return false;
}
if(document.form1.pwd.value!=document.form1.pwd2.value)
{
alert("输入的密码与确认密码不一致!");
document.form1.pwd2.focus();
return false;
}
if(do_selected()=="")
{
alert("请至少选择一门课");
document.form1.subject.focus();
return false;
}
}
script>
head>
<body>
<div align="center">
<img src="imgs/bg.jpg" height="200" width="80%" /><br />
div>
<br />
<form id="form1" name="form1" method="get" autocomplete="off"
action="Success.jsp" onsubmit="return mycheck()">
<tr>
<td colspan="2" align=center><H2>学生用户注册H2>td>
tr>
<tr>
<td colspan="2" align=right><A href="index.php" class="one">返回A>td>
tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000">td>
tr>
<tr>
<td width="217"><div align="right">学号:<span class="STYLE1">*span>div>td>
<td width="343"><input type="text" name="number" id="number" value="" style=width:165pt; maxlength="50"/>td>
tr>
<tr>
<td><div align="right">姓名:<span class="STYLE1">*span>div>td>
<td><input type="text" name="name" id="name" value="" style=width:165pt; maxlength="50"/>td>
tr>
<tr>
<td><div align="right">性别:<span class="STYLE1">*span>div>td>
<td><select name="sex" id="sex" value="" style=width:165pt; maxlength="50">
<option value="未指定">未指定option>
<option value="男">男option>
<option value="女">女option>
select>
td>
tr>
<tr>
<td><div align="right">Email邮件:<span class="STYLE1">*span>div>td>
<td><input type="text" name="email" id="email" value="" style=width:165pt; maxlength="50"/>td>
tr>
<tr>
<td><div align="right">密码:<span class="STYLE1">*span>div>td>
<td><input type="password" name="pwd" id="pwd" value="" style=width:165pt; maxlength="50"/>td>
tr>
<tr>
<td><div align="right">确认密码:<span class="STYLE1">*span>div>td>
<td><input type="password" name="pwd2" id="pwd2" value="" style=width:165pt; maxlength="50"/>td>
tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000">td>
tr>
<tr>
<td><div align="right">学院:div>td>
<td><select name="zy" id="zy" value="" style=width:165pt; maxlength="50">
<option value="软件学院">软件学院option>
<option value="计算机学院">计算机学院option>
<option value="自动化学院">自动化学院option>
<option value="光电学院">光电学院option>
<option value="车辆学院">车辆学院option>
<option value="信息与电子学院">信息与电子学院option>
<option value="机电学院">机电学院option>
<option value="基础教育学院">基础教育学院option>
<option value="其他">其他option>
select>
td>
tr>
<tr>
<td><div align="right">出生日期:<span class="STYLE1">*span>div>td>
<td><input type="date" name="birth" id="birth" value="">td>
tr>
<tr>
<td><p align="right">专业:p>
<p align="right">（单选）p>td>
<td><select name="subject" size="4" id="subject" value="" style=width:165pt; maxlength="50">
<option value="软件工程">软件工程option>
<option value="数字媒体">数字媒体option>
<option value="信息安全">信息安全option>
<option value="数字仿真">数字仿真option>
<option value="移动应用开发">移动应用开发option>
select>td>
tr>
<tr>
<td><div align="right">入学年月:div>td>
<td><select name="year" id="year" value="" style=width:165pt; maxlength="50">
<option value="2010年">2010年option>
<option value="2011年">2011年option>
<option value="2012年">2012年option>
<option value="2013年">2013年option>
<option value="2014年">2014年option>
<option value="2015年">2015年option>
<option value="2016年">2016年option>
<option value="2017年">2017年option>
<option value="2018年">2018年option>
select>
td>
tr>
<tr>
<td><div align="right">div>td>
<td><select name="month" id="month" value="" style=width:165pt; maxlength="50">
<option value="1月">01月option>
<option value="2月">02月option>
<option value="3月">03月option>
<option value="4月">04月option>
<option value="5月">05月option>
<option value="6月">06月option>
<option value="7月">07月option>
<option value="8月">08月option>
<option value="9月">09月option>
<option value="10月">10月option>
<option value="11月">11月option>
<option value="12月">12月option>
select>
td>
tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000">td>
tr>
<tr>
<td><div align="right">
<input type="submit" style='font-size:15px' name="Submit" value="提交"/>
div>td>
<td><div align="center">
<input type="reset" name="button2" style='font-size:15px' id="button2" value="重置" />
div>td>
tr>
table>
form>
body>
html>
此时运行结果如下图所示：
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第2张图片](http://img.e-com-net.com/image/info8/60e9f253760b4cd29a0c7c6b85039a82.jpg)
该代码采用JS对注册信息进行了基本的校验。
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第3张图片](http://img.e-com-net.com/image/info8/6c6bfb1c0e2e4eafbc44649630bfa9d7.jpg)
3.新建一个“Success.jsp”文件，插入JAVA连接数据库的代码，并采用 request.getParameter(“name”) 获取注册页面提交的信息。
插入数据库核心代码：
String sql = "insert into user(number,name,pwd,email,zy,birth) " +
"values('" + number + "', '" + name + "', '" + pwd + "', '" +
email + "', '" + zy + "', '" + birth +"');";
//执行删除
statement.execute(sql);
完整代码如下：
<%@ page language="java" import="java.util.*,java.sql.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'Success.jsp' starting pagetitle>
<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">
<style type="text/css">
/* 这个链接改变颜色 */
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
style>
head>
<body>
<%
//设置编码方式 防止乱码
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//驱动的名称
String driverName = "com.mysql.jdbc.Driver";
//数据库用户名密码
String userName = "root";
String userPwd = "123456";
//数据库名字
String dbName = "hcp";
//表名
String tableName = "info";
//拼接字符串链接数据库
String url = "jdbc:mysql://localhost:3306/" + dbName + "?user="
+ userName + "&password=" +userPwd +
"&useUnicode=true&characterEncoding=UTF-8";
//SQL查询
ResultSet re;
//获取学号
//String number = request.getParameter("number");
String number = new String(request.getParameter("number").getBytes("ISO-8859-1"), "UTF-8");
//姓名
String name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");
//性别
String sex = new String(request.getParameter("sex").getBytes("ISO-8859-1"), "UTF-8");
//邮件
String email = new String(request.getParameter("email").getBytes("ISO-8859-1"), "UTF-8");
//密码
String pwd =new String(request.getParameter("pwd").getBytes("ISO-8859-1"), "UTF-8");
//学院
String zy = new String(request.getParameter("zy").getBytes("ISO-8859-1"), "UTF-8");
//出生日期
String birth = new String(request.getParameter("birth").getBytes("ISO-8859-1"), "UTF-8");
//链接数据库
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection(url);
Statement statement = con.createStatement();
String sql = "insert into user(number,name,pwd,email,zy,birth) " +
"values('" + number + "', '" + name + "', '" + pwd + "', '" +
email + "', '" + zy + "', '" + birth +"');";
System.out.println(sql);
//执行删除
statement.execute(sql);
%>
<table width="100%" height="80%" border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="middle">
<table>
<tr>
<td align=center><IMG height=60 src="imgs/timg.jpg" width=60>td>
<td align=center><H2>恭喜您注册成功H2>td>
tr>
<tr>
<td colspan="2" align=right><A href="Login.jsp" class="one">立即登陆A>td>
tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000">td>
tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">学号:span>div>td>
<td width="343"><% out.println(number); %>td>
tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">姓名:span>div>td>
<td width="343"><% out.println(name); %>td>
tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">性别:span>div>td>
<td width="343"><% out.println(sex); %>td>
tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">专业:span>div>td>
<td width="343"><% out.println(zy); %>td>
tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">出生日期:span>div>td>
<td width="343"><% out.println(birth); %>td>
tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">邮件:span>div>td>
<td width="343"><% out.println(email); %>td>
tr>
<tr>
<td width="217"><div align="right"><span class="STYLE1">密码:span>div>td>
<td width="343"><% out.println(pwd); %>td>
tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000">td>
tr>
table>
td>tr>
table>
body>
html>
此时能获取提交的信息，并将数据插入至数据库中，如下图所示：
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第4张图片](http://img.e-com-net.com/image/info8/3c9734fd4275402e8b7aabc8b89368d0.jpg)
注册成功之后通过Get表单提交至“Success.jsp”页面，并插入数据库，如下图所示。
insert into user(number,name,pwd,email,zy,birth)
values(‘201901072’, ‘杨秀璋’, ‘111111’, ‘[email protected]’, ‘软件学院’, ‘2000-07-10’);
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第5张图片](http://img.e-com-net.com/image/info8/2370ae07e0494590a895579993e576d7.jpg)
二.登陆页面
1.增加登录页面“Login.jsp”，并添加images登录图片。
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第6张图片](http://img.e-com-net.com/image/info8/29f7851b05024534994e3f9274691bb0.jpg)
2.修改“Login.jsp”代码，如下所示：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'Login.jsp' starting pagetitle>
<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">
<style type="text/css">
style>
head>
<body>
<form action="LoginServlet" method="get">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#e5f6cf"> td>
tr>
<tr>
<td height="608" background="images/login_03.gif">
<table width="862" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="266" background="images/login_04.gif"> td>
tr>
<tr>
<td height="95"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="424" height="95" background="images/login_06.gif"> td>
<td width="183" background="images/login_07.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="21%" height="30"><div align="center"><span class="STYLE3">用户span>div>td>
<td width="79%" height="30">
<input type="text" name="name" style="height:18px; width:130px; border:solid 1px #cadcb2; font-size:12px; color:#81b432;">td>
tr>
<tr>
<td height="30"><div align="center"><span class="STYLE3">密码span>div>td>
<td height="30">
<input type="password" name="pwd" style="height:18px; width:130px; border:solid 1px #cadcb2; font-size:12px; color:#81b432;">td>
tr>
<tr>
<td height="30"> td>
<td height="30"><input type="submit" name="sub" value="请登录" />
<input type="reset" name="re" value="取消" />td>
tr>
table>td>
<td width="255" background="images/login_08.gif"> td>
tr>
table>td>
tr>
<tr>
<td height="247" valign="top" background="images/login_09.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="22%" height="30"> td>
<td width="56%"> td>
<td width="22%"> td>
tr>
<tr>
<td> td>
<td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="44%" height="20"> <a href="Zhuce.jsp">注册a>td>
<td width="56%" class="STYLE4">版本 2019V1.0 By:贵州财经大学2016软工td>
tr>
table>td>
<td> td>
tr>
table>td>
tr>
table>td>
tr>
<tr>
<td bgcolor="#a2d962"> td>
tr>
table>
form>
body>
html>
运行结果如下图所示：
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第7张图片](http://img.e-com-net.com/image/info8/22ae3193a75e4bf28a0a1f551bad0336.jpg)
三.登陆验证
接着实现登录验证，通过 select count(*) from user where name=“admin” and pwd=“123456” 判断，如果用户名和密码输入正确则返回1，登录跳转至主页面，否则提示登录失败。
1.创建Servlet，名称为“LoginServlet”。需要注意跳转URL地址。
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第8张图片](http://img.e-com-net.com/image/info8/e40e9ae27fb248f9bb757fe27adb1954.jpg)
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第9张图片](http://img.e-com-net.com/image/info8/c9b6d677a6364970b78a6e5ce06efff3.jpg)
2.编写LoginServlet完整代码如下：
package servlet;
import java.sql.*;
import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class LoginServlet extends HttpServlet {
public LoginServlet() {
super();
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//驱动的名称
String driverName = "com.mysql.jdbc.Driver";
//数据库用户名密码
String userName = "root";
String userPwd = "123456";
//数据库名字
String dbName = "hcp";
//表名
String tableName = "user";
//拼接字符串链接数据库
String url = "jdbc:mysql://localhost:3306/" + dbName + "?user="
+ userName + "&password=" +userPwd +
"&useUnicode=true&characterEncoding=UTF-8";
//设置编码方式
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
//SQL查询
ResultSet re;
String name = new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");
String pwd = new String(request.getParameter("pwd").getBytes("ISO-8859-1"), "UTF-8");
System.out.println(name);
response.setContentType("text/html");
PrintWriter out = response.getWriter();
//链接数据库
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection con = DriverManager.getConnection(url);
Statement statement = con.createStatement();
//select count(*) from user where name="yangxiu" and pwd="11111";
String sql = "select count(*) from " + tableName +
" where name='" + name + "' and pwd='" + pwd + "';";
System.out.println(sql);
//执行查询
re = statement.executeQuery(sql);
while(re.next()) {
int num = Integer.valueOf(re.getString(1));
//登录成功
if(num>=1) {
response.sendRedirect("index.jsp");
}
else { //失败
request.setAttribute("msg", "用户名或密码输入错误");
response.sendRedirect("Login.jsp?error=yes");
}
}
} catch (InstantiationException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IllegalAccessException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
}
public void init() throws ServletException {
// Put your code here
}
}
3.在Login.jsp文件中设置跳转失败的提醒代码，通过获取 Login.jsp?error=yes 实现。
<%
String message = request.getParameter("error");
if(message!=null && !"".equals(message)) {
%>
<script type="text/javascript">
alert("请输入正确的用户名和密码!");
script>
<%
}
%>
4.此时登录校验功能实现，当用户输入错误的用户名或密码时，提示下面错误再跳转至登录页面。
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第10张图片](http://img.e-com-net.com/image/info8/85c08a7889ba41d39334d7013ab05588.jpg)
5.当用户输入正确的用户名及密码，如“杨秀璋”和“111111”则跳转至主页。
![[JSP暑假实训] 五.MyEclipse+Servlet+JSP实现火车票网站注册操作及登陆验证_第11张图片](http://img.e-com-net.com/image/info8/a11da92e7c8c48fca25073258acbff26.jpg)
四.总结
周末的深夜，呆在办公室准备明天的JAVA网站开发实训，不同的是，这次有学生陪伴。各行各业都很辛苦，996和5+2让我们更珍惜生活，学生也更应该抓住编程的时光。看到学生开始学会分享博客、分享知识，真的很高兴，又拉了一些人“入坑”，传道授业解惑，为之而努力。
夜色已深，月光打在身上，勾勒出你看书时最美的侧脸，吹灭读书灯，一身都是月，任是寻常动人，想你了。接着在办公室写代码了，fighting
（By:Eastmount 2019-07-10 夜9点 http://blog.csdn.net/eastmount/）
你可能感兴趣的:(Java网站开发,HTML网站前端设计,JAVA网站开发及实战)