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);