Web阶段（day09，EasyMall应用案例）

EasyMall网站
1.创建EasyMall的网站
1.1创建www.easymall.com虚拟主机
tomcat - conf - server.xml - 修改文件，添加host标签。

	
	修改hosts文件，在文件中添加127.0.0.1 www.easymall.com 

1.2在MyEclipse中创建一个Web应用，名称为EasyMall，EasyMall 发布采用自定义发布的方式，点击发布按钮，添加EasyMall应用，选中下拉框的选项，修改下方地址栏中的路径，
然后将Web应用发布在刚才D盘的自动生成的www.easymall.com文件夹中，将应用的名称改为ROOT（缺省Web应用的名称）。
3.Web应用中添加首页
首页由三部分组成：head、foot、index
分三份的原因：一个网站中的所有页面一般都是由这三部分组成，头部分和尾部分会重复出现，这时我们可以将他们书写在某一个页面中，通过引入的方式和并成一个页面。如果头部分或尾部分需要修改，则只需修改head或foot页面即可。

动态导入
 	动态包含 ，需要修改buffer属性。buffer= 0kb，让缓冲区为0，不然会导致头和尾部分在一块。
		<%request.getRequestDispatcher("/_head.jsp").include(request, response); %> 
静态导入（静态包含）合并首页
	在index.jsp中的body开始标签中，添加如下代码：
		<%@include file="/_head.jsp" %>
	在body结束标签之前添加如下代码：
		<%@include file="/_foot.jsp" %>

4. 注册功能
   引入jsp文件。
   a. 为_head.jsp页面中的注册a标签添加href地址
   注册 （jsp表达式用于获取动态路径）
   b. 修改regist.jsp页面
   修改form标签的action:

   c. 创建RegistServlet，并添加代码：
   i. 创建RegistServlet时注意，映射路径为/RegistServlet
   ii. 添加代码如下：

    package com.easymall.servlet;
    import java.io.IOException;
    import java.sql.Connection;
    import java.sql.PreparedStatement;
    import java.sql.SQLException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import com.easymall.utils.JDBCUtils;
    import com.easymall.utils.WebUtils;
    import com.mchange.v2.c3p0.ComboPooledDataSource;
    //注册servlet
    public class RegistServlet extends HttpServlet {
        public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            //1.请求参数乱码处理
            request.setCharacterEncoding("utf-8");
            //1.响应参数乱码处理
            response.setContentType("text/html;charset=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)){
                //变量中的内容不能为""  变量本身不能为null
                //请求转发
                request.setAttribute("msg", "用户名不能为空");
                request.getRequestDispatcher("/regist.jsp").forward(request, response);
                return;
            }
            if(WebUtils.isNull(password)){
                //变量中的内容不能为""  变量本身不能为null
                //请求转发
                request.setAttribute("msg", "密码不能为空");
                request.getRequestDispatcher("/regist.jsp").forward(request, response);
                return;
            }
            if(WebUtils.isNull(password2)){
                //变量中的内容不能为""  变量本身不能为null
                //请求转发
                request.setAttribute("msg", "确认密码不能为空");
                request.getRequestDispatcher("/regist.jsp").forward(request, response);
                return;
            }
            if(WebUtils.isNull(nickname)){
                //变量中的内容不能为""  变量本身不能为null
                //请求转发
                request.setAttribute("msg", "昵称不能为空");
                request.getRequestDispatcher("/regist.jsp").forward(request, response);
                return;
            }
            if(WebUtils.isNull(email)){
                //变量中的内容不能为""  变量本身不能为null
                //请求转发
                request.setAttribute("msg", "邮箱不能为空");
                request.getRequestDispatcher("/regist.jsp").forward(request, response);
                return;
            }
            if(WebUtils.isNull(valistr)){
                //变量中的内容不能为""  变量本身不能为null
                //请求转发
                request.setAttribute("msg", "验证码不能为空");
                request.getRequestDispatcher("/regist.jsp").forward(request, response);
                return;
            }
            // 非空验证的方法（非空校验工具）
    		public class WebUtils {
    			// 在一个工具类中调用一个方法的时候，希望只通过类名.的方式调用，所以方发为静态的
    			private WebUtils(){}
    			public static boolean isNull(String tag){
    				return tag == null||"".equals(tag); // 常亮放在前面
    			}
    		}
   
            //4.密码一致性校验
            if(password!=null && password2!=null &&!password.equals(password2)){
    	        //两次密码不一致则设置一个域属性msg，发送到前台regist.jsp页面。
    	        request.setAttribute("msg", "两次密码不一致");
    	        request.getRequestDispatcher("/regist.jsp").forward(request, response);
    	        return;
            }
            //5.邮箱格式校验
                   //书写邮箱正则
            tring reg = "\\w+@\\w+(\\.\\w+)+";
            f(email!= null && !email.matches(reg)){ 
                   //String字符串使用已有参数调用.matches方法与正则字符串校验
                   //邮箱格式不正确，则将错误信息保存在域属性msg中，发送到前台regist.jsp页面
                   request.setAttribute("msg", "邮箱格式不正确");
                   request.getRequestDispatcher("/regist.jsp").forward(request, response);
                   return;
            
            //6.验证码校验
            /TODO:session
            //7.数据入库
        //8.跳转到首页
        response.getWriter().write(
                "
   恭喜注册成功，3秒之后跳转到首页
   ");
        response.setHeader("refresh", "3;url=http://www.easymall.com");
        }
        public void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
                doGet(request, response);
        }
   

}
d. 修改regist.jsp页面—修改错误提示信息样式 和用户信息回显

	i. 在table中新添加一个tr，书写内容如下：
		
		        
		                <%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %>
		        
	ii. 在username、nickname、email的input框身上添加value属性：
		
		        " />
	value属性是为了实现数据回显操作所设置的属性。属性值应该先判断是否为null，为null则显示""  不为null就显示其中包含的数据。
