EasyMall注册功能

EasyMall注册功能

1. 环境搭建

1. 创建一个EasyMall的web应用
2. 配置www.easymall.com网站，并配置为缺省的虚拟主机，将EasyMall配

置为缺省的web应用，在配置index.jsp为缺省的主页。

1. 配置web应用：在myeclipse中创建一个web工程EasyMall。

缺省主页：

在web应用中的web.xml中配置如下内容：

1. 配置虚拟主机：
   1. 在[tomcat]/conf/server.xml中配置一个<Host>标签：配置内容如下：

<Host name="www.easymall.com"  appBase="D:/www.easymall.com"></Host>、

1. 添加缺省虚拟主机，配置如下：

<Engine name="Catalina" defaultHost="www.easymall.com">

iii. 配置hosts文件：

C:\Windows\System32\drivers\etc\hosts

配置内容如下：

127.0.0.1  www.easymall.com

e. 将web应用部署到easymall网站的虚拟主机目录中：

i. 选择发布按钮：

发布web应用时，选择<Custom Location>选项，然后下方的路径变为可修改，修改其中内容为：

D:\www.eaysmall.com\ROOT

这时就会将web应用部署到easymall网站管理的虚拟主机目录下，并且web应用名称改为了ROOT，会作为缺省web应用来使用。

1. 页面部署
   1. easymall网站整体都是由三部分组成，所以导入课前资料中的三部分资料。

i. 将课前资料中head、index、foot目录中全部内容复制粘贴到webroot 目录下，如果出现覆盖，直接选择yes to all.

1. 页面分成三部分的原因：

i. 其中头、尾两部分需要经常使用，如果在每一个页面当中都添加上头和为十分繁琐，所以可以通过单独将头和尾提取出，在各个页面分别引入的方式，来降低代码的冗余。

1. 修改html页面为jsp页面将三个页面合成一个页面显示： i. 静态引入(静态包含)
   1. 创建一个index.jsp页面，删除其中除了第一行以外的全部内容
   2. 将index.html中的内容全部赋值粘贴到index.jsp的第一行之下。
   3. 将index.html页面删除。
   4. 剩下的foot、head页面操作与以上3步相同。

在index.jsp中body标签内添加如下内容：

<%@include file="_head.jsp"%>

在body结束标签之上添加如下内容：

<%@include file="_foot.jsp"%>

1. regist页面操作
   1. 创建一个regist.jsp页面，删除其中除了第一行以外的全部内容
   2. 将regist.html中的内容全部赋值粘贴到regist.jsp的第一行之下。
   3. 将regist.html页面删除。
   4. 修改_head.jsp的注册超链接

在_head.jsp中找到注册的超链接按钮，修改其中的href属性值为如下内容：

<a href="<%=request.getContextPath() %>/regist.jsp">注册</a>

1. 修改regist.jsp页面

a. 修改form标签中如下内容：

<form action="<%=request.getContextPath() %>/RegistServlet" method="POST">

1. 创建RegistServlet.java文件

其中书写如下内容：

//1.乱码处理

//响应数据乱码处理

response.setContentType("text/html;charset=utf-8");

//请求乱码处理

request.setCharacterEncoding("utf-8");

//2.获取数据

String username = request.getParameter("username");

String password = request.getParameter("password");

String password2 = request.getParameter("password2");

String nickname = request.getParameter("nickname");

String email = request.getParameter("email");

String valistr = request.getParameter("valistr");

//3.校验

//非空校验

if(WebUtils.isNull(username)){ request.setAttribute("msg", "用户名不能为空");

request.getRequestDispatcher("/regist.jsp").forward(request, response); return;

}

if(WebUtils.isNull(password)){ request.setAttribute("msg", "密码不能为空"); request.getRequestDispatcher("/regist.jsp").forward(request, response); return;

}

（校验全部用户信息）

//密码一致性

//邮箱格式校验

//验证码校验

