1.前端页面布局:
DOCTYPE
html>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
title
>欢迎注册
title
>
<
link
rel=
"stylesheet"
href=
"style/common.css"
>
<
link
rel=
"stylesheet"
href=
"style/regStyle.css"
>
<
link
href=
"favicon.ico"
rel=
"shortcut icon"
>
<
link
rel=
"stylesheet"
href=
"style/footerStyle.css"
>
head
>
<
body
>
<
div
id=
"reg_header"
>
<
div
class=
"reg_h_center"
>
<
img
src=
"images/logo.png"
alt=
""
>
<
h3
>欢迎注册
h3
>
<
div
class=
"reg_h_right"
>
<
span
>已有账户
span
><
a
href=
"login.html"
>请登录
a
>
div
>
div
>
div
>
<
div
id=
"reg_main"
>
<
div
class=
"main_left"
>
<
form
action=
"/Mystore/RegistServlet"
id=
"reg_form"
method=
"post"
>
<
div
>
<
label
>用户名
label
>
<
input
id=
"username"
type=
"text"
placeholder=
"请输入用户名..."
name=
"username"
>
div
>
<
div
>
<
label
>密码
label
>
<
input
id=
"pwd"
type=
"text"
placeholder=
"请输入密码.."
name=
"password"
>
div
>
<
div
>
<
label
>确认密码
label
>
<
input
id=
"pwd2"
type=
"text"
placeholder=
"请再次输入密码..."
>
div
>
<
div
>
<
label
>电话
label
>
<
input
type=
"text"
placeholder=
"请输入电话..."
name=
"phone"
>
div
>
<
div
class=
"check_box"
>
<
label
>验证码
label
>
<
input
type=
"text"
placeholder=
"请输入验证码..."
name=
"code"
>
<
img
src=
"/Mystore/CheckCodeServlet"
onclick=
"change(this)"
> //调用JS函数处理验证码更新,把参数传递给checkcodeservlet
div
>
<
div
class=
"submit_button"
>
<
input
type=
"button"
value=
"立即注册"
onclick=
"checkData()"
>
div
> //调用JS函数处理网页端的逻辑验证
form
>
div
>
<
div
class=
"main_right"
>
<
img
src=
"images/reg_right.png"
alt=
""
>
div
>
div
>
<
div
id=
"footer"
>
<
div
class=
"link"
>
<
a
href=
"#"
>关于我们
a
> |
<
a
href=
"#"
>联系我们
a
> |
<
a
href=
"#"
>人才招聘
a
> |
<
a
href=
"#"
>商家入驻
a
> |
<
a
href=
"#"
>广告服务
a
> |
<
a
href=
"#"
>手机码蚁
a
> |
<
a
href=
"#"
>友情链接
a
> |
<
a
href=
"#"
>销售联盟
a
> |
<
a
href=
"#"
>兴兴社区
a
> |
<
a
href=
"#"
>兴兴公益
a
>
div
>
<
div
class=
"copyright"
>
Copyright
© 2017-2018
兴兴 My.com
版权所有
div
>
div
>
<
script
src=
"js/regist.js"
>
script
>
body
>
html
>
2.JS处理逻辑:
unction change(obj) //验证码的刷新,把参数传给checkcodeservlet进行逻辑处理
{
obj.src =
"/Mystore/CheckCodeServlet?time=" +
new
Date().getTime();
}
function checkData() {
//1.获取用户名,
密码
确认密码
var username =
document.getElementById(
"username");
var pwd =
document.getElementById(
"pwd");
var pwd2 =
document.getElementById(
"pwd2");
//2.判断输入的内容不能为空
if(username.value==
""){
alert(
"请输入用户名");
return;
}
if(pwd.value==
""){
alert(
"请输入密码");
return;
}
if(pwd2.value==
""){
alert(
"请再次输入密码");
return;
}
//3。两次密码是否一样
if(pwd.value == pwd2.value){
//发送请求
form
获取form表单
在regist.html中
var form =
document.getElementById(
"reg_form");
form.submit();
//通过js提交表单
执行action
}
else{
alert(
"两次输入的密码不一样");
}
}
3.servlet 端(后端)的逻辑处理:
checkcodeservlet : 处理验证码的更新逻辑
package com.lhp.servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.FileReader;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CheckCodeServlet") // 注解checkcodeservlet
public class CheckCodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
// 集合中保存所有成语
private List words = new ArrayList();
@Override
public void init() throws ServletException {
// 初始化阶段,读取new_words.txt
// web工程中读取 文件,必须使用绝对磁盘路径
String path = getServletContext().getRealPath("/WEB-INF/words.txt");
try {
BufferedReader reader = new BufferedReader(new FileReader(path));
String line;
//把读的成语全部添加到一个集合当中
while ((line = reader.readLine()) != null) {
words.add(line);
}
reader.close();
} catch (IOException e) {
e.printStackTrace();
}
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setHeader("Cache-Control", "no-cache");
//设置过期时间为立即过期
response.setDateHeader("Expires", 0);
int width = 120;
int height = 30;
// 步骤一 绘制一张内存中图片
BufferedImage bufferedImage = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
// 步骤二 图片绘制背景颜色 ---通过绘图对象
Graphics graphics = bufferedImage.getGraphics();// 得到画图对象 --- 画笔
// 绘制任何图形之前 都必须指定一个颜色
graphics.setColor(getRandColor(200, 250));
graphics.fillRect(0, 0, width, height);
// 步骤三 绘制边框
graphics.setColor(Color.WHITE);
graphics.drawRect(0, 0, width - 1, height - 1);
// 步骤四 四个随机数字
Graphics2D graphics2d = (Graphics2D) graphics;
// 设置输出字体
graphics2d.setFont(new Font("宋体", Font.BOLD, 18));
Random random = new Random();// 生成随机数
int index = random.nextInt(words.size());
String word = words.get(index);// 获得成语
System.out.println(word);
// 定义x坐标
int x = 10;
for (int i = 0; i < word.length(); i++) {
// 随机颜色
graphics2d.setColor(new Color(20 + random.nextInt(110), 20 + random
.nextInt(110), 20 + random.nextInt(110)));
// 旋转 -30 --- 30度
int jiaodu = random.nextInt(60) - 30;
// 换算弧度
double theta = jiaodu * Math.PI / 180;
// 获得字母数字
char c = word.charAt(i);
// 将c 输出到图片
graphics2d.rotate(theta, x, 20);
graphics2d.drawString(String.valueOf(c), x, 20);
graphics2d.rotate(-theta, x, 20);
x += 30;
}
// 将验证码内容保存session
//request.getSession().setAttribute("checkcode_session", word);
//把生成的验证码存放到全局域对象当中
this.getServletContext().setAttribute("checkCode", word);
// 步骤五 绘制干扰线
graphics.setColor(getRandColor(160, 200));
int x1;
int x2;
int y1;
int y2;
for (int i = 0; i < 30; i++) {
x1 = random.nextInt(width);
x2 = random.nextInt(12);
y1 = random.nextInt(height);
y2 = random.nextInt(12);
graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
}
// 将上面图片输出到浏览器 ImageIO
graphics.dispose();// 释放资源
//将图片写到response.getOutputStream()中
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
/**
* 取其某一范围的color
*
* @param fc
* int 范围参数1
* @param bc
* int 范围参数2
* @return Color
*/
private Color getRandColor(int fc, int bc) {
// 取其随机颜色
Random random = new Random();
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
}
4.RegistServlet 处理验证逻辑:
package com.lhp.servlet;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.SQLException;
import java.util.Map;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.beanutils.BeanUtils;
import org.apache.commons.dbutils.QueryRunner;
import com.lhp.domain.user;
import com.lhp.util.JdbcUtil;
/**
* Servlet implementation class RegistServlet
*/
@WebServlet("/RegistServlet")
public class RegistServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// System.out.println("RegistServlet");
// System.out.println("已收到客户端请求!");
/***
* 步骤:
* 1. 判断输入的验证码是否正确
* 2. 接收所有参数
* 3. 把收到的参数封装成user对象
* 4. 设置UID
* 5. 写入到数据库
*/
//1.判断输入的验证码是否正确:
//设置请求编码,与响应编码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//获取参数 验证码
String code = request.getParameter("code");
System.out.print("code="+code);
//判断服务器生成的验证码,需要做一个字符串类型的强制转换
String word = (String) this.getServletContext().getAttribute("checkCode");
//判断输入的验证
if(code.equals(word)) {
// 如果验证码正确,进行后面的操作 response.getWriter().write("验证码正确!");
//1.接收所有参数
Map parameterMap = request.getParameterMap();
user u = new user();
//2.把接收的参数封装成user对象
try {
BeanUtils.populate(u, parameterMap);
} catch (IllegalAccessException | InvocationTargetException e) {
e.printStackTrace();
}
System.out.println(u);
//3.生成uid
u.setUid(UUID.randomUUID().toString());
//4.写入数据库
QueryRunner qr= new QueryRunner(JdbcUtil.getDataSource());
String sql ="insert into user value(?,?,?,?)";
try {
qr.update(sql, u.getUid(),u.getUsername(),u.getPassword(),u.getPhone());
} catch (SQLException e) {
e.printStackTrace();
}
response.getWriter().write("注册成功!");
//5.跳转到登录页面
response.setHeader("refresh","3,url=/Mystore/login.html");
}else {
// 如果验证码不正确,告诉用户验证码不正确。跳转回注册页面
response.getWriter().write("验证码错误!");
response.setHeader("refresh","3,url=/Mystore/regist.html");
}
}
}
5.数据库的封装:
package com.lhp.util;
import java.io.FileInputStream;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
import javax.sql.DataSource;
import com.alibaba.druid.pool.DruidDataSourceFactory;
public class JdbcUtil {
public static DataSource ds = null;
static {
try {
//1.加载配置文件
Properties p = new Properties();
//获取字节码目录
String path = JdbcUtil.class.getClassLoader().getResource("db.properties").getPath();
FileInputStream in = new FileInputStream(path);
p.load(in);
//ds = BasicDataSourceFactory.createDataSource(p);
ds = DruidDataSourceFactory.createDataSource(p);
}catch(Exception e) {
e.printStackTrace();
}
}
//获取数据源
public static DataSource getDataSource() {
return ds;
}
public static Connection getConn() {
try {
// 2.连接数据
return ds.getConnection();
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
/**
* 关闭资源
*/
public static void close(Connection conn,Statement st,ResultSet rs) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (st != null) {
try {
st.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}