JavaEE简单网站制作第一步 注册+登陆

版权声明:欢迎转载,请注明此博客地址。 https://blog.csdn.net/Ever_glow/article/details/84818452

工具: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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  							<input type="submit" value="登录"  size="12" style="border:0px;background:rgba(0, 0, 0, 0); "/>&nbsp;&nbsp;&nbsp;
 							<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>姓名:&nbsp;&nbsp;
    	
    	<input type = "text" name = "username" id = "username" size = "16">
    	 <p>密码:&nbsp;&nbsp;
    	<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 = "注册" >
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <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>

以上,注册登录完成。

猜你喜欢

转载自blog.csdn.net/Ever_glow/article/details/84818452