Java Web新手小项目及源码

这个项目适合Java Web初学者,涵盖了JSP连接数据库、MD5加密、验证码验证、AJAX、文件上传下载、session登录验证等功能。通过登录、注册页面实现用户交互,利用AJAX实现验证码验证结果的实时显示,同时包括文件管理和登录过滤器的实现。
摘要由CSDN通过智能技术生成

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">这是javaweb的期末作业,本人大三。在这里和大家分享,有不足之处也希望大家指出来。</span>

项目比较简单,主要供新手小白参考,大牛请轻喷~

实现的主要功能有:JSP连接数据库、MD5加密、验证码验证、AJAX、文件上传下载、session登录验证、等


先来几张成果图:





首页的图是盗用teambition的,样式也是仿照它写的,不要在意这些。。。



首先写登录页login.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<html>
	<head>
		<title>WormJam-登录</title>
		<link rel="stylesheet" href="css/style.css" type="text/css">
	</head>
	<body>
		<div class="loginHeader">
			<div class="title">
				<center><span>WormJam</span></center>
				<center><h3>秀出你的源代码</h3></center>
			</div>
		</div>		
		<div class="form">
			<form method="post" name="loginForm">
				账号:<input type="text" name="account" onInput="accountChange()">
				<span id="accountText"> </span><span id="loginInfo"></span><br><br>
				密码:<input type="password" name="password" onInput="passwordChange()">
				<span id="passwordText"> </span><br><br>	
				验证码:<input type="text" name="code" size="10" onInput="validate()">
				<img name="imgValidate" οnclick="refresh()" border=0 src="validate.jsp"></img>
				<span id="codeText" name="codeText" style="color:green"> </span><br><br>	
				<input type="button" value="登录" οnclick="validateSubmit()">
				<a href="register.jsp">注册</a>
			</form>
		</div>
		<script>
			//验证账号密码格式
			function accountChange(){
				var str = loginForm.account.value;
				var reg = /[a-zA-Z0-9]{6,16}/;
				if(reg.test(str)){
					accountText.innerHTML = "√";
					accountText.style.color = "green";
				}
				else{
					accountText.innerHTML = "账号为6至16位数字或字母!";
					accountText.style.color = "red";
				}
			}
			function passwordChange(){
				var str = loginForm.password.value;
				var reg = /^[x00-x7f]+$/;
				if(reg.test(str) && str.length>5 && str.length<17){
					passwordText.innerHTML = "√";
					passwordText.style.color = "green";
				}else{
					passwordText.innerHTML = "密码必须是6至16位!";
					passwordText.style.color = "red";
				}
			}
			//验证码刷新
			function refresh(){
				//加入随机参数防止调用浏览器缓存
				loginForm.imgValidate.src = "validate.jsp" + "?id=" + Math.random();
			}
			//表单提交验证
			function validateSubmit(){
				if(accountText.innerHTML=="√" && passwordText.innerHTML == "√" && codeText.innerHTML == "√"){
					var account = loginForm.account.value;
					var password = loginForm.password.value;
					var xmlHttp = new XMLHttpRequest();
					var url = "LoginServlet?account=" + account + "&password=" + password;
					xmlHttp.open("POST",url,true);
					xmlHttp.onreadystatechange = function(){
						if(xmlHttp.readyState == 4){
							loginInfo.innerHTML = xmlHttp.responseText;
						}else{
							loginInfo.innerHTML = "正在验证密码……";
						}
				}
				xmlHttp.send();
				}else{
					return false;
				}
			}			
			//AJAX
			function validate(){
				var code = loginForm.code.value;
				var xmlHttp = new XMLHttpRequest();
				var url = "ValidateServlet?code=" + code;
				xmlHttp.open("POST",url,true);
				xmlHttp.onreadystatechange = function(){
					if(xmlHttp.readyState == 4){
						codeText.innerHTML = xmlHttp.responseText;
					}else{
						codeText.innerHTML = "正在验证……";
					}
				}
				xmlHttp.send();
			}
		</script>
	</body>
</html>

登录的表单里先不看验证码,为了限制账号及密码 的格式为6至16位的数字或字母,用input里的onInput事件,当账号或密码框中的值发生改变时即调用accountChange()或passwordChange()函数进行输入格式的验证。accountChange()中的正则表达式/[a-zA-Z0-9]{6,16}/;表示6至16位的字母或数字,passwordChange()中的/^[x00-x7f]+$/表示键盘上能够输入的符号。

再看验证码。我是采用了书上的validate.jsp页面生成验证码:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8" %>
<%@ page import="java.awt.*" import="java.awt.image.BufferedImage" import="javax.imageio.ImageIO" %>
<html>
<body>
<%
	response.setHeader("Cache-Control", "no-cache");
	//在内存中创建图像
	int width = 60,height = 20;
	BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
	//获取画笔
	Graphics g = image.getGraphics();
	//设置背景色
	g.setColor(new Color(200,200,200));
	g.fillRect(0,0,width,height);
	//随机产生验证码
	Random rnd = new Random();
	int randNum = rnd.nextInt(8999) + 1000;
	String randStr = String.valueOf(randNum);
	//将验证码存入session
	session.setAttribute("randStr",randStr);
	//将验证码显示在图像中
	g.setColor(Color.black);
	g.setFont(new Font("",Font.PLAIN,20));
	g.drawString(randStr,10,17);
	//随机产生100个随机点
	for(int i=0;i<100;i++){
		int x = rnd.nextInt(width);
		int y = rnd.nextInt(height);
		g.drawOval(x,y,1,1);
	}
	//输出图像到页面
	ImageIO.write(image,"JPEG", response.getOutputStream());
	out.clear();
	out = pageContext.pushBody();
%>
</body>
</html>

这段代码生成一个验证码并放在图片中显示,然后login.jsp的登录表单中用img标签把这个验证码图片加载进来。

然后写个ValidateServlet对输入的验证码进行验证:

package servlets;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.*;

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

public class ValidateServlet extends HttpServ
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值