首先是简单的注册登录页面
<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
*{margin:0;padding:0}
.box{
width:400px;
height:300px;
margin:20px auto;
border:1px solid deeppink;
}
span{display:block;
width:80px;
}
input{display:block;
width:170px;
margin-left:10px;
height:30px;}
li{list-style:none;
margin-left:20px;
margin-top:10px;
}
.noshow{display:none;}
.form{width:600px;
height:400px;
margin:50px auto;
border:1px solid deeppink;
}
</style>
</head>
<body>
<div class="form">
<div class="box ">
<form action="./01.jsp" method="post">
<ul>
<li><span>用户名</span><input type="text" name="username"></li>
<li><span>密码</span><input type="password" name="password"></li>
<li><input type="submit" value="提交">
</ul>
</form>
</div>
<div class="box noshow">
<form action="./03.jsp" method="post">
<ul>
<li><span>用户名</span><input type="text" name="username1"></li>
<li><span>密码</span><input type="password" name="password1"></li>
<li><input type="submit" value="提交">
</ul>
</form>
</div>
<button>注册</button>
<button>登录</button>
</div>
<script>
var btn = document.querySelectorAll("button"),
obox = document.getElementsByClassName("box");
btn[0].onclick = function (e) {
e.preventDefault();
obox[0].classList.remove("noshow");
obox[1].classList.add("noshow");
}//点击注册按钮显示注册页面
btn[1].onclick = function (e) {
e.preventDefault();
obox[1].classList.remove("noshow");
obox[0].classList.add("noshow")
}//点击登录按钮显示登录界面
</script>
</body>
</html>
接着是01.JSP即注册信息比对
<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*,java.net.*"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<p></p>
<%String username=request.getParameter("username");
String password=request.getParameter("password");
Class.forName("com.mysql.jdbc.Driver");//注册驱动
Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/zu","root","123456");//获得连接,zu为数据库名
Statement st=conn.createStatement();
String a[]=new String[100];
int i=0;
PreparedStatement f=conn.prepareStatement("SELECT * FROM a");
ResultSet r=f.executeQuery();
boolean bool=true;
while(r.next()){
a[i]=r.getString("username");
i++;
}
for(int j=0;j<a.length;j++){
if(username.equals(a[j])){
out.println("用户名已存在");
bool=false;
}
}
if(bool){
st.executeUpdate("INSERT INTO a(username,password) VALUES("+username+","+password+")");
out.println("注册成功");
}
%>
</body>
</html>
然后是登录信息比对,即03.JSP
<%@ page language="java" contentType="text/html; charset=UTF-8" import="java.util.*,java.sql.*,java.net.*"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%String username=request.getParameter("username1");
String password=request.getParameter("password1");
Class.forName("com.mysql.jdbc.Driver");
Connection conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/zu","root","123456");
Statement st=conn.createStatement();
String a[]=new String[100];
String b[]=new String[100];
int i=0;
PreparedStatement f=conn.prepareStatement("SELECT * FROM a");
ResultSet r=f.executeQuery();
while(r.next()){
a[i]=r.getString("username");
b[i]=r.getString("password");
i++;
}
for(int j=0;j<a.length;j++){
if(username.equals(a[j])){
for(int v=0;v<b.length;v++){
if(password.equals(b[v])){
out.println("登录成功");
return;
}else if(v==b.length-1){
out.println("密码错误");
}
}
}
}
%>
</body>
</html>
界面做的有些简陋,但基本功能还是实现了