e. 修改RegistServlet.java---插入数据到数据库中
i. 创建easymall数据库，在其中添加表user：
	create database easymall;
	use easymall;
	create table user(
	        id int primary key auto_increment,
	        username varchar(100),
	        password varchar(100),
	        nickname varchar(100),
	        email varchar(100)
	);
	insert into user values(null, 'admin', '123', '炒鸡管理员', '[email protected]');
	insert into user values(null, '张飞', '123', '管理员', '[email protected]');
ii. 添加JDBC相关内容：
	1) 导入mysql驱动jar包
	2) 手写JDBC6步
iii. 添加数据源
	1) 导入c3p0的jar包
	2) 在src目录下存放一个c3p0.properties文件
iv. 在RegistServlet中添加如下代码：
	Connection conn = null;
	PreparedStatement ps = null;
	ResultSet rs = null;
	//ComboPooledDataSource source = new ComboPooledDataSource();
	//获取数据源
	ComboPooledDataSource source = JDBCUtils.getPool();
	//判断数据库中是否已有对应用户名
	try {
	    conn = source.getConnection();
	    ps = conn.prepareStatement("select * from user where username = ?");
	    ps.setString(1, username);
	    rs = ps.executeQuery();
	    if(rs.next()){
		    //如果为true则证明用户名已存在
		    //向前台页面返回错误 提示
		    request.setAttribute("msg", "用户名已存在");
		    request.getRequestDispatcher("/regist.jsp").forward(request, response);
		    return;
	    }else{
	        //如果为false则证明用户名不存在
	        //可以注册
	        conn = source.getConnection();
	        ps = conn.prepareStatement("insert into user values(null,?,?,?,?)");
	        ps.setString(1, username);
	        ps.setString(2, password);
	        ps.setString(3, nickname);
	        ps.setString(4, email);
	        ps.executeUpdate();
	    }
    } catch (SQLException e1) {
            e1.printStackTrace();
    }finally{
            JDBCUtils.close(conn, ps, rs);
    }
v. 编写JDBCUtils工具类：
	package com.easymall.utils;
	import java.sql.Connection;
	import java.sql.ResultSet;
	import java.sql.SQLException;
	import java.sql.Statement;
	import com.mchange.v2.c3p0.ComboPooledDataSource;
	//JDBC工具类
	public class JDBCUtils {
	    //构造函数私有化
	    private JDBCUtils(){}
	    //c3p0数据源，每次产生一个对象，就会初始化一批连接，而我们只是用其中的一个，其他都造成了浪费。
	    //所以c3p0对象的应该只创建一次。
	    //创建静态数据源
	    public static ComboPooledDataSource pool = new ComboPooledDataSource();
	    
	    //返回数据源对象
	    public static ComboPooledDataSource getPool(){
	        return pool;
	    }
	    //关闭资源
	    public static void close(Connection conn,Statement stat,ResultSet rs){
	        if(rs != null){
	            try {
	                    rs.close();
	            } catch (SQLException e) {
	                    e.printStackTrace();
	            }finally{
	                    rs = null;
	            }
	        }
	        if(stat != null){
	            try {
	                    stat.close();
	            } catch (SQLException e) {
	                    e.printStackTrace();
	            }finally{
	                    stat = null;
	            }
	        }
	        if(conn != null){
	            try {
	                    conn.close();
	            } catch (SQLException e) {
	                    e.printStackTrace();
	            }finally{
	                    conn = null;
	            }
	        }
	    }
	}

5. 前台校验（为了减少无效请求，后台校验是真正的校验）
   点击regist.jsp页面中的注册按钮会向后台发送请求，如果频繁点击会对服务器造成无端的压力甚至导致服务器宕机，应该在前台页面就将无效的请求拦截下来，避免服务器压力过大。

6. 添加验证码图片（更新，点击的是时候刷新）

   a. 添加工具类 verifyCode.java
   b. 修改regist.jsp页面中的img标签：
   
   c. 创建ValidateServlet.java文件
   package com.easymall.servlet;
   import java.io.IOException;
   import javax.servlet.ServletException;
   import javax.servlet.http.HttpServlet;
   import javax.servlet.http.HttpServletRequest;
   import javax.servlet.http.HttpServletResponse;
   import com.easymall.utils.VerifyCode;
   //生成验证码的servlet
   public class ValidateServlet extends HttpServlet {
   public void doGet(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
   //验证码不能使用缓存图片，所以控制浏览器使用缓存
   response.setDateHeader(“Expires”, -1);
   response.setHeader(“Pragma”, “no-Cache”);
   response.setHeader(“Cache-control”, “no-cache”);
   //调用验证码工具类，生成一张验证码图片，发送到响应缓冲区中，最后会发送到浏览器中。
   VerifyCode vc = new VerifyCode();
   vc.drawImage(response.getOutputStream());
   String code = vc.getCode();
   System.out.println(“code:”+code);
   System.out.println(“图片生成成功。”);
   }

    		public void doPost(HttpServletRequest request, HttpServletResponse response)
    		        throws ServletException, IOException {
    		        doGet(request, response);
    		}
    	}
    d. 单击图片时切换验证码：
    	i. 在script标签中添加如下代码：
    		//文档就绪事件，在页面加载完成之后执行其中的代码
    		$(function(){
    		    //为图片绑定单击事件
    		    $("#img").click(function(){
    		            //为图片绑定新的src属性值
    		            $(this).attr("src","<%=request.getContextPath()%>/VlidateServlet?time="+new Date().getTime());
    		    });
    		});