JSP+MySQL实现网页登录注册

最新推荐文章于 2024-07-07 10:45:00 发布

zally_1994

最新推荐文章于 2024-07-07 10:45:00 发布

阅读量2.5w

点赞数 31

本文链接：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">