java邮件系统（二）——登陆注册模块
这里还是一些老掉牙的问题，CSS，验证码，SSL，Struts Validate等。一个一个记录下来再说：
-
css
终于对页面布局有了一点点了解，基本的一个head，一个sidebar，一个mainbody的结构：
/*基本信息*/
body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}
a:link,a:visited {font-size:12px;text-decoration:none;}
a:hover{}
/*页面层容器*/
#container {width:700px;margin:10px auto}
/*页面头部*/
#header {background:url(../img/logo.gif) no-repeat;height:59px;}
#menu {}
#menu ul {float:right;list-style:none;margin:0px;width:560px;height:16;background:#EAF3FF}
#menu ul li {float:right;display:block;line-height:30px;margin:0 5px}
#menu ul li a:link,#menu ul li a:visited {font-weight:bold;font-size:11px;color:#00A3FF}
#menu ul li a:hover{}
.menuDiv {width:1px;height:28px;background:#CCCCCC;}
/*页面主体*/
#pagebody {
width:700px; /*设定宽度*/
margin:0px auto; /*居中*/
}
#sidebar {
background:#F5F8FC;
width:320px; /*设定宽度*/
text-align:left; /*文字左对齐*/
float:right; /*浮动居左*/
clear:right; /*不允许左侧存在浮动*/
overflow:hidden; /*超出宽度部分隐藏*/
border:1px solid #78A3D3;
height:400px
}
#sidebar ul {float:right;list-style:none;width:320px;height:16;margin:20px;}
#sidebar ul li {font-size:13px;margin:10px;}
#sidebar ul li a:link,#sidebar ul li a:visited {font-size:11px;color:#78A3D3}
#sidebar ul li a:hover{}
.account,.password,.validate {
border:1px solid #78A3D3;
line-height:100px;
width: 120px;
height: 20px;
}
.loginButton {
BORDER-RIGHT: #7b9ebd 1px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #7b9ebd 1px solid;
PADDING-LEFT: 2px;
FONT-SIZE: 12px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
BORDER-LEFT: #7b9ebd 1px solid;
CURSOR: hand;
COLOR: black;
PADDING-TOP: 2px;
BORDER-BOTTOM: #7b9ebd 1px solid
}
.note {
font-size: 11px;
color: #868686;
}
.error {
margin:1px 20px;
width:120px;
color:ff0000;
font-size:12;
}
#mainbody {
width:380px;
text-align:left;
float:left; /*浮动居右*/
clear:left; /*不允许右侧存在浮动*/
overflow:hidden;
}
#mainbody ul {float:right;list-style:none;width:320px;height:16;margin:20px;}
#mainbody ul li {font-size:12px;margin:5px;}
/*页面底部*/
#footer {width:800px;margin:0 auto;height:50px;background:#00FFFF}另外找到一个不错的注册的css：
.css
body {
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
color:#666666;
background:#fff;
text-align:center;
}
* {
margin:0;
padding:0;
}
a {
color:#1E7ACE;
text-decoration:none;
}
a:hover {
color:#000;
text-decoration:underline;
}
h3 {
font-size:14px;
font-weight:bold;
}
pre,p {
color:#1E7ACE;
margin:4px;
}
input, select,textarea {
padding:1px;
margin:2px;
font-size:11px;
}
.buttom{
padding:1px 10px;
font-size:12px;
border:1px #1E7ACE solid;
background:#D0F0FF;
}
#formwrapper {
width:510px;
margin:15px auto;
padding:20px;
text-align:left;
border:1px #1E7ACE solid;
}
fieldset {
padding:10px;
margin-top:5px;
border:1px solid #1E7ACE;
background:#fff;
}
fieldset legend {
color:#1E7ACE;
font-weight:bold;
padding:3px 20px 3px 20px;
border:1px solid #1E7ACE;
background:#fff;
}
fieldset label {
float:left;
width:120px;
text-align:right;
padding:4px;
margin:1px;
}
.error {
margin:1px 125px;
width:120px;
color:ff0000;
}
fieldset div {
clear:left;
margin-bottom:2px;
}
.enter{ text-align:center;}
.clear {
clear:both;
}
.jsp
-
关于validation
可以用js和struts validate，这里两种都用了-_-!!!
先说用框架的：
1.配置文件：
2.写验证规则
3.写properties文件
4. 别忘了页面上添加
本来可以自己写个验证规则来判断用户名是否存在，但是Ajax的无刷新验证看来更具诱惑力，于是对Ajax一窍不通的我做了第一次尝试..貌似也蛮好理解的，即写一个servlet，并用js调用并在页面显示结果。
servlet：
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ymail.dbimpl.UsersImpl;
public class UsernameValidator extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = -9038308848332609445L;
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
// System.out.print("asdfdsaf");
try{
UsersImpl usersImpl = new UsersImpl();
boolean flag = usersImpl.usernameValidate(username);
String msg = null;
//System.out.print(flag);
response.setContentType("text/html;charset=gb2312");
PrintWriter out = response.getWriter();
if (flag) {
msg = "用户名"+username+"已经存在";
}
else {
msg = "恭喜你,"+username+"可以使用";
}
out.println(msg);
//System.out.print(msg);
}catch(Exception ex){
ex.printStackTrace();
}
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
}
js：
记得在页面中添加错误信息显示的位置：
-
验证码
怎么也弄不出qq邮箱那个效果，谁能告诉我怎么用java2d画随机曲线的？自己做的比较难看：
package servlet;
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
* 生成随机验证码
* @author bitiliu
*
*/
public class ValidateCodeServlet extends HttpServlet
{
private static final long serialVersionUID = 1L;
//验证码图片的宽度。
private int width=30;
//验证码图片的高度。
private int height=15;
//验证码字符个数
private int codeCount=3;
private int x=0;
//字体高度
private int fontHeight;
private int codeY;
char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J',
'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W',
'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };
/**
* 初始化验证图片属性
*/
public void init() throws ServletException
{
//从web.xml中获取初始信息
//宽度
String strWidth=this.getInitParameter("width");
//高度
String strHeight=this.getInitParameter("height");
//字符个数
String strCodeCount=this.getInitParameter("codeCount");
//将配置的信息转换成数值
try
{
if(strWidth!=null && strWidth.length()!=0)
{
width=Integer.parseInt(strWidth);
}
if(strHeight!=null && strHeight.length()!=0)
{
height=Integer.parseInt(strHeight);
}
if(strCodeCount!=null && strCodeCount.length()!=0)
{
codeCount=Integer.parseInt(strCodeCount);
}
}
catch(NumberFormatException e)
{}
x=width/(codeCount+1);
fontHeight=height;
codeY=height-2;
}
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, java.io.IOException {
//定义图像buffer
BufferedImage buffImg = new BufferedImage(
width, height,BufferedImage.TYPE_INT_RGB);
Graphics2D g = buffImg.createGraphics();
//创建一个随机数生成器类
Random random = new Random();
//将图像填充为白色
g.setColor(new Color(230, 243, 255));
g.fillRect(0, 0, width, height);
//创建字体，字体的大小应该根据图片的高度来定。
Font font = new Font("Arial", Font.ITALIC, 35);
//设置字体。
g.setFont(font);
//画边框。
g.setColor(Color.BLACK);
g.drawRect(0, 0, width - 1, height - 1);
//随机产生160条干扰线，使图象中的认证码不易被其它程序探测到。
g.setColor(Color.BLACK);
int red = 0, green = 0, blue = 0;
for(int i = 0; i < 20; i++)
{
int x = random.nextInt(width);
int y = random.nextInt(height);
int xl = random.nextInt(30);
int yl = random.nextInt(30);
red = random.nextInt(255);
green = random.nextInt(255);
blue = random.nextInt(255);
//用随机产生的颜色将验证码绘制到图像中。
g.setColor(new Color(red, green, blue));
g.setStroke(new BasicStroke(3.0f));
g.drawArc(x, y, xl, yl,random.nextInt(180),random.nextInt(180));
}
//randomCode用于保存随机产生的验证码，以便用户登录后进行验证。
StringBuffer randomCode = new StringBuffer();
//随机产生codeCount数字的验证码。
for (int i = 0; i < codeCount; i++) {
//得到随机产生的验证码数字。
String strRand = String.valueOf(codeSequence[random.nextInt(36)]);
g.setColor(new Color(red, green, blue));
g.drawString(strRand, (i + 1) * x, codeY);
//将产生的四个随机数组合在一起。
randomCode.append(strRand);
}
// 将四位数字的验证码保存到Session中。
HttpSession session = req.getSession();
session.setAttribute("validateCode", randomCode.toString());
// 禁止图像缓存。
resp.setHeader("Pragma", "no-cache");
resp.setHeader("Cache-Control", "no-cache");
resp.setDateHeader("Expires", 0);
resp.setContentType("image/jpeg");
//将图像输出到Servlet输出流中。
ServletOutputStream sos = resp.getOutputStream();
ImageIO.write(buffImg, "jpeg", sos);
sos.close();
}
}
然后再页面插入该servlet：
-
SSL
提到这个，单向双向是老掉牙的问题，这里不用双向，所以只添加了服务器端的验证：
一、生成 KeyStore
这一步比较简单，利用 JDK 自带的 keytool 即可完成。命令如下：
wakan@wakan:~/tomcat2/bin> keytool -genkey -alias tomcat -keyalg RSA
输入keystore密码： ************
您的名字与姓氏是什么？
[Unknown]： Wakan.Jiang
您的组织单位名称是什么？
[Unknown]： ZZNode
您的组织名称是什么？
[Unknown]： ZZNode
您所在的城市或区域名称是什么？
[Unknown]： BeiJing
您所在的州或省份名称是什么？
[Unknown]： BeiJing
该单位的两字母国家代码是什么
[Unknown]： CN
CN=Wakan.Jiang, OU=ZZNode, O=ZZNode, L=BeiJing, ST=BeiJing, C=CN 正确吗？
[否]： 是
输入的主密码
（如果和 keystore 密码相同，按回车）：
特别说明：上边输入的“
2007-3-26 17:07:01 org.apache.coyote.http11.Http11BaseProtocol init
严重: Error initializing endpoint
java.io.IOException: Cannot recover key
at org.apache.tomcat.util.net.jsse.JSSE14SocketFactory.init(JSSE14Socket Factory.java:125)
二、修改 server.xml
在 TOMCAT/conf/server.xml 中，修改与 SSL 相关的那一段，我改成下面这样：
这里要指定keystorePass，如果写错了，会出现下边的错误：
严重: Error initializing endpoint
java.io.IOException: Keystore was tampered with, or password was incorrect
at sun.security.provider.JavaKeyStore.engineLoad(JavaKeyStore.java:768)
三、启动 Tomcat
这一步比较简单，就不多说了。启动完成后，在浏览器中输入：https://localhost:8443，即可看到TOMCAT的主页面。