欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

程序员文章站 2022-05-08 11:21:27
...

前些天一直卡在了将项目发布到云服务器上面,没有更新。
本次更新添加功能:

  • 注册功能已完善(密码需要是必须同时有数字和英文字母)
  • 增删改查操作本身简单,但是界面很难设计。
  • 一般用户界面和管理员界面完成
  • 一般用户界面,只有查询的功能,不可以修改信息
  • 管理员可以修改信息(修改对应界面还没有做好,HTML、JavaScript学的太浅,相对来说能看的页面做起来太麻烦了)
  • 正则表达式来进行输入的合法性检验
  • 由于已经发布到云服务器上面,大家可以点击下面的链接进行访问(新手上路,还很不完善,大家不要恶意注册,谢谢):
    建议用电脑浏览,手机没有优化,可能显示比例有问题,点我跳转
  • 连接数据库的代码基本没变,但是URL记得改一下(将其中的localhost改为RDS的外网地址
    运行效果图:
    【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面
    【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

当用户信息过多时候,产生滑动效果:

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

当搜索时,只能输入数字,否则报错:

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

点击退出,弹出确定框:

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

接下来可以看注册界面:

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

很容易理解的界面,注册时候用正则表达式来对账号和密码进行合法性检验。

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面
【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面
【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

管理员界面:

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

代码:

这里我们要接收数据库中的用户信息,新建了一个实体类:User.java

【JavaWeb实现数据库应用系统】第三周进度,注册、登录、查询、一般用户界面

package entity;

public class User {
	
	private String username;
	private String password;
	private int is_admin;
	
	public User(String name,String pwd , int is_admin){
		this.is_admin = is_admin;
		this.username = name;
		this.password = pwd;
	}
	
	public String getUsername() {
		return username;
	}


	public void setUsername(String username) {
		this.username = username;
	}


	public String getPassword() {
		return password;
	}


	public void setPassword(String password) {
		this.password = password;
	}


	public int getIs_admin() {
		return is_admin;
	}


	public void setIs_admin(int is_admin) {
		this.is_admin = is_admin;
	}


	public static void main(String[] args) {
		// TODO Auto-generated method stub
		
	}

}

然后在工具类中新建了一个Read_user.java来将数据以泛型传递给jsp输出

package util;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.mysql.jdbc.Connection;

import db_connect.DBConnect;
import entity.User;


public class Read_user {
	
	
	List<User> user = new ArrayList<User>();
	Statement statement = null;
	ResultSet result = null;
	
	
	
	@SuppressWarnings("null")
	public List<User> read_user(){
		
		
		Connection connection = (Connection) DBConnect.getConnection();
	
		String sql = "select * from user";
		
		try {
			statement = connection.createStatement();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		try {
			result = statement.executeQuery(sql);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		try {
			while(result.next()) {
				int is_admin = result.getInt("is_admin");
				String name = result.getString("user_name");
				String pwd = result.getString("pass_word");
				User u1 = new User(name , pwd , is_admin);
				user.add(u1);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return user;
	}
	//这个方法是查询特定用户信息时候调用的
public List<User> read_user(int num){
		
		
		Connection connection = (Connection) DBConnect.getConnection();
	
		String sql = "select * from user where is_admin = " + num;
		
		try {
			statement = connection.createStatement();
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		try {
			result = statement.executeQuery(sql);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		try {
			while(result.next()) {
				int is_admin = result.getInt("is_admin");
				String name = result.getString("user_name");
				String pwd = result.getString("pass_word");
				User u1 = new User(name , pwd , is_admin);
				user.add(u1);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		return user;
	}

}

注册界面regist.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="util.CookieUtil" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>Title</title>
     <script type="text/javascript">
 //刷新验证码
	 function changeImg(){
	 
	 	document.getElementById("validateCodeImg").src="DrawImageServlet?"+Math.random();
	 	
	 }
 </script>
    <style type="text/css">
    .tips{
    	
    	background-color:red;
    
    }
	     img{
	    	width: 220px;   
		    height: 60px;  
		    margin:0 ,0 ,0 ,0;
		    padding: 10px;   
		    color: blue;   
		    text-shadow:1px 1px 1px;   
	    }
	    
	    .div0{
	    		text-align:center;
	    	}
    	
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            padding: 0;
            font: 16px/20px microsft yahei;
         }
        .wrap {
            width: 100%;
            height: 100%;
            padding: 10% 0;
            position: fixed;
            opacity: 0.8;
            background: linear-gradient(to bottom right,#000000, #656565);
            background: -webkit-linear-gradient(to bottom right,#50a3a2,#53e3a6);
        }
        .container {
            width: 60%;
            margin: 0 auto;
        }
        .container h1 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 500;
        }
        .container input {
            width: 320px;
            display: block;
            height: 36px;
            border: 0;
            outline: 0;
            padding: 6px 10px;
            line-height: 24px;
            margin: 32px auto;
            -webkit-transition: all 0s ease-in 0.1ms;
            -moz-transition: all 0s ease-in 0.1ms;
            transition: all 0s ease-in 0.1ms;
        }
        .container input[type="text"] , .container input[type="password"]  {
            background-color: #FFFFFF;
            font-size: 16px;
            color: #50a3a2;
        }
        .container input[type='submit'] {
            font-size: 16px;
            letter-spacing: 2px;
            color: #666666;
            background-color: #FFFFFF;
        }
        .container input:focus {
            width: 400px;
        }
        .container input[type='submit']:hover {
            cursor: pointer;
            width: 400px;
        }
        .to_login{
            color: #a7c4c9;
        }
        .text{
            color: #e2dfe4;
        }
        .wrap ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -20;
        }
        .wrap ul li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            border-radius: 50%;
            box-shadow: inset -30px -30px 75px rgba(0, 0, 0, .2),
            inset 0px 0px 5px rgba(0, 0, 0, .5),
            inset -3px -3px 5px rgba(0, 0, 0, .5),
            0 0 20px rgba(255, 255, 255, .75);
            background-color:rgba(255, 255, 255, 0.15);
            animotion: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }
        .wrap ul li:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 11s;
        }
        .wrap ul li:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(4) {
            width: 50px;
            height: 50px;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }
        .wrap ul li:nth-child(5) {
            width: 60px;
            height: 60px;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }
        .wrap ul li:nth-child(6) {
            width: 75px;
            height: 75px;
            left: 50%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }
        .wrap ul li:nth-child(7) {
            left: 60%;
            width: 30px;
            height: 30px;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }
        .wrap ul li:nth-child(8) {
            width: 90px;
            height: 90px;
            left: 70%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }
        .wrap ul li:nth-child(9) {
            width: 50px;
            height: 50px;
            left: 80%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }
        .wrap ul li:nth-child(10) {
            width: 75px;
            height: 75px;
            left: 90%;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
            animation-duration: 30s;
            -moz-animation-duration: 30s;
            -o-animation-duration: 30s;
            -webkit-animation-duration: 30s;
        }
        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }
            100% {
                bottom: 400px;
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }
    </style>
</head>
<body>

 <div class="wrap">

    <div class="container">
	 <center><h1 style="color:red">
		<%	
			String user = (String)request.getAttribute("msg");
			if(user != null){
				out.println(user);
			}
		%>
	</h1>
	</center>
	
	<center><h1 style="color:white">
		<%	
			String user2 = (String)request.getAttribute("msg");
			if(user2 == null){
				out.println("欢迎注册");
			}
		%>
	</h1>
	</center>
	
       
        <form action = "RegistServlet" method="post">
        <label><input type="text" required="required" placeholder="账号" name = "username"/></label>
        <label><input type="password" required="required" placeholder="密码" name = "password"/></label>
        <label><input type="password" required="required" placeholder="再次输入确认密码" name = "password2" />
        <input type="text" required="required" placeholder="请输入下方验证码,点击可以刷新" name = "check"/>
        <div class = "div0">
        <img alt="验证码看不清,换一张" src="DrawImageServlet" id="validateCodeImg" onclick="changeImg(this,'nl')"></label>
        </div>  
		  <input type="submit" value="提交"/>
        </form>

    </div>

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

</body>
</html>

对应的Servlet(RegistServlet.java)

package servlet;

import java.io.IOException;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.mysql.jdbc.Connection;

import db_connect.DBConnect;

/**
 * Servlet implementation class RegistServlet
 */
public class RegistServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
   
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		Connection connection = (Connection) DBConnect.getConnection();
		Statement statement = null;		
		ResultSet resultSet = null;
		
		
		String username = (String)request.getParameter("username");
		
		String password1 = (String)request.getParameter("password");
		System.out.println(password1);
		String password2 = (String)request.getParameter("password2");
		String path = "";
		String msg = "";
		int temp = 0;//判断注册账户是否已经存在
		
		//接收客户端浏览器提交上来的验证码
		
		String use_code = request.getParameter("check");
		
		//提取图片的验证码
		String system_code =  (String) request.getSession().getAttribute("checkcode");
		
	
		
		String user = "^[a-zA-Z][a-zA-Z0-9_]{4,15}$";
		//密码必须同时有字母和数字
		String pwd = "^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$";
		if(username != null && password1 != null && password2 != null && use_code != null 
				&& system_code != null) {
			//转换成小写
			use_code = use_code.toLowerCase();
			system_code = system_code.toLowerCase();
			if(use_code.equals(system_code)) {
				if(username.matches(user)) {
					if(password1.equals(password2)) {
						if(password1.matches(pwd)) {
							String sql = "insert into User values(\'"+ username + "\',\'" +
											password1 + "\',0)";
							//将数据库中的数据提取出来
							try {
								statement = connection.createStatement();
							}catch(SQLException e) {
								e.printStackTrace();
							}
							//查询语句
							String sql2 = "select * from user";
							
							try {
								//将所有信息存入结果集
								resultSet = statement.executeQuery(sql2);
							}catch(SQLException e) {
								e.printStackTrace();
							}
							
							try {
								while(resultSet.next()) {
									String user_name = (String)resultSet.getString("user_name");
									System.out.println(user_name);
									if(username.equals(user_name)) {
										temp = 1;
										break;
									}
								}
							} catch (SQLException e) {
								e.printStackTrace();
							}
							System.out.println(temp);
							if(temp == 0) {
								try {
									statement.executeUpdate(sql);
								} catch (SQLException e) {
									e.printStackTrace();
								}
								path = "login.jsp";
								msg = "注册成功,请登录";
							}else {
								path = "regist.jsp";
								msg = "用户已经存在,请换一个用户名注册";
							}
						}else {
							path = "regist.jsp";
							msg = "密码格式错误";
						}
					}else {
						path = "regist.jsp";
						msg = "两次输入密码不相同";
					}
				}else {
					path = "regist.jsp";
					msg = "账号格式错误";
				}
			}else {
				msg = "验证码输入错误";
				path = "regist.jsp";
			}
			
		System.out.println(msg + path);
		request.setAttribute("username", username);
		request.setAttribute("msg", msg);
		
		RequestDispatcher dispatcher = request.getRequestDispatcher(path);
		
		dispatcher.forward(request, response);
		
	}
}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

普通用户主界面user_main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="util.Read_user" %>
<%@ page import="entity.User" %>
<%@ page import="java.util.List" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<SCRIPT LANGUAGE=javascript> 
		function logout() { 
		 var msg = "您真的确定要退出吗?"; 
		 if (confirm(msg)==true){ 
		  	return true; 
		 }else{ 
		  		return false; 
		 	} 
		} 
		 function check(v){
		        var r=/^[0-9]+.?[0-9]*$/;
		        if(!r.test(v)){ 
		            alert('只能输入数内字容');
		        }
		    }
	</SCRIPT> 
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			/* 媒体查询 根据 用户设备的屏幕尺寸来显示, */
			#all { width: 80%; height: 550px; background-color: pink;
			margin: auto;overflow-y: auto;}
			#nav{height: 100px; background-color: lightblue; text-align:center;color:yellow;}
			#mid{height: 350px;}
			#mid #midleft{width: 20%; height:350px ;float: left;}
			#mid #midmid{width: 70%; height:350px ; background-color: lime;float: left;overflow-y: auto;}
			#mid #midright{width: 10%; height:350px ; background-color: khaki;float: left;}
			#foot{height: 90px; background-color: yellow; text-align:center;padding-top:15px;
				padding-left:30px;align:center;}
			
			@media only screen and (max-width:1400px ) {
				#all{width: 80%;}
			}
			@media only screen and (max-width:700px ) {
				#all{width: 100%;}
			}
			/* --------------------------------- 
			 导航栏: UL LI a 导航栏
			 1:UL 去除默认属性
			 2:li 漂浮
			 3:a变为块级元素
			 */
			#all ul{ margin: 0px; padding: 0px; list-style-type: none;
				height: 60px; background-color: #C71585;}
			#all li{ float: left; width: 20%;height: 60px;}
			#all ul li a{display: block;height: 45px; text-align: center; font-size: 22px;
			font-family: "courier new"; font-weight: 700; color: white; text-decoration: none;
				/* 塞泡沫 */
				padding-top:15px;
				border-right: 2px solid white;
			}
			
			
			#all ul li a#a1{background-color: black;}
			#all ul li a#a2{background-color: forestgreen;}
			#all ul li a#a3{background-color: blue;}
			#all ul li a#a4{background-color: forestgreen;}
			#all ul li a#a5{background-color: blue;}
			#all ul li a:hover {background-color: crimson;}
			#all ul li a#a1:hover {background-color: gray;}
			#all ul li a#a2:hover {background-color: gray;}
			
		
	        .search{
	        	margin-left:36%;
	            width: 30%;            
	            display: flex;
	            text-align:center;
	            float:left;
	            /*border: 1px solid red;*/
	        }
	        .search input{
	            float: left; 
	            flex: 3;
	            height: 30px;
	            outline: none;
	            border: 1px solid red;
	            box-sizing: border-box;
	            padding-left: 15px;
	        }
	        .search button{
	            float: right;
	            flex: 1;
	            height: 30px;
	            background-color: red;
	            color: white;
	            border-style: none;
	            outline: none;
	        }
	        .search button i{
	            font-style: normal;
	        }
	        .search button:hover{
	            font-size: 16px;
	        }
			
		</style>
</head>
<body>
	<div id="all">
			<div id="nav">
				<ul>
					<li><a href="" id="a1" target="_blank">学生列表</a></li>
					<li><a href="user_main.jsp" id="a2">选修课程</a></li>
					<li><a href="float.html" id = "a3">课程成绩</a></li>
					<li><a href="" id = "a4">综合排名</a></li>
					<li><a href="login.jsp" id = "a5" onclick="javascript:return logout()">退出登录</a></li>
				</ul>
				学生信息如下
				
			</div>
			
			
			<div id="mid">
				<div id="midleft"></div>
				<div id="midmid">
					<table border = '1' style="margin:auto ;text-align:center" >
					<tr>
						<td width="200px">用户名</td>
						<td width="200px">密码</td>
						<td width="200px">是否为管理员</td>
					</tr>
					<%
						Read_user readuser = new Read_user();
						List<?> list = readuser.read_user();
						for(Object u1:list){
							User u = (User)u1;
					%>
					<tr>
						<td><%=u.getUsername() %></td>
						<td><%=u.getPassword() %></td>
						<td><%
								if(u.getIs_admin() == 1){
									out.print("是");
								}else{
										out.print("否");
									}	 
							%>
						</td>
					</tr>
					<%
						}
					%>
					
				</table>
				</div>
				<div id="midright"></div>
			</div>
			<div id="foot">
				<!--  	<li><a href=" " id="a1" >增加信息</a></li>
					<li><a href=" " id="a2">删除信息</a></li>
					<li><a href=" ">修改信息</a></li>
				-->
				 <form action="SearchServlet">
				 	<div class="search" >
					
						<input type="text" id = "v" placeholder="请输入查询的学号" name="student_num" onpropertychange='check(this.value)' oninput='check(this.value)' />
			            <button><i>搜索</i></button>
					
		        	</div>
				 </form>
					
				
			</div>
		</div>

</body>
</html>

管理员界面和普通用户界面代码基本一致,就不放出来了,对应的查找操作的Servlet(SearchServlet.java)如下:

package servlet;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class SearchServlet
 */
public class SearchServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String path;
		int stu;
		if(request.getParameter("student_num").equals("")) {
			path = "user_main.jsp";
		}else {
			stu = Integer.parseInt(request.getParameter("student_num"));
			path = "search_result/result.jsp";
			request.setAttribute("stu", stu);
			System.out.println(stu);
		}
		
		RequestDispatcher dispatcher = request.getRequestDispatcher(path);
		
		dispatcher.forward(request, response);
		
		
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}