EasyMall注册功能
1. 环境搭建
- 创建一个EasyMall的web应用
- 配置www.easymall.com网站,并配置为缺省的虚拟主机,将EasyMall配
置为缺省的web应用,在配置index.jsp为缺省的主页。
- 配置web应用:在myeclipse中创建一个web工程EasyMall。
缺省主页:
在web应用中的web.xml中配置如下内容:
- 配置虚拟主机:
- 在[tomcat]/conf/server.xml中配置一个<Host>标签:配置内容如下:
<Host name="www.easymall.com" appBase="D:/www.easymall.com"></Host>、
- 添加缺省虚拟主机,配置如下:
<Engine name="Catalina" defaultHost="www.easymall.com">
iii. 配置hosts文件:
C:WindowsSystem32driversetchosts
配置内容如下:
127.0.0.1 www.easymall.com
e. 将web应用部署到easymall网站的虚拟主机目录中:
i. 选择发布按钮:
发布web应用时,选择<Custom Location>选项,然后下方的路径变为可修改,修改其中内容为:
D:www.eaysmall.comROOT
这时就会将web应用部署到easymall网站管理的虚拟主机目录下,并且web应用名称改为了ROOT,会作为缺省web应用来使用。
- 页面部署
- easymall网站整体都是由三部分组成,所以导入课前资料中的三部分资料。
i. 将课前资料中head、index、foot目录中全部内容复制粘贴到webroot 目录下,如果出现覆盖,直接选择yes to all.
- 页面分成三部分的原因:
i. 其中头、尾两部分需要经常使用,如果在每一个页面当中都添加上头和为十分繁琐,所以可以通过单独将头和尾提取出,在各个页面分别引入的方式,来降低代码的冗余。
- 修改html页面为jsp页面将三个页面合成一个页面显示: i. 静态引入(静态包含)
- 创建一个index.jsp页面,删除其中除了第一行以外的全部内容
- 将index.html中的内容全部赋值粘贴到index.jsp的第一行之下。
- 将index.html页面删除。
- 剩下的foot、head页面操作与以上3步相同。
在index.jsp中body标签内添加如下内容:
<%@include file="_head.jsp"%>
在body结束标签之上添加如下内容:
<%@include file="_foot.jsp"%>
- regist页面操作
- 创建一个regist.jsp页面,删除其中除了第一行以外的全部内容
- 将regist.html中的内容全部赋值粘贴到regist.jsp的第一行之下。
- 将regist.html页面删除。
- 修改_head.jsp的注册超链接
在_head.jsp中找到注册的超链接按钮,修改其中的href属性值为如下内容:
<a href="<%=request.getContextPath() %>/regist.jsp">注册</a>
- 修改regist.jsp页面
a. 修改form标签中如下内容:
<form action="<%=request.getContextPath() %>/RegistServlet" method="POST">
- 创建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"); |
- 添加用户
- 创建一个easymall数据库,向其中添加数据。通过课前资料中的sql脚本文件添加。
- 创建一个工具类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; } } } } |
- 引入所需jar包:
- 引入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); } |
- 修改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> |
- 在regist.jsp页面中添加如下代码:、
- 添加jQuery函数库:在webRoot下新建一个js目录,其中添加jquery-1.4.2.js文件。在head标签中书写如下代码:
<script type="text/javascript" src="js/jquery-1.4.2.js">
</script>
- 添加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","验证码不能为空!"); }); }); |
-
添加验证码- 修改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> |
- 将工具类VarifyCode.java文件放入cn.tedu.utils包中
- 创建一个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("执行成功~!"); |
- 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. 环境搭建
- 创建一个EasyMall的web应用
- 配置www.easymall.com网站,并配置为缺省的虚拟主机,将EasyMall配
置为缺省的web应用,在配置index.jsp为缺省的主页。
- 配置web应用:在myeclipse中创建一个web工程EasyMall。
缺省主页:
在web应用中的web.xml中配置如下内容:
- 配置虚拟主机:
- 在[tomcat]/conf/server.xml中配置一个<Host>标签:配置内容如下:
<Host name="www.easymall.com" appBase="D:/www.easymall.com"></Host>、
- 添加缺省虚拟主机,配置如下:
<Engine name="Catalina" defaultHost="www.easymall.com">
iii. 配置hosts文件:
C:WindowsSystem32driversetchosts
配置内容如下:
127.0.0.1 www.easymall.com
e. 将web应用部署到easymall网站的虚拟主机目录中:
i. 选择发布按钮:
发布web应用时,选择<Custom Location>选项,然后下方的路径变为可修改,修改其中内容为:
D:www.eaysmall.comROOT
这时就会将web应用部署到easymall网站管理的虚拟主机目录下,并且web应用名称改为了ROOT,会作为缺省web应用来使用。
- 页面部署
- easymall网站整体都是由三部分组成,所以导入课前资料中的三部分资料。
i. 将课前资料中head、index、foot目录中全部内容复制粘贴到webroot 目录下,如果出现覆盖,直接选择yes to all.
- 页面分成三部分的原因:
i. 其中头、尾两部分需要经常使用,如果在每一个页面当中都添加上头和为十分繁琐,所以可以通过单独将头和尾提取出,在各个页面分别引入的方式,来降低代码的冗余。
- 修改html页面为jsp页面将三个页面合成一个页面显示: i. 静态引入(静态包含)
- 创建一个index.jsp页面,删除其中除了第一行以外的全部内容
- 将index.html中的内容全部赋值粘贴到index.jsp的第一行之下。
- 将index.html页面删除。
- 剩下的foot、head页面操作与以上3步相同。
在index.jsp中body标签内添加如下内容:
<%@include file="_head.jsp"%>
在body结束标签之上添加如下内容:
<%@include file="_foot.jsp"%>
- regist页面操作
- 创建一个regist.jsp页面,删除其中除了第一行以外的全部内容
- 将regist.html中的内容全部赋值粘贴到regist.jsp的第一行之下。
- 将regist.html页面删除。
- 修改_head.jsp的注册超链接
在_head.jsp中找到注册的超链接按钮,修改其中的href属性值为如下内容:
<a href="<%=request.getContextPath() %>/regist.jsp">注册</a>
- 修改regist.jsp页面
a. 修改form标签中如下内容:
<form action="<%=request.getContextPath() %>/RegistServlet" method="POST">
- 创建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"); |
- 添加用户
- 创建一个easymall数据库,向其中添加数据。通过课前资料中的sql脚本文件添加。
- 创建一个工具类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; } } } } |
- 引入所需jar包:
- 引入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); } |
- 修改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> |
- 在regist.jsp页面中添加如下代码:、
- 添加jQuery函数库:在webRoot下新建一个js目录,其中添加jquery-1.4.2.js文件。在head标签中书写如下代码:
<script type="text/javascript" src="js/jquery-1.4.2.js">
</script>
- 添加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","验证码不能为空!"); }); }); |
-
添加验证码- 修改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> |
- 将工具类VarifyCode.java文件放入cn.tedu.utils包中
- 创建一个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("执行成功~!"); |
- 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);