JSP+MySQL实现网页登录注册

最新推荐文章于 2024-05-29 18:33:47 发布

zally_1994

最新推荐文章于 2024-05-29 18:33:47 发布

阅读量2.5w

点赞数 31

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/zally_1994/article/details/82682285

版权

一、环境配置

IDE：Eclipse

服务器：Tomcat

数据库：MySQL+Navicat for MySQL（后者是可视化操作数据库的软件，操作数据库更方便）

环境搭建步骤：

1.配置JAVA开发工具（JDK），具体请看教程：https://www.cnblogs.com/dgj15222301178/p/7842789.html

2.Eclipse JSP/Servlet 环境搭建，具体看教程：http://www.runoob.com/jsp/eclipse-jsp.html

3.下载安装MySQL+Navicat for MySQL。安装包：https://download.csdn.net/download/zally_1994/10663357

4.JSP 连接数据库，请看教程：http://www.runoob.com/jsp/jsp-database-access.html

注：对于新手来说，jsp连接数据库可能坑比较多，尤其注意连接时的URL的书写，大多报错都是URL的书写有问题，还有就是JDBC驱动的版本，要对应起来。

二、具体代码

1.登录界面Login.jsp

2.登录判断界面CheckLogin.jsp

3.注册界面register.jsp

4.注册判断界面CheckRegister.jsp

5.CSS样式

注：在此web项目中，我使用了bootstrap前端框架，具体请看代码。

1.登录界面Login.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 charset="UTF-8">
<title>登陆界面</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<!--判断登录的时候输入信息提示  -->
<script language="javascript">
	function validateLogin() {
		var userName = document.frmLogin.username.value;
		var password = document.frmLogin.password.value;
		if ((userName == "") || (userName == "输入您的用户名")) {
			alert("请输入用户名!");
			return false;
		}

		if ((password == "") || (password == "输入您的密码")) {
			alter("请输入密码！");
			return false;
		}
	}
</script>
<body class="">

	<!--导航栏 start-->
	<nav class="navbar navbar-inverse navbar-fixed-top">
	<div class="container">

		<div class="navbar-header">
			<a class="navbar-brand" href="/">Authentication</a>
		</div>

		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class=active>
					<a href="/">Link</a>
				</li>
			</ul>
		</div>
	</div>
	</nav>
	<!--导航栏 end-->

	<!--导航栏与中间部分间距-->
	<div class="container margin_top_h"></div>

	<!--中间模块 start-->
	<div class="container margin_bottom_h">
		<div class="row">
			<!--图片start-->
			<div class="col-md-8" style="background-color: #18BC9C; padding-bottom: 10px; padding-top: 10px">
				<div style="font-size: 50px; padding-left: 50px">
					<img src="picture.jpg" alt="头像图片" />
					统一身份认证
				</div>

			</div>
			<!--图片结束-->

			<!--登录pannel start-->
			<div class="col-md-4">
				<div class="panel panel-success">
					<div class="panel-heading">
						<h5>
							<span class="glyphicon glyphicon-lock"></span>
							登录
						</h5>
					</div>
					<div class="panel-body">

						<form action="CheckLogin.jsp" method="post" name="frmLogin">
							<input name="utf8" type="hidden" value="&#x2713;" />
							<input type="hidden" name="authenticity_token" value="v/7utWnxq8ErQFMzaeApAVnmzAQZvPUhnJL2YEuYFct4Y2uFKJsSn0sZJ3BhyKGKiSOFUpFmldz0RiKWcgQKSA==" />
							<div class="form-group">
								<label for="session_email">账号密码登陆</label>
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-envelope"></span>
									</div>
									<input type="text" name="username" value="输入您的用户名" maxlength="16" onfocus="if(this.value == '输入您的用户名') this.value =''">
								</div>
							</div>

							<div class="form-group">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock"></span>
									</div>
									<input type="password" name="password" value="输入您的密码" maxlength="20" onfocus="if(this.value == '输入您的密码') this.value =''">
								</div>
							</div>
							<div>
								<input type="submit" value="登录" onclick="return validateLogin()">
								<input type="button" value="注 册" onclick="window.open('register.jsp')">
							</div>
						</form>
					</div>
				</div>

			</div>
			<!--登录 pannel end-->
		</div>

		<hr>

		<div class="row">
			<div class="col-lg-12">
				<div class="alert alert-info text-center">集成统一认证，需要以下知识:</div>
			</div>

		</div>

		<div class="row ">
			<div class="col-md-4">
				<h2>JSP</h2>
				<p>SP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计，它 是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术， 它是在传统的网页HTML（标准通用标记语言的子集）文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。 用JSP开发的Web应用是跨平台的，既能在Linux 下运行，也能在其他操作系统上运行。</p>
				<a class="btn btn-info" href="http://www.w3schools.com/bootstrap/">More Info</a>
			</div>

			<div class="col-md-4">
				<h2>Javascript/CSS</h2>
				<p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个 应用）网页上使用，用来给HTML网页增加动态功能。由Brendan Eich在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java， 因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。</p>
				<a class="btn btn-info" href="http://www.runoob.com/js/js-tutorial.html">More Info</a>
			</div>

			<div class="col-md-4">
				<h2>Tomcat</h2>
				<p>Tomcat 服务器是一个免费的开放源代码的Web 应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP 程序的首选。对于一个初学者来说，可以这样认为，当在一台机 器上配置好Apache 服务器，可利用它响应HTML（标准通用标记语言下的一个应用）页面的访问请求。实际上Tomcat是Apache 服务器的扩展，但运行时它是独立运行的，所以当你运行tomcat 时，它实际上作为一个与 Apache 独立的进程单独运行的。</p>
				<a class="btn btn-info" href="https://baike.baidu.com/item/%E7%BB%9F%E4%B8%80%E8%BA%AB%E4%BB%BD%E8%AE%A4%E8%AF%81/6202314?fr=aladdin">More Info</a>
			</div>
		</div>
	</div>
	<!--中间模块 end-->

	<div class="row margin_bottom_h"></div>

	<div class="navbar navbar-default navbar-fixed-bottom">
		<footer class="container-fluid"> <br>
		<p class="text-center">Copyright © 2018 信心工程研究所</p>
		</footer>
	</div>

