工具:Myeclipse 10,Tomcat 9,MySQL
1 建立数据库,建表
首先创建数据库Barca,然后建立所需要的用户表user
类型分别是int varchar varchar varchar,flag判断是否有管理员权限。
2 创建第一个index页面
页面主要包含注册以及登陆,很简单,直接放代码
<!DOCTYPE html>
<html>
<head>
<title>welcome</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="textml; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./login.css">
</head>
<body style="background:url(image/background.jpg);background-size: cover;">
<center>
<h2 style="color:red; display:inline"> 欢迎来到巴塞
</h2>
<h2 style="color:blue;display:inline">罗那俱乐部主页</h2>
<div style="padding-top:200px">
<form action="logincheck.jsp" method="post">
<table border="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="0" bgcolor="#dddddd" width="360" height="100" style="border:0px;background:rgba(0, 0, 0, 0); ">
<tr height="130">
<td align="center">
<br>
<strong>
<span style="color: black">输入用户姓名:</span><input border="1" cellspacing="0" cellpadding="0" type="text" name="username" size="20" >
<br><br>
<span style="color: black">输入用户密码:</span><input type="password" name="password" size="20" >
<br>
<input type="submit" value="登录" size="12" style="border:0px;background:rgba(0, 0, 0, 0); "/>
<a href="register.html" style="color:black;font-size:14px; text-decoration:none">注册</a>
</strong>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</div>
</center>
</body>
</html>
效果图:
3 注册页面 register.jsp
由index页面点击注册按钮跳转而来,主要实现注册功能。需要连接数据库,判断用户的合法性。注册成功跳转登陆页面,失败继续停留在此页面,提供返回登陆界面的按钮。
为了访问数据库方便,直接在将访问数据库操作放在JavaBean中,JavaBean放置目录如下:
代码如下:
package JavaBean;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
public class SQL {
public Connection getConnection() throws SQLException,
InstantiationException, IllegalAccessException,
ClassNotFoundException {
Connection conn = null;
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/Barca?useUnicode=true&characterEncoding=utf-8";
String user = "root";
String password = "root";
conn = DriverManager.getConnection(url, user, password);
return conn;
}
/*
* 根据传入的SQL语句向数据库查询一条记录
*/
public ResultSet select(String sql) throws Exception {
Connection conn = null;
Statement stmt = null;
ResultSet rs = null;
try {
conn = getConnection();
stmt = conn.createStatement();
rs = stmt.executeQuery(sql);
return rs;
} catch (SQLException sqle) {
throw new SQLException(sqle.getMessage());
} catch (Exception e) {
throw new Exception(e.getMessage());
}
}
/*
* 根据传入的SQL语句向数据库增加一条记录
*/
public void insert(String sql) throws Exception {
Connection conn = null;
PreparedStatement ps = null;
try {
conn = getConnection();
ps = conn.prepareStatement(sql);
ps.executeUpdate();
} catch (SQLException sqle) {
throw new Exception(sqle.getMessage());
} finally {
try {
if (ps != null) {
ps.close();
}
} catch (Exception e) {
throw new Exception(e.getMessage());
}
}
try {
if (conn != null) {
conn.close();
}
} catch (Exception e) {
throw new Exception(e.getMessage());
}
}
/*
* 根据传入的SQL语句更新数据库记录
*/
public void update(String sql) throws Exception {
Connection conn = null;
PreparedStatement ps = null;
try {
conn = getConnection();
ps = conn.prepareStatement(sql);
ps.executeUpdate();
} catch (SQLException sqle) {
throw new Exception(sqle.getMessage());
} finally {
try {
if (ps != null) {
ps.close();
}
} catch (Exception e) {
throw new Exception(e.getMessage());
}
}
try {
if (conn != null) {
conn.close();
}
} catch (Exception e) {
throw new Exception(e.getMessage());
}
}
/*
* 根据传入的SQL语句删除一条数据库记录
*/
public void delete(String sql) throws Exception {
Connection conn = null;
PreparedStatement ps = null;
try {
conn = getConnection();
ps = conn.prepareStatement(sql);
ps.executeUpdate();
} catch (SQLException sqle) {
throw new Exception(sqle.getMessage());
} finally {
try {
if (ps != null) {
ps.close();
}
} catch (Exception e) {
throw new Exception(e.getMessage());
}
}
try {
if (conn != null) {
conn.close();
}
} catch (Exception e) {
throw new Exception(e.getMessage());
}
}
}
注册页面代码:
<!DOCTYPE html>
<html>
<head>
<title>欢迎注册</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script>
function check()
{
var name = document.getElementById("username").value;
if(name == "")
{
alert("请输入用户名!");
return false;
}
var p1 = document.getElementById("password").value;
var p2 = document.getElementById("password1").value;
if(p1 != p2)
{
alert("两次输入密码不一致!");
return false;
}
if(p1 == "")
{
alert("请输入密码!");
return false;
}
}
function testButton(){
window.location="index.html";
}
</script>
</head>
<body style="background:url(image/wel.jpg);background-size: cover;">
<form action = "judge.jsp" method="post" onsubmit="return check()">
<center>
<h1 style="padding-top:100px">欢迎用户注册</h1>
<div>
<br>
<p>姓名:
<input type = "text" name = "username" id = "username" size = "16">
<p>密码:
<input type = "text" name = "password" id = "password" size = "16">
<p>确认密码:
<input type = "text" name = "password1" id = "password1" size = "16">
<p>邀请码:
<input type = "text" name = "age" size = "16">
<p>
<input type = "submit" value = "注册" >
<input type="button" onclick="testButton()" name="" value="登陆">
</div>
</center>
</form>
</body>
</html>
验证注册代码
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %>
<jsp:useBean id="db" class="JavaBean.SQL" scope="page">
</jsp:useBean>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'check.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
Connection con = db.getConnection();
int validate = 0;
String name = null,pwd = null;
request.setCharacterEncoding("utf-8");
name = request.getParameter("username");
pwd = request.getParameter("password");
String ad = request.getParameter("age");
try{
Class.forName("com.mysql.jdbc.Driver");
ResultSet rs=null;
String sql = "select * from user where uname = "+"'"+name+"'";
rs = db.select(sql);
if(rs.next())
{
out.print("<script>alert('用户名已经存在!');location.replace('register.html');</script>");
}
else
{
sql = "insert into user(uname,password,flag) values('"+name+"','"+pwd+"','"+ad+"')";
db.insert(sql);
validate++;
}
}catch(Exception e)
{
e.printStackTrace();
}
if(validate > 0)
{
response.sendRedirect("index.html");
}
else{
out.println("<font color='red'>Sorry !出现异常</font>");
}
%>
</body>
</html>
效果图
4 登陆验证界面 logincheck.jsp
注册成功,信息写进数据库,完成登陆功能,将密码跟账号在数据库中进行比对,验证是否可以登陆。登陆成功,跳转主界面。
验证代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="java.sql.*" %>
<jsp:useBean id="db" class="JavaBean.SQL" scope="page">
</jsp:useBean>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'check.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
Connection con = db.getConnection();
int validate = 0;
String name = null,pwd = null;
request.setCharacterEncoding("utf-8");
name = request.getParameter("username");
session.setAttribute("name",name);
pwd = request.getParameter("password");
session.setAttribute("password",pwd);
try{
Class.forName("com.mysql.jdbc.Driver");
String sql = "select * from user where uname = "+"'"+name+"'";
ResultSet rs = db.select(sql);
while(rs.next())
{
String un = rs.getString(2);
String up = rs.getString(3);
if((un.equals(name)) && (up.equals(pwd))){%>
<script type="text/javascript">
window.location="test/main.jsp";
</script>
<% }
else
{%>
<script type="text/javascript">
alert("账户或密码错误!");
window.location="index.html";
</script>
<%}
}%>
<script type="text/javascript">
alert("用户不存在!");
window.location="index.html";
</script>
<%}catch(Exception e)
{
e.printStackTrace();
}
%>
</body>
</html>
以上,注册登录完成。