一、開發環境
開發工具：eclipse 2018-09
操作系統：win10
二、實現
1、目錄結構：
2、數據庫（創建tmp數據庫，新建user表，user表結構如下）
3、功能簡介
功能比較簡單，在這簡要敘述一下。在注冊頁面register.jsp對應的輸入框中輸入用戶名和密碼，跳轉到check_reg.jsp頁面。check_reg.jsp只是用來獲取提交的表單，主要是連接MySQL數據庫，將用戶名和密碼存入數據庫中。如果注冊成功，則跳轉（重定向）到登陸頁面login.jsp。在登陸頁面中，在對應輸入框中輸入用戶名和密碼，將表單數據提交到check_login.jsp頁面。check_login.jsp負責接受表單數據，向數據庫中查詢數據，如果查找到，跳轉到login_success.jsp頁面。
4、代碼實現
register.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注冊</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 30px">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-plus"></span>注冊
</div>
<div class="panel-body">
<form action="check_reg.jsp" method="POST" name="registerForm">
<div class="form-group">
<label for="name">用戶名</label> <input type="text"
class="form-control" name="name" placeholder="請輸入用戶名"
autofocus="autofocus">
</div>
<div class="form-group">
<label for="">密碼</label> <input type="password"
class="form-control" name="pwd" placeholder="請輸入密碼">
</div>
<div class="form-group">
<label for="">重復密碼</label> <input type="password"
class="form-control" name="repwd" placeholder="請重復密碼">
</div>
<button type="submit" class="btn btn-primary"
onclick="return checkForm()">注冊</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<script type="text/javascript">
function checkForm() {
var name = registerForm.name.value;
var pwd = registerForm.pwd.value;
var repwd = registerForm.repwd.value;
//alert(name + pwd + repwd);
if (name == "" || name == null) {
alert("請輸入用戶名");
registerForm.name.focus();
return false;
} else if (pwd == "" || pwd == null) {
alert("請輸入密碼");
registerForm.pwd.focus();
return false;
} else if (repwd == "" || repwd == null) {
alert("請輸入重復密碼");
registerForm.repwd.focus();
return false;
}else if(pwd!=repwd){
alert("兩次密碼輸入不一致，請重新輸入!");
registerForm.repwd.focus();
return false;
}
alert('注冊成功！');
return true;
}
</script>
</body>
</html>
check_reg.jsp：
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Connection conn = null;
PreparedStatement ps = null;
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/tmp?useSSL=false";
String username = "root";
String password = "nxl123";
conn = DriverManager.getConnection(url, username, password);
request.setCharacterEncoding("utf-8");//設置編碼方式，防止中文亂碼
String name = request.getParameter("name");
String pwd = request.getParameter("pwd");
String sql = "INSERT user(name,pwd) VALUES(?,?)";
ps = conn.prepareStatement(sql);
ps.setString(1, name);
ps.setString(2, pwd);
int row = ps.executeUpdate();
if (row > 0) {
response.sendRedirect("./login.jsp");//重定向到登陸頁面
}
%>
login.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄案例</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 30px">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="glyphicon glyphicon-user"></span>登錄
</div>
<div class="panel-body">
<form action="check_login.jsp" method="POST" name="loginForm">
<div class="form-group">
<label for="name">用戶名</label> <input type="text"
class="form-control" name="name" placeholder="請輸入用戶名">
</div>
<div class="form-group">
<label for="">密碼</label> <input type="password"
class="form-control" name="pwd" placeholder="請輸入密碼">
</div>
<button type="submit" class="btn btn-primary"
onclick="return checkForm()">登錄</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<script type="text/javascript">
function checkForm() {
var name = loginForm.name.value;
var pwd = loginForm.pwd.value;
//alert(name + pwd);
if (name == "" || name == null) {
alert("請輸入用戶名");
loginForm.name.focus();
return false;
} else if (pwd == "" || pwd == null) {
alert("請輸入密碼");
loginForm.pwd.focus();
return false;
}
return true;
}
</script>
</html>
check_login.jsp：
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/tmp?useSSL=false";
String username = "root";
String password = "nxl123";
conn = DriverManager.getConnection(url, username, password);
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String pwd = request.getParameter("pwd");
String sql = "SELECT *FROM user WHERE name ='" + name + "'AND pwd = '" + pwd + "'";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
if (rs.next()) {
response.sendRedirect("./login_success.jsp");
}else{
response.sendRedirect("./login.jsp");
}
%>
login_success.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄成功！</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row" style="margin-top: 30px">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-body text-center">登錄成功！</div>
</div>
</div>
</div>
</div>
</body>
</html>
完整鏈接：https://pan.baidu.com/s/1---WkiBN1YhLiyZkvBo8FQ 提取碼：ir0a