</body>
</html>

2.登录判断界面CheckLogin.jsp

<%@ page import="java.sql.*" %>

<%@ 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 charset="UTF-8">
<title>登录判断</title>
</head>
<body>

<%
	String username=new String(request.getParameter("username").getBytes("ISO-8859-1"),"utf-8");
	String password=new String(request.getParameter("password").getBytes("ISO-8859-1"),"utf-8");

//连接数据库操作
	String driverName="com.mysql.jdbc.Driver";
	String userName="root";
	String psw="password";
	String dbName="student";
	String tableName="user";
	
	String url="jdbc:mysql://127.0.0.1:3306/student?serverTimezone=UTC";
	Class.forName("com.mysql.jdbc.Driver");
	out.println("tag 1");
	Connection conn=DriverManager.getConnection(url,userName,psw); ;
	
	if(conn!=null){
		
		String sql="select * from user where name='"+username+"' and password='"+ password + "'";
		out.println("sql="+sql);
		Statement stmt=conn.createStatement();
		ResultSet rs=stmt.executeQuery(sql);
		if(rs.next()){
			out.println("<script language='javascript'>alert('登录成功！')；</script>");
			response.sendRedirect("Home.jsp");
			//window.location.href='Home.jsp';
		}
		else{
			 out.println("<script language='javascript'>alert('登录失败！');window.location.href='Login.jsp';</script>");
			 //response.sendRedirect("Login.jsp");//密码不对返回到登陆
		}
	}
	else{
		out.println("<script language='javascript'>alert('数据库连接失败！');</script>");
		response.sendRedirect("Login.jsp");//密码不对返回到登陆
	}

%>

</body>
</html>

3.注册界面register.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 charset="UTF-8">
<title>用户注册</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="CSS.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<script>
	function addCheck() {
		var username = document.getElementById("username").value;
		var password = document.getElementById("password").value;
		var newword = document.getElementById("newword").value;
		if (username == "") {
			alert("用户名不能为空!");
			document.getElementById("username").focus();
			return false;
		}
		if (password == "") {
			alert("密码不能为空!");
			document.getElementById("password").focus();
			return false;
		}
		if (password != newword) {
			alert("两次输入密码不相同!");
			document.getElementById("newword").focus();
			return false;
		}
	}
	function validate() {
		var flag = addCheck();
		if (flag == false)
			return false;
		return true;
	}