//4.注册

//用户名是否存在校验

//如果用户名存在应该拒绝用户注册，提示用户名已存在

//如果用户名不存在完成注册

//5.注册完成，页面跳转 -- 跳转到首页

response.getWriter().write("<h1 align='center'><font color='red'>恭喜注册成功，3秒之后跳转回首页</font></h1>");

response.setHeader("refresh", "3;url=http://www.easymall.com");

1. 添加用户
   1. 创建一个easymall数据库，向其中添加数据。通过课前资料中的sql脚本文件添加。
   2. 创建一个工具类JDBCUtils--获取连接和归还连接

/*

*       利用c3p0连接池创建连接

*       */public class JDBCUtils { private JDBCUtils(){

}

private static ComboPooledDataSource source = new ComboPooledDataSource();; /**

*       获取一个数据源对象

*/ public static ComboPooledDataSource getPool(){ return source;

}

/**

*       使用数据源获取一个连接

*       @return 连接对象

*       @throws SQLException

*/ public static Connection getConnection() throws SQLException{ return source.getConnection();

}

/**

*       关闭资源，归还连接

*       @param conn 用户传入的连接对象

*       @param stat 用户传入的传输器对象

*       @param rs 用户传入的结果集对象

*/ public static void close(Connection conn,Statement stat,ResultSet rs){

if(rs != null){ try { rs.close();

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{ rs = null;

}

}

if(stat != null){ try { stat.close();

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{ stat = null;

}

}

if(conn != null){ try { conn.close();

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{ conn = null;

}

}

}

}

1. 引入所需jar包：

1. 引入c3p0的配置文件，并修改其中的数据库名称

i. 内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<c3p0-config>

<default-config>

<property name="driverClass">com.mysql.jdbc.Driver</property>

<property name="jdbcUrl">jdbc:mysql://localhost:3306/easymall</property>

<property name="user">root</property>

<property name="password">root</property>   </default-config>

e. 检验用户名是否(</c3p0-config>)存在：

Connection conn = null;

PreparedStatement stat = null;

ResultSet rs = null;

//实现一个工具类创建连接 try { conn = JDBCUtils.getConnection();

stat = conn.prepareStatement("select * from user where username = ?"); stat.setString(1, username);

rs = stat.executeQuery();

//如果rs中有数据则证明用户名存在提示用户重新注册 if(rs.next()){

request.setAttribute("msg", "用户名已存在"); request.getRequestDispatcher("/regist.jsp").forward(request, response); return;

}else{

//如果用户名不存在则完成注册

//插入用户传入的数据

stat = conn.prepareStatement("insert into user values(null,?,?,?,?)"); stat.setString(1, username); stat.setString(2, password);

stat.setString(3, nickname); stat.setString(4, email);

stat.executeUpdate();

}

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{

JDBCUtils.close(conn, stat, rs); }

1. 修改regist.jsp页面

在table的第一行添加如下内容：

<tr >

<td class="tds" colspan="2" style="text-align:center" >

<font color='red'>

<%=request.getAttribute("msg")== null?"":request.getAttribute("msg") %> </font>

</td> </tr>

1. 在regist.jsp页面中添加如下代码：、
   1. 添加jQuery函数库：在webRoot下新建一个js目录，其中添加jquery-1.4.2.js文件。在head标签中书写如下代码：

<script type="text/javascript" src="js/jquery-1.4.2.js">

</script>

1. 添加js代码：

var formObj = { checkForm : function(){ var canSub = true;

//非空校验

canSub = this.checkNull("username","用户名不能为空！") && canSub; canSub = this.checkNull("password","密码不能为空！") && canSub; canSub = this.checkNull("password2","确认密码不能为空！") && canSub; canSub = this.checkNull("nickname","昵称不能为空！") && canSub; canSub = this.checkNull("email","邮箱不能为空！") && canSub; canSub = this.checkNull("valistr","验证码不能为空！") && canSub;

//密码一致性校验

canSub = this.checkPassword() && canSub;

//邮箱格式校验

canSub = this.checkEmail() && canSub; return canSub;

},

checkEmail : function(){ var reg = /\w+@\w+(\.\w+)+/;

var email = $("input[name='email']").val(); if(!reg.test(email)){

this.setMsg("email", "邮箱格式不正确");

//如果邮箱格式不正确则返回false值，阻止用户提交。 return false;

}

//如果邮箱格式正确则返回true值，阻止用户提交。

return true;

},

checkPassword : function(){ var password = $("input[name='password']").val(); var password2 = $("input[name='password2']").val(); if(password != password2){

this.setMsg("password2", "两次密码不一致！");

//如果用户密码不一致则返回false值，阻止用户提交。 return false;

}

//如果用户两次密码一致，则允许用户提交。 return true;

},

checkNull : function(name,msg){ var tag = $("input[name='"+name+"']").val();

//清空消息，只需要将msg书写双引号就可以了 this.setMsg(name, "");

if(tag == ""){ this.setMsg(name,msg);

//如果用户信息为空则返回false值，阻止用户提交。 return false;

}

//如果用户信息不为空则返回true值，阻止用户提交。 return true;

},

//消息提示方式，将用户所需提示信息提取成一个方法，方便使用。 setMsg : function(name,msg){

$("input[name='"+name+"']").nextAll("span").text(msg).css("color","red");

}

}

//文档就绪事件

$(function(){

//为页面中的input框绑定离焦事件

$("input[name='username']").blur(function(){

formObj.checkNull("username","用户名不能为空！");

});

$("input[name='password']").blur(function(){

formObj.checkNull("password","密码不能为空！");

});

$("input[name='password2']").blur(function(){

formObj.checkNull("password2","确认密码不能为空！"); formObj.checkPassword();

});

$("input[name='nickname']").blur(function(){

formObj.checkNull("nickname","昵称不能为空！");

});

$("input[name='email']").blur(function(){

formObj.checkNull("email","邮箱不能为空！"); formObj.checkEmail();

});

$("input[name='valistr']").blur(function(){

formObj.checkNull("valistr","验证码不能为空！");

});

});

1. 添加验证码

   1. 修改regist.jsp页面

<tr>

<td
class="tds">验证码：</td>

<td>

<input
type="text" name="valistr"/>

<img
id="img" src="<%=request.getContextPath()
%>/ValidateServlet" width="" height=""
alt="" />

<span></span>

</td> </tr>

1. 将工具类VarifyCode.java文件放入cn.tedu.utils包中
2. 创建一个ValidateServlet，在其中添加代码如下：

//控制浏览器不能使用缓存，如果使用缓存则图片不会重新加载， //可能会造成图片和真正验证码信息不一致。

response.setHeader("Cache-control",
"no-cache"); response.setDateHeader("Expires", -1);

//创建一个验证码图片

VerifyCode vc =
new VerifyCode();

vc.drawImage(response.getOutputStream());

//获取自动生成的纯文本验证码

String code = vc.getCode();

//                    System.out.println("执行成功~!");

1. regist.jsp页面中添加js代码：以下代码添加在文档就绪事件中。

//为图片添加单击事件

$("#img").click(function(){ var
date = new Date();

var time = date.toLocaleString();

//加载验证码servlet

//在加载过程中，由于src中的值没有变化，所以会导致图片不更新，
//需要通过在其后添加一个时间值的方式让链接发生变化， //这样访问的时候都会作为一个新的链接发生访问。

//如果不添加这个时间值，则每次都会被认为是一个没有变化的请求路径。

$(this).attr("src","<%=request.getContextPath()%>/ValidateServlet?time="+time);

});

EasyMall注册功能

2019年4月10日 8:58

1. 环境搭建

1. 创建一个EasyMall的web应用
2. 配置www.easymall.com网站，并配置为缺省的虚拟主机，将EasyMall配

置为缺省的web应用，在配置index.jsp为缺省的主页。

1. 配置web应用：在myeclipse中创建一个web工程EasyMall。

缺省主页：

在web应用中的web.xml中配置如下内容：

1. 配置虚拟主机：
   1. 在[tomcat]/conf/server.xml中配置一个<Host>标签：配置内容如下：

<Host name="www.easymall.com"  appBase="D:/www.easymall.com"></Host>、

1. 添加缺省虚拟主机，配置如下：

<Engine name="Catalina" defaultHost="www.easymall.com">

iii. 配置hosts文件：

C:\Windows\System32\drivers\etc\hosts

配置内容如下：

127.0.0.1  www.easymall.com

e. 将web应用部署到easymall网站的虚拟主机目录中：

i. 选择发布按钮：

发布web应用时，选择<Custom Location>选项，然后下方的路径变为可修改，修改其中内容为：

D:\www.eaysmall.com\ROOT

这时就会将web应用部署到easymall网站管理的虚拟主机目录下，并且web应用名称改为了ROOT，会作为缺省web应用来使用。

1. 页面部署
   1. easymall网站整体都是由三部分组成，所以导入课前资料中的三部分资料。

i. 将课前资料中head、index、foot目录中全部内容复制粘贴到webroot 目录下，如果出现覆盖，直接选择yes to all.

1. 页面分成三部分的原因：

i. 其中头、尾两部分需要经常使用，如果在每一个页面当中都添加上头和为十分繁琐，所以可以通过单独将头和尾提取出，在各个页面分别引入的方式，来降低代码的冗余。

1. 修改html页面为jsp页面将三个页面合成一个页面显示： i. 静态引入(静态包含)
   1. 创建一个index.jsp页面，删除其中除了第一行以外的全部内容
   2. 将index.html中的内容全部赋值粘贴到index.jsp的第一行之下。
   3. 将index.html页面删除。
   4. 剩下的foot、head页面操作与以上3步相同。

在index.jsp中body标签内添加如下内容：

<%@include file="_head.jsp"%>

在body结束标签之上添加如下内容：

<%@include file="_foot.jsp"%>

1. regist页面操作
   1. 创建一个regist.jsp页面，删除其中除了第一行以外的全部内容
   2. 将regist.html中的内容全部赋值粘贴到regist.jsp的第一行之下。
   3. 将regist.html页面删除。
   4. 修改_head.jsp的注册超链接

在_head.jsp中找到注册的超链接按钮，修改其中的href属性值为如下内容：

<a href="<%=request.getContextPath() %>/regist.jsp">注册</a>

1. 修改regist.jsp页面

a. 修改form标签中如下内容：

<form action="<%=request.getContextPath() %>/RegistServlet" method="POST">

1. 创建RegistServlet.java文件

其中书写如下内容：

//1.乱码处理

//响应数据乱码处理

response.setContentType("text/html;charset=utf-8");

//请求乱码处理

request.setCharacterEncoding("utf-8");

//2.获取数据

String username = request.getParameter("username");

String password = request.getParameter("password");

String password2 = request.getParameter("password2");

String nickname = request.getParameter("nickname");

String email = request.getParameter("email");

String valistr = request.getParameter("valistr");

//3.校验

//非空校验

if(WebUtils.isNull(username)){ request.setAttribute("msg", "用户名不能为空");

request.getRequestDispatcher("/regist.jsp").forward(request, response); return;

}

if(WebUtils.isNull(password)){ request.setAttribute("msg", "密码不能为空"); request.getRequestDispatcher("/regist.jsp").forward(request, response); return;

}

（校验全部用户信息）

//密码一致性

//邮箱格式校验

//验证码校验

//4.注册

//用户名是否存在校验

//如果用户名存在应该拒绝用户注册，提示用户名已存在

//如果用户名不存在完成注册

//5.注册完成，页面跳转 -- 跳转到首页

response.getWriter().write("<h1 align='center'><font color='red'>恭喜注册成功，3秒之后跳转回首页</font></h1>");

response.setHeader("refresh", "3;url=http://www.easymall.com");

1. 添加用户
   1. 创建一个easymall数据库，向其中添加数据。通过课前资料中的sql脚本文件添加。
   2. 创建一个工具类JDBCUtils--获取连接和归还连接

/*

*       利用c3p0连接池创建连接

*       */public class JDBCUtils { private JDBCUtils(){

}

private static ComboPooledDataSource source = new ComboPooledDataSource();; /**

*       获取一个数据源对象

*/ public static ComboPooledDataSource getPool(){ return source;

}

/**

*       使用数据源获取一个连接

*       @return 连接对象

*       @throws SQLException

*/ public static Connection getConnection() throws SQLException{ return source.getConnection();

}

/**

*       关闭资源，归还连接

*       @param conn 用户传入的连接对象

*       @param stat 用户传入的传输器对象

*       @param rs 用户传入的结果集对象

*/ public static void close(Connection conn,Statement stat,ResultSet rs){

if(rs != null){ try { rs.close();

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{ rs = null;

}

}

if(stat != null){ try { stat.close();

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{ stat = null;

}

}

if(conn != null){ try { conn.close();

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{ conn = null;

}

}

}

}

1. 引入所需jar包：

1. 引入c3p0的配置文件，并修改其中的数据库名称

i. 内容如下：

<?xml version="1.0" encoding="UTF-8"?>

<c3p0-config>

<default-config>

<property name="driverClass">com.mysql.jdbc.Driver</property>

<property name="jdbcUrl">jdbc:mysql://localhost:3306/easymall</property>

<property name="user">root</property>

<property name="password">root</property>   </default-config>

e. 检验用户名是否(</c3p0-config>)存在：

Connection conn = null;

PreparedStatement stat = null;

ResultSet rs = null;

//实现一个工具类创建连接 try { conn = JDBCUtils.getConnection();

stat = conn.prepareStatement("select * from user where username = ?"); stat.setString(1, username);

rs = stat.executeQuery();

//如果rs中有数据则证明用户名存在提示用户重新注册 if(rs.next()){

request.setAttribute("msg", "用户名已存在"); request.getRequestDispatcher("/regist.jsp").forward(request, response); return;

}else{

//如果用户名不存在则完成注册

//插入用户传入的数据

stat = conn.prepareStatement("insert into user values(null,?,?,?,?)"); stat.setString(1, username); stat.setString(2, password);

stat.setString(3, nickname); stat.setString(4, email);

stat.executeUpdate();

}

} catch (SQLException e) {

// TODO Auto-generated catch block e.printStackTrace();

}finally{

JDBCUtils.close(conn, stat, rs); }

1. 修改regist.jsp页面

在table的第一行添加如下内容：

<tr >

<td class="tds" colspan="2" style="text-align:center" >

<font color='red'>

<%=request.getAttribute("msg")== null?"":request.getAttribute("msg") %> </font>

</td> </tr>

1. 在regist.jsp页面中添加如下代码：、
   1. 添加jQuery函数库：在webRoot下新建一个js目录，其中添加jquery-1.4.2.js文件。在head标签中书写如下代码：

<script type="text/javascript" src="js/jquery-1.4.2.js">

</script>

1. 添加js代码：

var formObj = { checkForm : function(){ var canSub = true;

//非空校验

canSub = this.checkNull("username","用户名不能为空！") && canSub; canSub = this.checkNull("password","密码不能为空！") && canSub; canSub = this.checkNull("password2","确认密码不能为空！") && canSub; canSub = this.checkNull("nickname","昵称不能为空！") && canSub; canSub = this.checkNull("email","邮箱不能为空！") && canSub; canSub = this.checkNull("valistr","验证码不能为空！") && canSub;

//密码一致性校验

canSub = this.checkPassword() && canSub;

//邮箱格式校验

canSub = this.checkEmail() && canSub; return canSub;

},

checkEmail : function(){ var reg = /\w+@\w+(\.\w+)+/;

var email = $("input[name='email']").val(); if(!reg.test(email)){

this.setMsg("email", "邮箱格式不正确");

//如果邮箱格式不正确则返回false值，阻止用户提交。 return false;

}

//如果邮箱格式正确则返回true值，阻止用户提交。

return true;

},

checkPassword : function(){ var password = $("input[name='password']").val(); var password2 = $("input[name='password2']").val(); if(password != password2){

this.setMsg("password2", "两次密码不一致！");

//如果用户密码不一致则返回false值，阻止用户提交。 return false;

}

//如果用户两次密码一致，则允许用户提交。 return true;

},

checkNull : function(name,msg){ var tag = $("input[name='"+name+"']").val();

//清空消息，只需要将msg书写双引号就可以了 this.setMsg(name, "");

if(tag == ""){ this.setMsg(name,msg);

//如果用户信息为空则返回false值，阻止用户提交。 return false;

}

//如果用户信息不为空则返回true值，阻止用户提交。 return true;

},

//消息提示方式，将用户所需提示信息提取成一个方法，方便使用。 setMsg : function(name,msg){

$("input[name='"+name+"']").nextAll("span").text(msg).css("color","red");

}

}

//文档就绪事件

$(function(){

//为页面中的input框绑定离焦事件

$("input[name='username']").blur(function(){

formObj.checkNull("username","用户名不能为空！");

});

$("input[name='password']").blur(function(){

formObj.checkNull("password","密码不能为空！");

});

$("input[name='password2']").blur(function(){

formObj.checkNull("password2","确认密码不能为空！"); formObj.checkPassword();

});

$("input[name='nickname']").blur(function(){

formObj.checkNull("nickname","昵称不能为空！");

});

$("input[name='email']").blur(function(){

formObj.checkNull("email","邮箱不能为空！"); formObj.checkEmail();

});

$("input[name='valistr']").blur(function(){

formObj.checkNull("valistr","验证码不能为空！");

});

});

1. 添加验证码

   1. 修改regist.jsp页面

<tr>

<td
class="tds">验证码：</td>

<td>

<input
type="text" name="valistr"/>

<img
id="img" src="<%=request.getContextPath()
%>/ValidateServlet" width="" height=""
alt="" />

<span></span>

</td> </tr>

1. 将工具类VarifyCode.java文件放入cn.tedu.utils包中
2. 创建一个ValidateServlet，在其中添加代码如下：

//控制浏览器不能使用缓存，如果使用缓存则图片不会重新加载， //可能会造成图片和真正验证码信息不一致。

response.setHeader("Cache-control",
"no-cache"); response.setDateHeader("Expires", -1);

//创建一个验证码图片

VerifyCode vc =
new VerifyCode();

vc.drawImage(response.getOutputStream());

//获取自动生成的纯文本验证码

String code = vc.getCode();

//                    System.out.println("执行成功~!");

1. regist.jsp页面中添加js代码：以下代码添加在文档就绪事件中。

//为图片添加单击事件

$("#img").click(function(){ var
date = new Date();

var time = date.toLocaleString();

//加载验证码servlet

//在加载过程中，由于src中的值没有变化，所以会导致图片不更新，
//需要通过在其后添加一个时间值的方式让链接发生变化， //这样访问的时候都会作为一个新的链接发生访问。

//如果不添加这个时间值，则每次都会被认为是一个没有变化的请求路径。

$(this).attr("src","<%=request.getContextPath()%>/ValidateServlet?time="+time);

});

处理浏览器缓存

response.setHeader("Cache-control", "no-cache");

response.setDateHeader("Expires", -1);