<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