easymall注册功能

1 EasyMall商城项目

EasyMall(易买网)商城项目是以java语言为主，Jsp、HTML、css、JavaScript为辅开发的一个电子商城项目。该项目用最传统的技术（Servlet、JSP）实现了现代流行的电商项目中的主要的功能，比如浏览商品、将商品加入购物车、下订单及在线支付等功能。该项目还提供了后台管理功能来管理网站中的数据，比如用户管理、商品管理、订单管理、权限控制、销售榜单下载等功能。该项目采用了MVC软件分层的思想来组织整个软件的结构，还采用了Apache DBUtils来简化持久层的操作。最终实现了一个电商网站应该具有的功能。

1.1 项目涉及技术

该项目采用的技术包含HTTP协议、Tomcat服务器、静态Web资源开发技术(HTML、CSS、JS)、Java后台开发技术（Servlet、JSP）、JDBC、MySQL数据库技术、过滤器、监听器、软件编程思想实践、在线支付、权限控制等等。

1.2 EasyMall注册功能实现

1.2.1 项目环境搭建

Ø 创建EasyMall工程

Ø 配置www.easymall.com虚拟主机,在hosts文件配置虚拟主机和IP的映射关系 并配置为缺省的虚拟主机

Ø 将EasyMall应用配置到虚拟主机,并配置为缺省web应用

 

将WEB应用部署在www.easymall.com主机中：

方式一：在server.xml中<Host>标签的内部配置一个<Context>标签,每次配置后都需要重启服务器 (不推荐)

 

方式二：在[tomcat]/conf/Catalina/[host]目录下添加一个文件xxx.xml进行配置,不需要重启服务器，选第二中配置方式,不需要重复的将应用拷来拷去,只需在配置文件中配置指向应用的路径即可。在[tomcat]/conf/[引擎]/[host]目录下,创建一个ROOT.xml,在文件添加<Context docBase="D:\softspace\Workspaces\MyEclipse10\EasyMall\WebRoot"/>来配置web应用

 

方式三：直接将应用放在虚拟主机管理的目录下, 不需要重启服务器。为www.easymall.com主机配置默认管理目录：<Host name=”www.easymall.com” appBase=”D:\software\tomcat7.0\easymall”></Host>，直接将web应用放在easymall目录下即可

选择方式二或方式三进行部署。

 

1.2.2 导入静态页面

在EasyMall项目中，用jsp来代替html来展示数据, jsp目前就简单的理解为能够写java代码html。

(1)导入主页面-index.jsp

index首页包含三部分(头部/身体/尾部),利用包含技术进行整合

在index首页中body开始标签下面引入头部:

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

在index首页中body结束标签上面引入尾部:

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

 

(2)导入注册页面

regist.jsp

(3)导入登陆页面

regist.jsp

(4)修改首页、注册、登陆页面中url地址，通过jsp表达式引入web应用的虚拟路径。

 

1.2.3 实现注册功能_01

(1) 修改regist.jsp中注册表单的提交地址，将表单提交至RegistServlet。

<form action=”<%= request.getContextPath() %>/servlet/RegistServlet”></form>

(2)创建RegistServlet，在RegistServlet中处理注册请求，代码实现如下：

//1.解决乱码问题

request.setCharacterEncoding("utf-8");

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

 

//2.获取请求参数

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

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

...

 

//3.校验数据

if(WebUtils.isNull(username)){//校验失败

//设置提示消息

request.setAttribute("msg", "用户名不能为空");

//转发回注册页面进行提示

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

return;

}

//4.注册失败消息提示

在注册表单所在的table中添加一行,利用java代码取出request域中保存的提示消息,进行提示!

<tr>

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

<%=request.getAttribute("msg") == null ? ""

: request.getAttribute("msg")%>

</td>

</tr>

 

//5.注册失败时,输入框数据回显

<input type="text" name="username" value="<%=request.getParameter("username") == null ? "" : request.getParameter("username")%>" />

...

 

//6.用户名是否已存在校验

String sql = "select * from user where username=?";

ps = conn.prepareStatement(sql);

ps.setString(1, username);

rs = ps.executeQuery();

if(rs.next()){//用户名存在

request.setAttribute("msg", "用户名已存在");

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

return;

}

 

//7.将数据保存在数据库中

sql = "insert into user values(null, ?, ?, ?, ?)";

ps = conn.prepareStatement(sql);

ps.setString(1, username);

ps.setString(2, password);

ps.setString(3, nickname);

ps.setString(4, email);

ps.executeUpdate();

 

//8.注册成功给出提示信息, 3秒之后跳转到首页

response.getWriter().write("<h1 style='text-align:center; color:red;'>恭喜您,注册成功! 3秒之后跳转到首页...</h1>");

response.setHeader("refresh", "3;url="+request.getContextPath()+"/index.jsp");

1.2.4 实现注册功能_02

(1) jQuery校验注册表单

参考regist.jsp页面

(2) 2.5.利用java程序开发验证码图片-- 不需要练习,重点掌握禁止验证码缓存

//1.将VerifyCode工具类直接拷贝到cn.tedu.utils包下

//2.创建ValiImageServlet,代码实现如下:

//>> --- 控制浏览器不要缓存验证码图片 ---

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

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

VerifyCode vc = new VerifyCode();

vc.drawImage(response.getOutputStream());

//获取图片验证码

String valistr = vc.getCode();

//TODO--将验证码保存在session中

(3) 禁止缓存验证码图片

编辑ValiImageServlet, 在最前面添加控制浏览器不缓存图片的代码:

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

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

(4) 点击图片换一张

//1.编辑image标签,添加点击事件

<img onclick="changeImage(this)" src="<%= request.getContextPath() %>/ValiImageServlet" alt="" />

 

//2.js代码实现换一张图片

<script>

function changeImage(thisObj){

thisObj.src = "<%= request.getContextPath() %>/ValiImageServlet?time="+new Date().getTime();

}

</script>