【JavaWeb实现数据库应用系统】第三周进度，注册、登录、查询、一般用户界面
程序员文章站
2022-05-08 11:21:27
...
前些天一直卡在了将项目发布到云服务器上面，没有更新。
本次更新添加功能：
- 注册功能已完善（密码需要是必须同时有数字和英文字母）
- 增删改查操作本身简单，但是界面很难设计。
- 一般用户界面和管理员界面完成
- 一般用户界面，只有查询的功能，不可以修改信息
- 管理员可以修改信息（修改对应界面还没有做好，HTML、JavaScript学的太浅，相对来说能看的页面做起来太麻烦了）
- 正则表达式来进行输入的合法性检验
- 由于已经发布到云服务器上面，大家可以点击下面的链接进行访问（新手上路，还很不完善，大家不要恶意注册，谢谢）：
建议用电脑浏览，手机没有优化，可能显示比例有问题，点我跳转 - 连接数据库的代码基本没变，但是URL记得改一下（将其中的localhost改为RDS的外网地址）
运行效果图：
当用户信息过多时候，产生滑动效果：
当搜索时，只能输入数字，否则报错：
点击退出，弹出确定框：
接下来可以看注册界面：
很容易理解的界面,注册时候用正则表达式来对账号和密码进行合法性检验。
管理员界面：
代码：
这里我们要接收数据库中的用户信息，新建了一个实体类：User.java
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);
}
}
上一篇： Java实现医疗系统