</script>

<body style="background: url(back3.jpg)">
	<br>
	<br>
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="text-center">注册新用户</h3>
				</div>
				<div class="panel-body">
					<form class="form-horizontal" role="form" action="CheckRegister.jsp" accept-charset="UTF-8" method="post" onsubmit="return validate()">
						<input name="utf8" type="hidden" value="&#x2713;" />
						<input type="hidden" name="authenticity_token" value="cFE0MDKxyoAORTDnrgojEr0WGEMN3S9VYjEFJC10zUOgvHCCWlC1e6BcV7c0p7u/Zgjp8vHqYdDiXenxRJWiIw==" />


						<div class="form-group">
							<label class="col-sm-3 control-label" for="user_用户名">用户名</label>
							<div class="col-sm-9">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-envelope"></span>
									</div>
									<input class="form-control" placeholder="输入您的用户名" type="text" name="username" maxlength="16" onfocus="if(this.value == '输入您的用户名') this.value =''" />
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="user_密码">密码</label>
							<div class="col-sm-9">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock"></span>
									</div>
									<input class="form-control" placeholder="输入您的密码" type="password" name="password" maxlength="20" onfocus="if(this.value == '输入您的密码') this.value =''">
								</div>
							</div>
						</div>

						<div class="form-group">
							<label class="col-sm-3 control-label" for="user_确认密码">确认密码</label>
							<div class="col-sm-9">
								<div class="input-group">
									<div class="input-group-addon">
										<span class="glyphicon glyphicon-lock"></span>
									</div>
									<input class="form-control" placeholder="请再次输入密码" type="password" name="newword" maxlength="20" onfocus="if(this.value == '请再次输入密码') this.value =''">
								</div>
							</div>
						</div>

						<input type="submit" name="commit" value="注册" class="btn btn-primary btn-block" />
						<a class="btn btn-default btn-block" href="/">取消</a>

					</form>
				</div>
			</div>
		</div>

	</div>

</body>
</html>

4.注册判断界面CheckRegister.jsp

<%@page import="javafx.scene.control.Alert"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册判断</title>
</head>
<body>

<%

String user = new String(request.getParameter("username"));
    String pwd = new String(request.getParameter("password"));
    Class.forName("com.mysql.jdbc.Driver");
	String url = "jdbc:mysql://127.0.0.1:3306/student?serverTimezone=UTC";
	String usename = "root";
	String psw= "password";  
    Connection conn = DriverManager.getConnection(url,usename,psw);//得到连接  
    out.println("<script language='javascript'>alert('数据库连接成功！');</script>"); 
    PreparedStatement pStmt = conn.prepareStatement("select * from user where name = '" + user + "'");  
    ResultSet rs = pStmt.executeQuery();  			
	if(rs.next()){  
         out.println("<script language='javascript'>alert('该用户已存在，请重新注册！');window.location.href='register.jsp';</script>");  
    }
	else{  
          PreparedStatement tmt = conn.prepareStatement("Insert into user values('" + user + "','" + pwd + "')");  
          int rst = tmt.executeUpdate();  
          if (rst != 0){  
                out.println("<script language='javascript'>alert('用户注册成功！');window.location.href='Login.jsp';</script>");    
          }
          else{  
                out.println("<script language='javascript'>alert('用户注册失败！');window.location.href='register.jsp';</script>");    
          }  
      }	
	%>


</body>
</html>

5.CSS样式

div.margin_top_h
{
    margin-top:60px;
}

div.margin_bottom_h
{
    margin-bottom: 30px;
}

下面是web项目列表

关注

31
点赞
踩
235

收藏

觉得还不错? 一键收藏
10
评论
JSP+MySQL实现网页登录注册

一、环境配置IDE：Eclipse服务器：Tomcat数据库：MySQL+Navicat for MySQL（后者是可视化操作数据库的软件，操作数据库更方便）环境搭建步骤：1.配置JAVA开发工具（JDK），具体请看教程：https://www.cnblogs.com/dgj15222301178/p/7842789.html2.Eclipse JSP/Servlet 环境...
复制链接

扫一扫

评论 10

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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