最近学习了下jsp,感觉之前学过的Html帮上了一点作用,但是这点东西远远不够,在实现登录、注册界面的过程发现大多数使用的是JavaScript等一些知识,接下来小编来展示下自己的成果,希望能帮助初学者能更好的理解。

1.登录界面Login.jsp

2.登录判断界面CheckLogin.jsp

3.注册界面register.jsp

4.注册判断界面CheckRegister.jsp

5.登录成功界面Home.jsp


1.登录界面

<!-- 这个作用主要是判断登录的时候输入信息起到提示作用 -->
<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 == "输入您的密码")) {
alert("请输入密码!");
return false;
}
}
</script>
<body>
<center>
<font face="楷体" size="6" color="#000">登录界面</font>
<form action="CheckLogin.jsp" method="post" name="frmLogin">
<table width="300" height="180" border="5" bordercolor="#A0A0A0">
<tr>
<th>用户名:</th>
<td><input type="text" name="username" value="输入您的用户名"
maxlength="16"
οnfοcus="if(this.value == '输入您的用户名') this.value =''"></td>
</tr>
<tr>
<th> 码:</th>
<td><input type="text" name="password" value="输入您的密码"
maxlength="20" οnfοcus="if(this.value == '输入您的密码') this.value =''"></td>
</tr>
<tr>
<!-- 当点击登录则需要在CheckLogin.jsp进行判断,点击注册会跳转到注册界面 -->
<td colspan="2" align="center"><input type="submit" value="登录"
οnclick="return validateLogin()"> <input type="button"
value="注 册" οnclick="window.open('register.jsp')"> <input
type="reset" value="重 置"></td>
</tr>
</table>
</form>
</center>
</body>



2.登录判断界面( 这个页面首先取得L ogin.jsp 提交过来的数据,然后连接数据库,通过 sql 语句在数据库中进行查询比对,看有没有此用户,如果有,提示用户登陆成功,反之,登录失败)

<body>

<%
String username = new String(request.getParameter("username").getBytes("ISO8859_1"),"utf-8");
String password = new String(request.getParameter("password").getBytes("ISO8859_1"),"utf-8");//取得从Login.jsp提交过来的数据
//连接数据库的基本操作
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/student";
String usename = "root";
String psw= "1234";
Connection conn = DriverManager.getConnection(url, usename, psw);
if(conn != null){
String sql = "select * from user where name='"+username+"' and password='"+ password + "'";
Statement stmt = conn.createStatement();
ResultSet rs = stmt.executeQuery(sql);
if(rs.next()){
out.println("<script language='javascript'>alert('登录成功!');window.location.href='Home.jsp';</script>");
//response.sendRedirect("Home.jsp");
}else{
out.println("<script language='javascript'>alert('登录失败!');window.location.href='Login.jsp';</script>");
// response.sendRedirect("Login.jsp");//密码不对返回到登陆
}
}

%>
</body>


3.注册界面

<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>
<center>
<font face="楷体" size="6" color="#000">注册界面</font>
<form action="CheckRegister.jsp" method="post"
οnsubmit="return validate()">
<table width="300" height="180" border="5" bordercolor="#A0A0A0">
<tr>
<th>用户名:</th>
<td><input type="text" name="username" value="输入16个字符以内"
maxlength="16"
οnfοcus="if(this.value == '输入16个字符以内') this.value =''"></td>
</tr>
<tr>
<th>输入密码:</th>
<td><input type="text" name="password" value="输入20个字符以内"
maxlength="20"
οnfοcus="if(this.value == '输入20个字符以内') this.value =''"></td>
</tr>
<tr>
<th>确认密码:</th>
<td><input type="text" name="newword" value="请再次输入密码"
maxlength="20"
οnfοcus="if(this.value == '请再次输入密码') this.value =''"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit"
value="注 册"> <input type="reset" value="重 置"></td>
</tr>
</table>
</form>
</center>
</body>


4.注册判断界面

<body>
<%
String user = new String(request.getParameter("username").getBytes("ISO8859_1"),"utf-8");
String pwd = new String(request.getParameter("password").getBytes("ISO8859_1"),"utf-8");
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/student";
String usename = "root";
String psw= "1234";
Connection conn = DriverManager.getConnection(url,usename,psw);//得到连接
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>


5.登录成功界面

<body>
<center>
<%
// String username = new String(request.getParameter("username").getBytes("ISO8859_1"),"utf-8");
// out.println("欢迎你:" + username);
%><br>
<a href="Login.jsp">重新登陆</a>
</center>
</body>


5.1登录界面添加显示个人信息的功能(从数据库获取全部人的信息)

<%@ page language="java" contentType="text/html; charset=utf-8"   pageEncoding="utf-8"%>
<%@ page language="java" import="java.sql.*,java.io.*,java.util.*"%>
<!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>显示个人信息</title>
<style type="text/css">
table {
border: 2px #CCCCCC solid;
width: 360px;
}

td,th {
height: 30px;
border: #CCCCCC 1px solid;
}
</style>
</head>
<body>
<%
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://127.0.0.1:3306/student";
String usename = "root";
String psw= "1234";
Connection connection = DriverManager.getConnection(url,usename,psw);
Statement statement = connection.createStatement();
String sql = "SELECT * FROM user";
ResultSet rs = statement.executeQuery(sql);
%>
<br>
<br>
<table align="center">
<tr>
<th>
<%
out.print("姓名");
%>
</th>
<th>
<%
out.print("密码");
%>
</th>
</tr>

<%
while (rs.next()) {
%>
<tr>
<td>
<%
out.print(rs.getString(1));
%>
</td>
<td>
<%
out.print(rs.getString(2));
%>
</td>
</tr>
<%
}
%>
</table>
<div align="center">
<br> <br> <br>
<%
out.print("数据查询成功,恭喜你");
%>
</div>
<%
rs.close();
statement.close();
connection.close();
%>
</body>
</html>



下面是实验效果

JSP+Mysql实现登录注册_javascript

JSP+Mysql实现登录注册_html_02

数据库名称是:student

表是user

create table user(

name varchar(10),

password  varchar(20)

)