第九周总结

第九周总结

1._Servlet

1.1_Servlet的结构体系

Servlet的结构体系
		
	GenericServlet implements Servlet
		
	HttpServlet extends GenericServlet
		复写:Service方法
			通过不同提交方式 request.getMethod()====String method
				执行不同doXXX()
		
	自定义一个类BaseSevlet 继承自HttpServlet		
		
		业务中:我们通过自己方法完成自己的业务
		覆盖HttpServlet中的service方法
		//通过反射的获取获取当前类的字节码对象
		//创建该类实例
				
		http://localhost:8080/xxx/xxxServlet?methodName=xx
		String method = request.getParameter("methodName") ;
		//获取Method----字节码文件对象.getMethod(method,HttpServletRequest.class,HttpServletResponse.class)
		调用invoke(当前类的实例,传递当前的实际参数)
				
				
		class UserServlet extends BaseServlet{
				
			public void register注册(){
				
			}----
		}
				
				
				
			doGet()
			doPost()

1.2_会话管理

程序中的会话:
	浏览器和服务器交互---产生的一些数据(内容)
会话技术:

cookie:存储在浏览器端
	小甜点,小饼干---JavaEE:会话管理的一种技术

	应用场景:
		可以记录用户访问过商品id
		记录用户上一次访问过得系统时间
		
	使用步骤:
		1)在服务器端
			创建Cookie对象
			public Cookie(String name, String value)
			Cookie c = new Cookie(String name, String value)
			
		2)Cookie信息保存在浏览器端:服务器将cookie响应给浏览器端
			public void addCookie(String name,String value)
		
		3)下一次:浏览器向服务器发送请求:
			就会将上一次携带的cookie数据,来访问服务器
				后台获取数据所有的cookie数据
			HttpServletRequest
		public Cookie[] getCookies():获取当前浏览器请求的所有cookie信息(cookie数组)
		
		
Session:存储在服务器端
	应用场景:
		前台:用户登录,需要将所有用户存储到session中
		验证码:使用画布技术---画出线条---产生一些数据  将产生的4个字符---存储到Session中
		
		
	
	

1.1.1_Cookie

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 * Cookie: 
 *   小甜点,小饼干  ----- JavaEE:会话管理的一种技术
 *   
 * 生活中的会话:
 * 		张三跟李四打招呼,李四回复张三...
 * 
 * 程序中的会话:
 * 		浏览器和服务器交互-----产生的一些数据(内容)
 * 
 * 会话技术:
 * 		Cookie
 * 				存储在浏览器端
 * 
 * 使用步骤:
 * 		1)在服务器端:
 * 			创建Cookie对象
 * 			public Cookie(String name, String value)
 * 			Cookie c = new Cookie(String name,String value)
 * 
 * 		2)Cookie信息保存在浏览器端:服务器将cookie响应给浏览器端
 * 		public void addCookie(Cookie cookie):将cookie添加响应中
 * 
 * 	
 * 		3)下一次:浏览器向服务器发送请求:
 *    就会将上一次携带的cookie数据,来访问服务器
 *    		后台获取数据所有的cookie数据
 *    HttpServletRequest
 *    	public Cookie[] getCookies():获取当前浏览器请求的所有的cookie信息(cookie数组)
 * 
 * 		Session技术
 * 
 *
 */


@WebServlet("/CookieDemo1")
public class CookieDemo1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		//第一次浏览器访问服务器端:没有cookie数据
		//服务器端:创建Cookie对象
		//public Cookie(String name, String value)
		Cookie cookie = new Cookie("msg","hello_Cookie") ;
		
		//2)需要将cookie对象添加到响应中
		//public void addCookie(Cookie cookie):将cookie添加响应中
		response.addCookie(cookie); //浏览器会将服务器响应的cookie对象保存起来
		System.out.println("服务器响应成功,将cookie已经发携带到浏览器端");
		
		
		//3)当浏览器第二次访问的时候:
		//就可以携带Cookie数据到服务器端
		//请求对象获取所有的请求的信息(cookie)
//		public Cookie[] getCookies()
		Cookie[] cookies = request.getCookies() ;
		if(cookies !=null) {
			for(Cookie c :cookies) {
				//获取当前cookie的名称和cookie的内容
//				public String getName()
				//public String getValue()
				String name = c.getName() ;
				String value = c.getValue() ;
				System.out.println(name+"---"+value);
				System.out.println("获取到了cookie内容");
			}
		}else {
			System.out.println("当前没有cookie内容...");
		}
	
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 * 
 * Cookie的使用过程:
 * 	1)当前第一次请求服务器:  第一次没有cookie数据(浏览器端没有cookie数据 的)
 * 		http://localhost:8080/Cookie_Session_Jsp/CookieDemo1
 * 		服务器端:创建当前url-pattern=CookieDemo1的Servlet对象(反射的方式)
 * 		通过反射的方式调用doGet(....)
 * 		
 * 		解析:方法体的内容
 * 			Cookie c = new Cookie("msg","hello") ; //在内存创建Cookie对象
 * 	
 * 		将当前Cookie对象添加到响应信息
 * 				response.addCookie(c) ;
 * 		相当于:<===>
 * 				设置一个响应头
 * 				response.setHeader("Set-Cookie","msg=hello") ;
 * 
 * 		携带到浏览器端存储起来
 * 		Set-Cookie: msg=hello
 * 
 * 	 2)当前浏览器第二次请求服务器的时候:
 * 		http://localhost:8080/Cookie_Session_Jsp/CookieDemo1
 * 		
 * 		将上面的存储的cookie的名称和内容添自动添加到请求头中
 * 			
 * 		Cookie: msg=hello
 * 
 * 	3)浏览器发送请求到服务器端
 * 			后台可以通过请求对象获取所有的cookie的数据
 * 			request.getCookie()----->Cookie[] cookies
 * 
 * 
 * public void setMaxAge(int expiry):设置Cookie的最大存活时间:单位为秒!
 * 
 * 
 * public void setPath(String uri):设置Cookie的有效路径
 * 		
 * 当前设置成指定有路径,cookie才起作用,一般默认就是下文路径 /xxxweb工程名称
 */

@WebServlet("/CookieDemo2")
public class CookieDemo2 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		//第一次浏览器访问服务器端:没有cookie数据
		//服务器端:创建Cookie对象
		//public Cookie(String name, String value)
		Cookie cookie = new Cookie("msg","张三") ;
		
		
		//默认的会话结束时间:就是浏览器关闭的时候!
		//设置cookie的最大存活(生存)时间
		//public void setMaxAge(int expiry)
		cookie.setMaxAge(60*60*24*30);//一个月
		
		//2)需要将cookie对象添加到响应中
		//public void addCookie(Cookie cookie):将cookie添加响应中
		response.addCookie(cookie); //浏览器会将服务器响应的cookie对象保存起来
		System.out.println("服务器响应成功,将cookie已经发携带到浏览器端");
		
		
		//3)当浏览器第二次访问的时候:
		//就可以携带Cookie数据到服务器端
		//请求对象获取所有的请求的信息(cookie)
//		public Cookie[] getCookies()
		Cookie[] cookies = request.getCookies() ;
		if(cookies !=null) {
			for(Cookie c :cookies) {
				//获取当前cookie的名称和cookie的内容
//				public String getName()
				//public String getValue()
				String name = c.getName() ;
				String value = c.getValue() ;
				System.out.println(name+"---"+value);
				System.out.println("获取到了cookie内容");
			}
		}else {
			System.out.println("当前没有cookie内容...");
		}
	
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 * 一次发送多个cookie数据
 *
 */
@WebServlet("/CookieDemo3")
public class CookieDemo3 extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	
		//创建Cookie对象
		Cookie c1 = new Cookie("msg1","lisi") ;
		Cookie c2 = new Cookie("msg2","wangwu") ;
		Cookie c3 = new Cookie("msg3","zhaoliu") ;
		
		//添加到响应头中
		response.addCookie(c1); 
		response.addCookie(c2); 
		response.addCookie(c3); 
		
		
		//获取数据
		Cookie[] cookies = request.getCookies() ;
		if(cookies!=null)
			for(Cookie cookie :cookies) {
				//通过cookie对象获取名称和内容
				String cookieName = cookie.getName() 	;
				String cookieValue = cookie.getValue() ;
				System.out.println(cookieName+"----"+cookieValue);
		}else {
			System.out.println("没有cookie数据");
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

import java.io.IOException;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 使用Cookie记住用户上一次访问的系统时间
 * 
 * 分析:
 * 		设置响应的编码格式:
 * 		1)先获取当前cookie数据,request.getCookies()--->Cookie[]
 * 			
 * 		1.1)如果Cookie数组中不为null并且当前cookie数组的 长度>0 ,说明名称cookie
 * 				并且判断:当前cookie的名称 是否为  指定的名称 "lastTime"
 * 
 * 				//创建日期对象Date对象							"lastTime","2020-11-23 HH:mm:ss"
 *				使用SimpleDateFormat对象格式Date----String 日期文本
 *				
 				//将当前String日期文本格式:加密   URLEncoder
 				设置cookie有效期:一个月
 				通过Cookie的setValue(String value):设置value
 				发送浏览器端
 				 提示:用户上一次访问的系统时间是:  value 
 				 
 				 
 		2)如果当前Cookie数组为null或者长度=0
 			说明第一次访问
 				
 			直接创建Date对象  
 			使用SimpleDateFormat对象进行格式化操作----String 日期文本格式
 			创建Cookie对象		名称"lastTime",上面日期文本格式
 			设置cookie存活时间: 一个月
 			发送到浏览器端:response.addCookie(Cookie对象)
 			
 			response.getWriter().write("<h1>欢迎第一次访问,当前系统时间是: +cookie对象.getValue()</h1>")
 */




@WebServlet("/test")
public class CookieTest extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		
		//设置响应的中文乱码
		response.setContentType("text/html;charset=utf-8");
		
		//获取cookie数据:判断返回值中是否有值
		Cookie[] cookies = request.getCookies() ;
		// CookieUtils工具类: 
		//public static String getCookie(HttpServletRequest request,String cookieName)
		//定义标记:开始没有数据 (没有cookie数据)
		boolean flag = false ;
		
		//不是第一次访问
		if(cookies!=null && cookies.length>0) {
			if(cookies!=null) {
//				遍历 获取cookie数据
				for(Cookie cookie :cookies) {
					//获取内容
					//cookie的名称: lastTime
					String name = cookie.getName() ;
					//判断当前名称是否和lastTime一致
					if("lastTime".equals(name)) {
						
						//更改标记
						flag = true ;//表示存在数据
						
						//创建日期对象
						Date date = new Date() ;
						//将日期对象格式化
						SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss") ;
						String date_str = sdf.format(date) ; //日期文本:中间有空格(cookie不能存储空格字符)
						System.out.println("加密之前:"+date_str);
						//加密 :加密工具:URLEocoder
						 date_str = URLEncoder.encode(date_str, "utf-8") ;
						//加密之后
						 System.out.println(date_str);
						//设置cookie的内容
						cookie.setValue(date_str);
						
						//设置cookie的有效时间
						cookie.setMaxAge(60*60*24*30); //一个月
						//写回浏览器端:response
						response.addCookie(cookie);
						
						//获取内容
						String value = cookie.getValue() ;
						System.out.println("解密之前:"+value);
						
						//通过URLDecoder:工具类进行解密
						value = URLDecoder.decode(value, "utf-8") ;
						//提示
						response.getWriter().write("<h3>欢迎回来,您上一次访问的系统时间是:"+value+"</h3>");
						
						//提示:当前系统时间是....
					}
					
					
				}
				
			}
			
		}
		
		
		//另一种情况:获取的cookie数组长度为0或者是内容为null (没有"lastTime")
		//第一次访问
		if(cookies ==null || cookies.length ==0 || flag ==false) {
			//第一次访问
			//系统时间
			Date date = new Date() ;
			
			//格式化
			SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss") ;
			String str = sdf.format(date) ;
			//加密
			str = URLEncoder.encode(str, "utf-8") ;
			
			System.out.println(str);
			//创建Cookie对象:
			Cookie c = new Cookie("lastTime", str) ;
			//设置存活时间
			c.setMaxAge(60*60*24*30); //一个月
			
			//写回
			response.addCookie(c);
			//提示
			response.getWriter().write("<h3>您好,您是首次访问,时间是:"+URLDecoder.decode(c.getValue(), "utf-8")+"</h3>");
			
		}
		
		
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

CookieUtils

import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;

/**
 * 获取指定cookie内容的工具类
 *
 */
public class CookieUtils {
	
	
	public static String getCookie(HttpServletRequest request,
			String cookieName) {
		//获取所有的cookie数据
		Cookie[] cookies = request.getCookies() ;
		if(cookies!=null) {
			for(Cookie cookie :cookies) {
				if(cookieName.equals(cookie.getName())) {
					//获取当前cookie名称对应的内容
					return cookie.getValue() ;
				}
			}
		}
		return null ;
	}
	
	public static void main(String[] args) {
		//CookieUtils.getCookie(request, "lastTime")
	}
	
	
}

1.2.1_Session

Cookie和Session进行对比

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
/**
 * Cookie和Session进行对比
 * 
 * Cookie特点
 * 	1)存储在浏览器端
 * 	2)存储的内容都只能是String类型:
 * 		存储中文(特殊符号:空格 必须使用URLEncoder/URLDecoder:进行加密和加密)
 *  3)cookie存储的数据量有限制:一个站点:20-30cookie左右
 *  4)cookie相对:不太安全
 *  
 *  
 *  Session:
 *  	1)存储在服务器端
 *  	2)存储的内容可以是任意类型的数据
 *  		  因为它是一个域对象:可以进行数据共享
 *  			setAttribute(String name,Object obj)
 *  	3)Session存储的数据没有限制的 
 *  4)相对cookie:session更安全
 *  
 *  Session依赖于Cookie存在   
 *  		标识:JSESSIONID
 *  
 *  HttpSession:  
 *  			可以作为域对象
 *  
 *  
 *  sesison对象在内存默认的时间:30分钟
 *  tomcat的安装目录
 *  		web.xml文件
 *  			配置 :defaulServelt
 *         session过期时间
 *    <session-config>
        <session-timeout>30</session-timeout>
    </session-config>
    
 */
@WebServlet("/SessionDemo1")
public class SessionDemo1 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, 
			HttpServletResponse response) 
					throws ServletException, IOException {
		//创建HttpSession对象:
		//getSession():通用方法:获取Session对象 (推荐),如果没有session对象,会创建session对象
		
		//getSession(boolean create)
		//如果参数为true:创建创建一个新的会话
		//如果false:说明当前请求过程会话对象存在
		HttpSession session = request.getSession() ;
		
		//public void setAttribute(String name, Object value):给Session对象设置属性以及绑定的参数值
		List<String> list = new ArrayList<>() ;
		list.add("张三") ;
		list.add("李四 ") ;
		list.add("赵博") ;
		session.setAttribute("list", list);
		
		System.out.println("存储成功了....");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 *  public void setMaxInactiveInterval(int interval):单位秒
    设置session最大的有效时间
 *
 */
@WebServlet("/SessionDemo3")
public class SessionDemo3 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, 
			HttpServletResponse response) throws ServletException, IOException {
		//用户第一次访问后台Servlet:创建Session对象
		HttpSession session = request.getSession() ;
		System.out.println(session);
		//org.apache.catalina.session.StandardSessionFacade@629b1485
		
		//设置session超时时间
		/**
		 * session的销毁
		 * 1)tomcat正常关闭
		 * 2)设置的超时时间(有效时间)时间到了
		 * 3)手动删除session
		 *  
    public void invalidate():手动删除session  
		 */
		session.setMaxInactiveInterval(600); //单位秒
		//如果为负整数/0:永远不会超时!
		
	
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

@WebServlet("/SessionDemo4")
public class SessionDemo4 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//Session依赖于Cookie存在
		//Cookie:的名称:
		//JSESSIONID	
		//获取session
		HttpSession session = request.getSession() ;
		System.out.println(session);
		System.out.println(session.getId());
		
		//创建Cookie对象
		//HttpSession
		//获取当前唯一id的标识符   public String getId();
		Cookie cookie = new Cookie("JSESSIONID", session.getId()) ;
		
		//设置cookie的有效期
		cookie.setMaxAge(60*60*24);
		//写回浏览器端
		response.addCookie(cookie);
		System.out.println("cookie已写回...");
		
		
		System.out.println("---------------------------");
		
		//session对象设置属性
		session.setAttribute("name", "eric");
		System.out.println("设置数据完毕!");
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

//手动删除session:将session对象销毁掉
@WebServlet("/SessionDemo5")
public class SessionDemo5 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获取session对象
		HttpSession session = request.getSession() ;
		System.out.println("获取session对象了...");
		 
		//判断session是否为空
		if(session!=null) {
			String str = (String) session.getAttribute("name") ; 
			//有数据
			//手动删除session
			session.invalidate();
			
			System.out.println(str); //null
		}else {
			System.out.println("session已经销毁了...");
		}
		
		System.out.println("session销毁了");	
	}

	/**
	 * @;see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

2._JSP

2.1_Jsp简介

什么是JSP:Java Server Page:Java服务页面 能够编写Java代码html页面

在当前jsp页面上,可以使用java语言处理

Jsp:Java Server Page: Java服务页面   能够编写Java代码html页面

在当前jsp页面上,可以使用Java语言处理业务的需求!
本质是什么:
		结论:本质就是一个 Servlet
		
		
<%

		Jsp脚本:能够编写Java代码
%>

<%--
	Jsp的脚本注释:不会被解析
	@page :page指令: 指定相关jsp页面的属性
		
 --%>
 
 
 
 xxx_jsp.java extends  org.apache.jasper.runtime.HttpJspBase extends  
 	javax.servlet.http.HttpServlet
 	
 	
 这个Jsp的本质就是Servlet
 
 
 
 写好的jsp文件
 
 	经过两个阶段:
 	http://localhost:8080/Cookie_Session_Jsp/xxx.jsp
 		1)翻译阶段
 		将xxx.jsp文件---->翻译成 xxx_jsp.java文件
 	生命 周期
 	
 		_jspInit()	:Jsp的初始化 
 				访问jsp页面:创建Jsp对象
 		
 		_jspService(final javax.servlet.http.HttpServletRequest request,final javax.servlet.http.HttpServletResponse response	)
	
			//解析jsp中body内容
			
		_jspDestroy()
			销毁方法
				服务器正常关闭的时候销毁!
				
				
	编译成:class:
		xxx_jsp.java-----xxx_jsp.class文件  (反射的方式调用初始化,服务,以及销毁的方法)
				
				
	
	
el----表达式就是替代了<%=%>jsp输出表达式

${pageScope.属性名称}    	===等价于  <%=pageContext.getAttribute("属性名称")%>
${requestScope.属性名称}    ===等价于  <%=request.getAttribute("属性名称")%>
${sessionScope.属性名称} 	 ===等价于  <%=session.getAttribute("属性名称")%>
${applicationScope.属性名称} ===等价于  <%=application.getAttribute("属性名称")%>
Jsp中四个域对象								类型
	page域			pageScope					pageContext	
	request域		requestScope				HttpServletRequest
	session域		sessionScope				httpSession
	application域	applicationScope			ServletContext
				

<%@ page language="java" import="java.util.Date" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>这是我第一个Jsp页面</title>
</head>
<body>
	<%
		//创建日期对象
		//局部变量
		Date date = new Date() ;
		System.out.println(date) ;
	%>
	<%!
		//全局变量
		int i = 100 ;
		
	%>
	<%=i %>
	
	<!-- 
		html注释
	 -->
<%--
	Jsp的输出表达式
 --%>
 <%=date %>
</body>
</html>

2.2_Jsp的执行流程

1)发送请求到服务器http://localhost:8080/xxx/xx.jsp
2)服务器解析路径:xx.jsp
3)然后对xxx.jsp----将jsp文件翻译成Java文件------
	保存在tomcat安装目录下面的work
		 Catalina
		 localhost
			本地上所有的jsp文件
			xxx.java (向浏览器输出内容:JspWriter.write("\r\n..") 拼接所有的内容.)
			jsp里面局部变量:_jspService()
				<%
				int i = 100 ;
				%>
				<%! 
				int num =20 ;
				%>
														
4)能够运行Java文件---就必须编译----->
包名.类名	反射技术
	举例:
	org.apache.jsp.el._02_005fel_jsp   ----获取当前类的字节码文件对象  
					创建该类实例
					获取Method----调用_jspService()

2.3_Jsp的使用

jsp的脚本:
<% java代码的 %>
<%= jsp的输出表达式 %>

<%!-- jsp的注释 --%>  <!--html注释-->html注释在jsp中慎用:会被解析出来

2.4Jsp三大指令9大内置对象

Jsp三大指令
@page
	很多属性
	import属性
	pageError
	content-type编码格式
@include	  静态导入:导入jsp页面
@taglib---	需要结合:jstl(jsp核心标签库一块使用)  
----- 导入jstl.jar+stared.jar


在jsp页面中引入jsp的核心标签库
 <c:if>
 <c:foereach>
 
 
 
 Jsp9大内置对象
 
 
 
Jsp中的四个域对象分别是什么
		pageScope				pageContext
		requestScope			HttpServletRequest
		sessionScope			HttpSession
		applicationScope		ServletContext

2.4.1_@page指令:

page指令:
	language属性:只支持Java语言
	contentType:文本类型:html格式:utf-8(响应的文本内容)
	pageEncoding:当前jsp的默认编码格式:指定utf-8
	buffer:当前使用流的缓冲大小 默认8kb(了解)
	errorPage:当前jsp页面如果发生异常了,就跳转到错误页面上
	isElIgnored:是否忽略el表达式:默认值是false(不忽略)true(表示忽略)
		el表达式
			就为了书写简单:替代jsp表达式
			通用写法${域对象.属性名称}
			
	session:是否启用session true:不启用 false:启用
	
	isErrorPage:指定当前页面是否错误页面

<!--
	三大指令
	page指令
  
  language属性:只支持Java语言
  contentType:文本类型:html格式:utf-8 (响应的文本内容)
  pageEncoding:当前jsp的默认编码格式:指定utf-8
 
  buffer:当前使用流的缓冲大小 默认8kb(了解)
  
  errorPage:当前jsp页面如果发生异常了,就跳转到 错误页面上
  
  isELIgnored:是否启用el表达式: 默认值是false(不忽略)
  					true:表示忽略
  		el表达式
  				就为了书写简单:替代jsp表达式
  				通用写法:${域对象.属性名称}
  				
  				
  session::是否启用session
  			true:不启用
  			false:启用session
  			
  isErrorPage:指定当前页面是否错误页面
  		
  -->
<%@ page language="java" import="java.util.*" buffer="8kb" 
errorPage="error.jsp"
 contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"
    isELIgnored="false"
    session="false"
    isErrorPage="false"
    %>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
	<%
		List<String> list = new ArrayList<String>() ;
		
		//int i = 10 / 0 ;
	
		list.add("hello") ;
		list.add("world") ;
		
		//将list集合存储到request域中
		request.setAttribute("list",list);
		
		//创建Session对象
		HttpSession session = request.getSession() ;
		System.out.println(session) ;
	%>
	<%=list %><%--
			等价于:response.getWriter().wrtie("xxx") ;
			本质:流: 字符流打印流 
			
	 --%>
	 <hr/>
	 
	 <%--
	 	没有使用EL表达式之前的写法:
	 	使用jsp输出 
	  --%>
	  <%=request.getAttribute("list") %>
	  <hr/>
	 ${requestScope.list}
	 
	 <hr/>
	 <%--
	 	el表达式:直接输出域对象中存储的属性名称
	  --%>
	  ${list }
</body>
</html>

2.4.2_@include指令:静态包含

include指令:静态包含
	静态包含:
		不会单独针对被包含jsp进行翻译和编译
	动态包含:jsp的动作标签库
		jsp:include:会单独针对被包含的jsp进行翻译和编译
	@include指令:
		file属性:被包含的jsp页面"/"---webContent
		

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%--
	静态包含:
			不会单独针对被包含jsp进行翻译和编译 (比较节省内存空间)
			
	而动态包含:jsp的动作标签库
			jsp:include:会单独针对被包含的jsp页面进行翻译和编译
			
	@include指令:
			file属性:被包含的jsp页面  "/"----webContent
--%>


<%@include file="/include/header.jsp" %>
<%@include file="/include/footer.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>静态包含</title>
</head>
<body>
<!-- jsp的动作标签库:
	转发到指定页面  page属性:指定页面地址
 
 include:动态包含  page:被包含的页面地址
 -->
<%-- 
<jsp:forward page=""></jsp:forward>
<jsp:include page=""></jsp:include>
 --%>

</body>
</html>

2.4.3_@taglib指令结合jstl去使用

c:if  
    test="${判断}" 
    
c:choose
   c:when test="xxx"
   
   c:otherwise
   

常用:遍历
c:foreach  
   类似普通for循环
	begin
	end
	step:步长语句
	var:循环中的变量
	varStatus:status  
				index:获取索引号
				count:获取序号
				
  c:foreach   另一种用法 (常用的)
  	items="${属性名称}" var="p" 循环中变量名 varStatus="status"
      从后台获取数据,展示数据(遍历)		
 			${p.属性}

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%--
	jsp第三个指令
	taglib指令
	
	    引入jstl核心jar包以及标准jar包
	    
	    jstl	:核心标签库
	    
	         核心库:core   
	        函数库:function..
	    sql语句:sql库
 --%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jstl引入</title>
</head>
<body>
<%
	//给request域对象中存储一些list数据
	List<String> list = new ArrayList<String>() ;
	//添加数据
	list.add("hello") ;
	list.add("world") ;
	list.add("javaEE") ;
	
	request.setAttribute("list",list) ;
	
	request.setAttribute("number", 7) ;
%>
<%--
	c:if标签:jstl判断语句 
	  属性:test			结合el表达式去使用  ${属性名称 判断表达式}
	  						结果是true,执行c:if标签的语句体;如果false,不执行标签体
	  						
	  		注意事项:
	  					没有c:else标签	
	  							针对两种结果进行判断:必须写两次c:if			
	  		
 --%>
<c:if test="${number %2== 0}">
		<h3>当前number是偶数</h3>
</c:if>
<c:if test="${number %2!=0 }">
	<h3>当前number是奇数</h3>
</c:if>

<hr/>
<%--
		c:if标签中:
	test属性:   关键字 empty 判断集合/数组是否为空 (判断对象)
		test=${not empty 属性名称}  判断当前属性绑定的对象不为空  :
					true  执行语句体,否则不执行
		test=${empty 属性名称}:判断当前属性绑定的对象为空:
			true执行语句体,否则不执行
 --%>
<c:if test="${not empty list }">
		<h3>当前集合不为空存在数据!</h3>
</c:if>
<c:if test="${empty list }">
	<h3>当前集合为空!</h3>
</c:if>
</body>
</html>

2.5使用EL表达式替代了jsp的输出表达式

<%= jsp的输出表达式 %>

格式:
{域对象.属性}
EL表达式的一些使用

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>el表达式</title>
</head>
<body>
<%
	//给page域中存储属性以及内容
	pageContext.setAttribute("name1", "张三") ;
	//给Request域中存储属性以及内容
	request.setAttribute("msg", "helloEL") ;
	//给session存储内容
	session.setAttribute("name2", "李四") ;
	//给application域中存储内容
	application.setAttribute("msg2", "Javaee") ;
%>

<hr/>

${pageScope.name1 }  <br/>
${requestScope.msg}  <br/>
${sessionScope.name2} <br/>
${applicationScope.msg2 }<br/>



</body>
</html>

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>el表达式</title>
</head>
<body>
<%
	//给page域中存储属性以及内容
	//pageContext.setAttribute("name1", "张三") ;
	//给Request域中存储属性以及内容
	//request.setAttribute("name1", "helloEL") ;
	 //给session存储内容
	session.setAttribute("name1", "李四") ;
	//给application域中存储内容---servletContext
	application.setAttribute("name1", "Javaee") ; 
%>


<%--
	现在使用el表达式直接书写属性名称
	就会在当前所有的域对象中寻找名称是否为name1数据,
	从小到大的范围找 ----->findAttribute("属性"):范围最小存在这个值就直接使用!

	简写方式
		${属性}
		
 --%>
 
 ${name1}
</body>
</html>

<%@ page language="java" import="com.qf.entity.User" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>javabean导航</title>
</head>
<body>
<%
	//创建User对象
	User user = new User() ;
    user.setName("张三") ;
    user.setPassword("123456") ;
    
    //将user对象存储到request对象
    request.setAttribute("user", user) ;
 %>
 <%--
 	jsp的el表达式:可以直接操作javaBean属性
 	${属性名称.去掉get方法名的前缀将后面首字母小写去掉()}   
 	相当于:属性名.getName() 
 	      属性名称.getPassword() 
 
  --%>
  ${user.name }   -    ${user.password }
 
</body>
</html>

2.6_jstl核心标签库中常用的标签

c:if  
    test="${判断}" 
    
c:choose
   c:when test="xxx"
   
   c:otherwise
   

常用:遍历
c:foreach  
   类似普通for循环
	begin
	end
	step:步长语句
	var:循环中的变量
	varStatus:status  
				index:获取索引号
				count:获取序号
				
  c:foreach   另一种用法 (常用的)
  	items="${属性名称}" var="p" 循环中变量名 varStatus="status"
      从后台获取数据,展示数据(遍历)		
 			${p.属性}

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%--
	引入jsp的核心标签库
 --%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>choose标签</title>
</head>
<body>
<%
	//给request域对象中存储整数
	request.setAttribute("number", 3) ;
%>
<%--
		jsp中的c:choose标签 类似于 Java中选择结构语句
				<c:choose>
						<c:when test="${xxx}">标签体1</c:when>
						<c:when test="${xxx}">标签体2</c:when>
						<c:when test="${xxx}">标签体3</c:when>
						<c:otherwise>标签体n</c:otherwise>
				</c:choose>
				
				c:choose: 相当于Java中的switch语句
						c:when:相当于switch语句中的case语句
						c:otherwise:相当于switch语句default语句
	el表达式:本身操作运算符
			比较运算符(使用居多)
			算术运算符
			逻辑运算符...
 --%>
<c:choose>
	<c:when test="${number== 1 }">星期一</c:when>
	<c:when test="${number== 2 }">星期二</c:when>
	<c:when test="${number== 3 }">星期三</c:when>
	<c:when test="${number== 4 }">星期四</c:when>
	<c:when test="${number== 5 }">星期五</c:when>
	<c:when test="${number== 6}">星期六</c:when>
	<c:when test="${number== 7}">星期日</c:when>
	<c:otherwise>对不起,没有匹配的结果!</c:otherwise>
</c:choose>

</body>
</html>

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%--
	导入jstl核心标签库
 --%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>foreach标签</title>
</head>
<body>
<%--
		c:foreach标签: 类似于Java中的普通for循环
						for(int x = 1; x <=10 ; x ++){....}
		
				1)基本的用法:当前普通循环使用
					属性
						var:循环中的变量名
						begin:开始循环中的数据
						end:结束时候的数据值
						
						step:步长语句
						varStatus:循环中的变量的状态 status
								内置的属性count:序号
								  index:索引
						
						
						

 --%>
 <c:forEach var="i" begin="1" end="10" varStatus="status">
 	<%-- c:foreach标签体中
 		需要使用el表达式获取里面的循环中的数据
 	 --%>	
 	 
 	 	${status.count}		- 	${i }	 <br/>
 </c:forEach>
 
 <hr/>
 
 <%--
 	2)另外一种用法:
 			获取后台携带集合数据(请求转发过来的数据),将集合数据的内容遍历出来
 			
  --%>
  <%
  			//创建List集合数据
  			List<String> list = new ArrayList<String>() ;
  			//给集合中添加数据
  			list.add("JavaEE") ;
  			list.add("Python") ;
  			list.add("PHP")  ;
  			list.add("Go") ;
  			
  			//存储request域中:
  			request.setAttribute("name", list) ;
  			
  	
 %>
 <%--
 	items属性:
 			从域对象获取属性绑定的内容  ${属性名称}
 	var:循环中的变量名
 	varStatus:循环中变量的状态
 			属性值.count:序号
 			属性值.index:索引
 	
  --%>
 <c:forEach items="${name }" var="p" varStatus="status">
        ${status.count }	-	 ${p } <br/>
 </c:forEach>
 
</body>
</html>

2.7针对MVC设计思想—代码分层

M:model
V:view
C:Contoller
   web层  
         servlet----springmvc
         	接收参数
         	调用service
         	调用dao层
         	返回获取结果数据
         	
           请求转发/重定向



MVC:架构思想
M:model:模型	
		业务数据
V:view:视图层
C:Contoller:控制层

	servlet+jsp:最佳实践
	
servlet:不应该输出页面
jsp:不应该写大量的java代码



数据库的设计:
实体类:
	com.work.entity
		Product
		
	com.work.web
		ProductContoller
	
	com.work.service
		业务接口层
		
	com.work.service.impl
		业务接口实现层
		
	com.work.dao
		ProductDao:数据访问接口层
		
	com.work.dao.impl
		ProductDao.impl:数据的访问接口实现层	

2.8_过滤器:Filter

过滤器:----JavaWEB三大组件之一

程序中的过滤器:
	执行通用的操作
一般应用场景:
	登录的使用
	解决全局乱码问题
	
过滤器:
	两种配置方式
	1)注解方式
		@WebFilter
	2)web.xml文件配置方式
	<filter>
		<filter-name></filter-name>
		<filter-class></filter-calss>
	</filter>
	<filter-mapping>
   		过滤器名称
   		<url-pattern>/xxx.jsp/.html</url-pattern>
   	</filter-mapping>

<!-- Filter的xml配置方式 -->
   <!--过滤器的基本配置  -->
   <filter>
   	<filter-name>FilterDemo2</filter-name>
   	<filter-class>com.qf.filter_01.FilterDemo2</filter-class>
   </filter>
    <!--  
   
   	服务器启动的时候
  	 http://localhost:8080/Jsp_Filter/xxx.jsp 
   
   		//被过滤器拦截-web.xml找到url--pattern
   		就要找到对应过滤器名称
   		基本配置  ----FilterDemo
   		
   		filter-class 
   		       com.qf.filter_01.FilterDemo2
   		       
   		     Class clazz = Class.forName(" com.qf.filter_01.FilterDemo2") ;
   			//创建该类对象
   			Object obj = clazz.newIntance() ;
   			//获取Method
   			Method m = clazz.getMethod("init",FilterConfig.class) ;
   			m.invoke(obj,fConfig) ;
   			
   			....
   -->
  
   <!--过滤器的映射配置  -->
   <filter-mapping>
   	<filter-name>FilterDemo2</filter-name>
   	<url-pattern>/*</url-pattern>
   </filter-mapping>




过滤的过滤方式

<filter>
	<filter-name>xx</filter-name>
	<filter-class>xx</filter-class>
</filter>
<filter-mapping>
	<filter-name>xx</filter-name>
	<url-pattern>xx</url-pattern>
	<dispatcher>REQUEST</dispatcher>
</filter-mapping>

url-pattern
	
	@WebFilter("/xx")
			属性
					String[] value() ;
					String[] url-patterns() ;
					
配置方式
		1)具体的路径  :只要当前请求到具体的jsp页面的时候,过滤器才会被执行!
				/index.jsp
				/xxx.jsp
		2)指定目录  :当前请求"/user/updatServlet"的时候,过滤器才会被执行
				/user/findAllServlet
				/user/updateServlet
				
		3)指定后缀名的方式: 只有当请求后缀名为.jsp的时候,过滤器的会被执行
				*.jsp   
				
		4)通用方式: /*  :
				请求所有的地址,过滤器都会被执行 (全局的乱码操作!)  
				
				
				
Filter里面过滤的方式

@WebFilter里面的属性
DispatcherType[] dispatcherTypes()  
返回值DispatcherType 枚举类型
	public enum DispatcherType {
      REQUEST,  ---默认: 直接请求的时候,过滤器作用
      FORWARD,   ---  请求转发页面跳转的时候,过滤器器起作用

    INCLUDE,   --- 某个页面被包含的时候,过滤器会被执行
    ASYNC,     --- 非同步请求的时候,过滤器会被执行
    ERROR     ---  错误页面跳转,过滤器会被执行
}
			

过滤链:
	执行多个过滤器
	
	过滤器1 和过滤器2
	
@WebFilter("/xx.jsp*")
class FilterDemo5

@WebFilter("/xx")
class FilterDemo6


AFilter				BFilter   注解的方式:多个过滤器:类名的每一个字符进行比较,小的先执行,大的后执行!
					
filterDemo5进来了...  
FilterDemo6执行了...
index.jsp
FilterDemo6回来了...
filterDemo5回来了..	

过滤器的应用场景:
执行一写通用的操作

	1)登录的过滤
	2)解决web工程下所有的资源乱码问题 

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

/**
 * 手动方式
 * 1)自定义一个类  实现Filter接口 重写三个方法
 * 2)方式
 * 		注解方式
 * 	@WebFilter("/*")
 * 
 * 3)在测试doFilter方法
 */
//@WebFilter("/*")
public class FilterDemo1 implements Filter {

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
		
	}
	
	//过滤的方法
	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
		
		//针对请求Request做一些增强
		
		System.out.println("FileDemo1进来了。。");
		
		//放行....
		chain.doFilter(request, response);
		
		//可以针对响应对象Response对象做一些增强
		
		System.out.println("FileDemo1回来了....");
	}

	@Override
	public void destroy() {
		
	}

}

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
/**
 * 直接使用自带插件
 * 
 * 直接生成Filter类
 *
 */

//@WebFilter("/*")
public class FilterDemo2 implements Filter {

	//销毁
	public void destroy() {
	}

	
	//过滤
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		
		System.out.println("FilterDemo2执行了...");
		//放行
		chain.doFilter(request, response);
		
		System.out.println("FilterDemo2回来了...");
	}
	
	//初始化
	public void init(FilterConfig fConfig) throws ServletException {
	}

}

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

//当我们访问index.jsp,过滤器才会执行
//@WebFilter("/index.jsp") //:只要当前请求到具体的jsp页面的时候,过滤器才会被执行!

public class FilterDemo3 implements Filter {

	//无参构造方法
	/**
	 * 在服务器启动的时候,创建了该过滤器对象
	 * 其实就是反射创建该类实例的
	 */
    public FilterDemo3() {
    	System.out.println("Filter对象创建了...");
    }

    /**
     * 初始化 仅仅执行一次
     */
    public void init(FilterConfig fConfig) throws ServletException {
    	System.out.println("init...");
	}

	/**
	 *过滤
	 *当前请求的是地址:index.jsp,过滤器执行了
	 *进来之后,执行 "filter执行了"  
	 *       一旦放行-----访问资源文件
	 *       
	 * 再次回到过滤任务中
	 * 
	 * doFilter:可以执行多次
	 *
	 */
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

		System.out.println("filter执行了...");
		//通过request对象完成一些需求
		
		//放行
		chain.doFilter(request, response);
		//可以通过response对象完成一些需求
		//回来
		System.out.println("filter回来了...");
	}

	
	/**
	 * 销毁
	 *  执行一次:正常关闭服务器  
	 *     将过滤器的对象从内存中回收掉!
	 */
	public void destroy() {
		System.out.println("destroy...");
	}

}

import java.io.IOException;

import javax.servlet.DispatcherType;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

//@WebFilter(value="/user/FindAllServlet",dispatcherTypes=DispatcherType.REQUEST) //拦截所有   /user/FindAllServlet
//指定目录  :当前请求"/user/updatServlet"的时候,过滤器才会被执行

//如果过滤方式:DispatcherType.FORWARD :请求转发到某个页面的时候,过滤器才被执行
/*@WebFilter(value="/index.jsp",
	dispatcherTypes=DispatcherType.FORWARD)*/

//如果当前index.jsp是通过请求转发过来,这个时候过滤器被执行

//@WebFilter(value="/index.jsp",
//dispatcherTypes=DispatcherType.REQUEST) //直接访问jsp,过滤器就被执行


//请求转发到index.jsp或者直接访问的index.jsp,过滤器会被执行
//@WebFilter(value="/index.jsp",dispatcherTypes= {DispatcherType.REQUEST,DispatcherType.FORWARD})
public class FilterDemo4 implements Filter {


	public void destroy() {
	}
	
	
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		System.out.println("FilterDemo4执行了...");
		chain.doFilter(request, response);
	}
	public void init(FilterConfig fConfig) throws ServletException {
	}

}

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

@WebFilter("/index.jsp")
public class FilterDemo5 implements Filter {

	public void destroy() {
	}
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		System.out.println("filterDemo5进来了...");
		
		chain.doFilter(request, response);
		System.out.println("filterDemo5回来了...");
	}
	public void init(FilterConfig fConfig) throws ServletException {
	}

}

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;

@WebFilter("/*")
public class FilterDemo16 implements Filter {

    public FilterDemo16() {
    }

	public void destroy() {
	}

	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		System.out.println("FilterDemo6执行了...");
		chain.doFilter(request, response);
		System.out.println("FilterDemo6回来了...");
	}

	/**
	 * @see Filter#init(FilterConfig)
	 */
	public void init(FilterConfig fConfig) throws ServletException {
		// TODO Auto-generated method stub
	}

}

2.8.1_Filter的生命周期

xxxFilter implements Filter{
	服务器启动的时候:就会通过创建过滤器对象以及初始化(执行一次)
	init(FilterConfig config){}
	doFilter(ServletRequest req,ServletResponse res,DoChain chain){}
	
}

2.8.2_过滤器的url-pattern的配置

url-pattern
	
	@WebFilter("/xx")
			属性
					String[] value() ;
					String[] url-patterns() ;
					
配置方式
		1)具体的路径  :只要当前请求到具体的jsp页面的时候,过滤器才会被执行!
				/index.jsp
				/xxx.jsp
		2)指定目录  :当前请求"/user/updatServlet"的时候,过滤器才会被执行
				/user/findAllServlet
				/user/updateServlet
				
		3)指定后缀名的方式: 只有当请求后缀名为.jsp的时候,过滤器的会被执行
				*.jsp   
				
		4)通用方式: /*  :
				请求所有的地址,过滤器都会被执行 (全局的乱码操作!)  
				
				
				
Filter里面过滤的方式

@WebFilter里面的属性
DispatcherType[] dispatcherTypes()  
返回值DispatcherType 枚举类型
	public enum DispatcherType {
      REQUEST,  ---默认: 直接请求的时候,过滤器作用
      FORWARD,   ---  请求转发页面跳转的时候,过滤器器起作用
      
   
  
   
   
    INCLUDE,   --- 某个页面被包含的时候,过滤器会被执行
    ASYNC,     --- 非同步请求的时候,过滤器会被执行
    ERROR     ---  错误页面跳转,过滤器会被执行
}
			

2.8.3_过滤链的规则(了解)

过滤链:
	执行多个过滤器
	
	过滤器1 和过滤器2
	
@WebFilter("/xx.jsp*")
class FilterDemo5

@WebFilter("/xx")
class FilterDemo6


AFilter				BFilter   注解的方式:多个过滤器:类名的每一个字符进行比较,小的先执行,大的后执行!
					
			
filterDemo5进来了...  
FilterDemo6执行了...
index.jsp
FilterDemo6回来了...
filterDemo5回来了..	

过滤器的应用场景:
执行一写通用的操作

	1)登录的过滤
	2)解决web工程下所有的资源乱码问题 

3._bootstrap:前端框架

在任何设备上,所有页面:响应式页面 

大屏幕:显示器屏幕分辨率大

中等屏幕

小屏幕

超小屏幕

针对bootstrap:全局CSS样式:图片
class="img-rounded" 
class="img-circle"
class="img-thumbnail"
自适应: 在各个设备(移动设备)
 "img-responsive" 响应式属性

起步---引入css文件.Jquery,js文件

官网
全局cSS样式
   栅格系统
   表格
   表单
  组件;
  	导航条
  	分页条
   
   轮播图:插件

样式:如果想去使用某个样式,看官网里面样式说明
表格样式:
   class="table table-bordered"
   
   
 
全局样式:栅格系统
在外层里面指定页面容器  class="container"
   在内层div  : class="row"    一行12列
   
   		  //使用div分层布局
   		  在不同的设备之间:响应式
   		  class属性: col-设备参数-当前一  所占的格子数/12
   		  
   		  设备参数:
   		    xs:超小屏幕(手机屏幕)
   		    sm: 小屏幕(平板 pad)
   		    md:中等屏幕(一般的桌面显示器)
   		    lg:大屏幕(大显示器)>=1200px
   		    
  
 表单样式
       划分种类
          水平方向表单样式
          基本表单样式
          内联样式表单
          
          用户名                密码     

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>Bootstrap 101 Template</title>
	
	    <!-- Bootstrap --CSS样式 -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		
		 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery-3.2.1.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	  
	  </head>
		<!-- 
		 
				boostrap前端框架  (会用)------响应式页面
				
				针对各种各样的设备(大屏幕,中等屏幕,小屏幕,超小屏幕) 移动端/web-app
						
				框架
						半成品的工具
						
				三个环境
					1)全局CSS样式   css文件
					2)里面boostrap自带的js库  js文件
					3)依赖于Jquery的js库		jquery
						
			在官网上将组件/插件,引入之后更改!
			
			
						
		 -->
		 <!-- 导入boostrap相关的csss,js,主题,Jquery-->
	
	<body>
		<!-- 
			clsss= "img-responsive"针对图片可以自适应
			class="img-rounded" 图片的四个边角是圆角
			class="img-circle" 图片的圆形
			class="img-thumbnail"相框型的
		 -->
		<img src="img/865816ec969ed2498a22213d56cce952.jpg" class="img-responsive" /> 
		<hr />
		<img src="img/865816ec969ed2498a22213d56cce952.jpg" class="img-rounded img-responsive" />
		<hr />
		<img src="img/865816ec969ed2498a22213d56cce952.jpg" class="img-circle img-responsive" />
		<hr />
		<img src="img/865816ec969ed2498a22213d56cce952.jpg" class="img-thumbnail img-responsive"  />
	</body>
</html>

3.1_boostrap中的其他全局CSS样式

栅格系统 
   分辨率不同:不同设备
 表格
 表单
 
 <!DOCTYPE html>
<html>
<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>_boostrap之_栅格系统</title>
	
	    <!-- Bootstrap --CSS样式 -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		
		 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery-3.2.1.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	  
	  </head>
	<body>
		<!-- 定义页面容器 -->
		<div class="container-fluid">
				<!-- 定义了了一行 -->
			<div class="row">
				<!-- 
					大屏幕一行12个格子
					小屏幕 一行6个格子
					
				 -->
			<!-- 	 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered" >栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div>
				 <div class="col-lg-1 col-sm-2 table-bordered">栅格</div> -->
				 
				 
				 <div class="col-md-4">栅格</div>
				 <div class="col-md-4">栅格</div>
				 <div class="col-md-4">栅格</div>
			</div>
			
			
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>_boostrap之_栅格系统</title>
	
	    <!-- Bootstrap --CSS样式 -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		
		 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery-3.2.1.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	  
	  </head>
	<body>
		<!-- 
			class属性
				btn btn-default:默认样式(没有任何特殊颜色标记)
		 -->
		<a class="btn btn-default" href="#" role="button">登录</a>
		<button class="btn btn-default" type="submit">注册</button>
		<input class="btn btn-default" type="button" value="Input">
		<input class="btn btn-default" type="submit" value="Submit">
		
		<hr />
		<hr />
		
		<!-- 
			按钮的预定义样式
			
			btn btn-primary
			btn btn-success
			btn btn-danger
			btn btn-warning
		 -->
		
		<!-- Standard button -->
		<button type="button" class="btn btn-default">（默认样式）Default</button>
		
		<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
		<button type="button" class="btn btn-primary">（首选项）Primary</button>
		
		<!-- Indicates a successful or positive action -->
		<button type="button" class="btn btn-success">（成功）Success</button>
		
		<!-- Contextual button for informational alert messages -->
		<button type="button" class="btn btn-info">（一般信息）Info</button>
		
		<!-- Indicates caution should be taken with this action -->
		<button type="button" class="btn btn-warning">（警告）Warning</button>
		
		<!-- Indicates a dangerous or potentially negative action -->
		<button type="button" class="btn btn-danger">（危险）Danger</button>
		
		<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
		<button type="button" class="btn btn-link">（链接）Link</button>
	</body>
</html>

<!DOCTYPE html>
<html>
<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>_boostrap之_表格</title>
	
	    <!-- Bootstrap --CSS样式 -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		
		 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery-3.2.1.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	  
	  </head>
	<body>
		<!-- <table border="1px" width="500px" height="400px" align="center"> -->
			<!-- table样式基本属性
			   class="table"
			 -->
			<!-- <table class="table"> -->
			<!-- table table-striped :表格的斑马条纹样式 -->
			<!-- <table class="table table-striped"> -->
			
			<!-- 带边框的表格
				table-bordered
				
				table-hover:鼠标悬停有一个响应状态
			 -->
			<table class=" table table-bordered table-hover">
			<tr>
				<th>编号</th>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr class="active"><!-- 指定具体的鼠标悬停之后选中 -->
				<td>001</td>
				<td>张钰</td>
				<td>男</td>
				<td>20</td>
			</tr>
			<tr class="danger"> <!-- 设置dange颜色-->
				<td>002</td>
				<td>赵博</td>
				<td>男</td>
				<td>22</td>
			</tr>
			<tr class="warning"> <!-- 设置警告的颜色-->
				<td>003</td>
				<td>袁一鸣</td>
				<td>男</td>
				<td>23</td>
			</tr>
			<tr class="info"><!-- 设置普通信息颜色 -->
				<td>004</td>
				<td>张三</td>
				<td>男</td>
				<td>25</td>
			</tr>
							
		</table>
		
		
		<hr/>
		
		<hr/>
		
		<hr/>
		
		<!-- 
			全局CSS表单样式
			
			//基本实例
			表单form标签
				一进来: 控件  div 指定属性 class="form-group"
				每一lable元素和input/select元素/textarea(文本域) 包裹在
				form-group 这个空间,可以获得更好的排版!
			
		 -->
		 <form>
		   <div class="form-group">
		     <label for="exampleInputEmail1">Email address</label>
		     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
		   </div>
		   <div class="form-group">
		     <label for="exampleInputPassword1">Password</label>
		     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
		   </div>
		   <div class="form-group">
		     <label for="exampleInputFile">File input</label>
		     <input type="file" id="exampleInputFile">
		     <p class="help-block">Example block-level help text here.</p>
		   </div>
		   <div class="checkbox">
		     <label>
		       <input type="checkbox"> Check me out
		     </label>
		   </div>
		   <button type="submit" class="btn btn-default">Submit</button>
		 </form>
		 
		 
		 <hr />
		 <hr />
		 <hr />
		 
		 <!-- 
			水平排列的表单
			class="form-horizontal" 设置下面的所有的表单项水平方向的
			
			注意实行:
			即使使用的bootrap给定的模板:
			里面所有的标签的id属性不能重复!
		 -->
		 <form class="form-horizontal">
		   <div class="form-group">
		     <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
		     <div class="col-sm-10">
		       <input type="email" class="form-control" id="inputUsername" placeholder="Email">
		     </div>
		   </div>
		   <div class="form-group">
		     <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
		     <div class="col-sm-10">
		       <input type="password" class="form-control" id="inputPassword" placeholder="Password">
		     </div>
		   </div>
		   
		   <div class="form-group">
		     <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
		     <div class="col-sm-10">
		       <input type="text" class="form-control" id="inputEamil" placeholder="Password">
		     </div>
		   </div>
		   
		   <div class="form-group">
		     <div class="col-sm-offset-2 col-sm-10">
		       <div class="checkbox">
		         <label>
		           <input type="checkbox"> 记住用户名
		         </label>
		       </div>
		     </div>
		   </div>
		   <div class="form-group">
		     <div class="col-sm-offset-2 col-sm-10">
		       <button type="submit" class="btn btn-default">登录</button>
		     </div>
		   </div>
		 </form>
		
		
	</body>
</html>

3.2_boostrap中的组件

导航条
分页条
<!DOCTYPE html>
<html>
<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>boostrap之_组件_导航条</title>
	
	    <!-- Bootstrap --CSS样式 -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		
		 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery-3.2.1.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	  
	  </head>
	<body>
		
		<!-- 
			导航条:bootstrap的组件
		
		navbar navbar-default:导航条的默认样式:背景色是白色
		
		反射导航条样式
			.navbar-inverse
		-->
		<!-- <nav class="navbar navbar-default "> -->
		<nav class="navbar navbar-inverse ">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
			
		    <div class="navbar-header">
				<!-- 定义了一个汉堡按钮
					随着屏幕分辨率边小的,导航条中间的内容就会隐藏到汉堡按钮下面
				 -->
		      <button type="button" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		       <!-- <span class="icon-bar"></span> -->
		      </button>
		      <a class="navbar-brand" href="#">我的首页</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
		        <li><a href="#">户外商品</a></li>
		      </ul>
			  
			  <!-- 
				导航条样式后面
				
				pull-right:将整个表单组件放置在右边
			   -->
		      <form class="navbar-form navbar-left pull-right">
		        <div class="form-group">
		          <input type="text" class="form-control" placeholder="Search">
		        </div>
		        <button type="submit" class="btn btn-default">搜索</button>
		      </form>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		
		
		<hr/>
		
		<hr/>
		
		<hr />
		
		<!-- 分页条-->
		<nav aria-label="Page navigation">
		  <ul class="pagination">
			  
			  <!--当前默认在第一页,上一个不能再点击了
			  这个时候当前上一页添加禁用状态
			  class ="disabled"
			   -->
		    <li class="disabled">
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">上一页</span>
		      </a>
		    </li>
			<!--
				给第1页添加默认激活状态(选中)
				class="active"
			 -->
		    <li class="active"><a href="#" >1</a></li>
			
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">下一页</span>
		      </a>
		    </li>
		  </ul>
		</nav>
		
		<span  style="font-size: 25px;">共有20条记录 共4页</span>
		
	</body>
</html>

3.3_boostrap中插件

轮播图
<!DOCTYPE html>
<html>
<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>06_boostrap之_插件_轮播图</title>
	
	    <!-- Bootstrap --CSS样式 -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		
		 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery-3.2.1.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	  
	  </head>
	<body>
		<div id="carousel-example-generic" 
		 class="carousel slide" data-ride="carousel">
		  <!-- Indicators -->
		  <ol class="carousel-indicators">
		    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
		  </ol>
		
		  <!-- Wrapper for slides -->
		 <div class="carousel-inner" role="listbox">
		     <div class="item active">
		       <img src="img/1.jpg" alt="...">
		       <div class="carousel-caption">
		         ...
		       </div>
		     </div>
		     <div class="item">
		       <img src="img/2.jpg" alt="...">
		       <div class="carousel-caption">
		         ...
		       </div>
		     </div>
			 <div class="item">
			   <img src="img/3.jpg" alt="...">
			   <div class="carousel-caption">
			     ...
			   </div>
			 </div>

		   </div>
		
		  <!-- Controls -->
		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		      <span class="sr-only">Previous</span>
		    </a>
		    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		      <span class="sr-only">Next</span>
		    </a>
		</div>
		
	</body>
</html>

3.4_响应式页面

<!DOCTYPE html>
<html>
<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	    <title>响应式页面</title>
	
	    <!-- Bootstrap --CSS样式 -->
	    <link href="css/bootstrap.min.css" rel="stylesheet">
		
		 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		    <script src="js/jquery-3.2.1.min.js"></script>
		    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		    <script src="js/bootstrap.min.js"></script>
	  
	  </head>
	<body>
		<!-- 
			三个大的div
			第一个div:存放导航条部分
			第二个div:轮播图
			第三个div
				放入一些超链接或者p标签
			
		 -->
		 <div class="container-fluid">
		 <!-- 导航条-->
		 <div class="row">
			 
			 <nav class="navbar navbar-inverse ">
			   <div class="container-fluid">
			     <!-- Brand and toggle get grouped for better mobile display -->
			 	
			     <div class="navbar-header">
			 		<!-- 定义了一个汉堡按钮
			 			随着屏幕分辨率边小的,导航条中间的内容就会隐藏到汉堡按钮下面
			 		 -->
			       <button type="button" class="navbar-toggle collapsed"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
			         <span class="sr-only">Toggle navigation</span>
			         <span class="icon-bar"></span>
			         <span class="icon-bar"></span>
			        <!-- <span class="icon-bar"></span> -->
			       </button>
			       <a class="navbar-brand" href="#">我的首页</a>
			     </div>
			 
			     <!-- Collect the nav links, forms, and other content for toggling -->
			     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
			       <ul class="nav navbar-nav">
			         <li class="active"><a href="#">手机数码 <span class="sr-only">(current)</span></a></li>
			         <li><a href="#">户外商品</a></li>
			       </ul>
			 	  
			 	  <!-- 
			 		导航条样式后面
			 		
			 	   -->
			       <form class="navbar-form navbar-left">
			         <div class="form-group">
			           <input type="text" class="form-control" placeholder="Search">
			         </div>
			         <button type="submit" class="btn btn-default">search</button>
			       </form>
			     </div><!-- /.navbar-collapse -->
			   </div><!-- /.container-fluid -->
			 </nav>
			 
		 </div>
		 
		 <div class="row">
			 
			 <div id="carousel-example-generic"
			  class="carousel slide" data-ride="carousel">
			   <!-- Indicators -->
			   <ol class="carousel-indicators">
			     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
			     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
			   </ol>
			 
			   <!-- Wrapper for slides -->
			  <div class="carousel-inner" role="listbox">
			      <div class="item active">
			        <img src="img/1.jpg" alt="...">
			        <div class="carousel-caption">
			          ...
			        </div>
			      </div>
			      <div class="item">
			        <img src="img/2.jpg" alt="...">
			        <div class="carousel-caption">
			          ...
			        </div>
			      </div>
			 	 <div class="item">
			 	   <img src="img/3.jpg" alt="...">
			 	   <div class="carousel-caption">
			 	     ...
			 	   </div>
			 	 </div>
			 
			    </div>
			 
			   <!-- Controls -->
			   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			       <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			       <span class="sr-only">Previous</span>
			     </a>
			     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			       <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			       <span class="sr-only">Next</span>
			     </a>
			 </div>
		 </div>
		 
		 
		 <div class="row">
			 <!-- 三个div:每一个div
				p标签
				中等屏幕:一行3个格子
				小屏幕:一行6个格子
				大屏幕:12个格子
			 -->
			 <div class="col-md-4 col-sm-2 col-lg-12">
				 <p>非你莫属</p>
				 <a class="btn btn-danger">more</a>
			 </div>	
			 <div class="col-md-4 col-sm-2 col-lg-12">
			 				 <p>非你莫属</p>
			 				 <a class="btn btn-danger">more</a>
			 </div>	
			 <div class="col-md-4 col-sm-2 col-lg-12">
			 				 <p>非你莫属</p>
			 				 <a class="btn btn-danger">more</a>
			 </div>	
			  	
		 </div>
		 
		 </div>
	</body>
</html>

4.关于Servlet+jsp+JDBC:后台管理

4.1用户管理系统

list页面: 展示所有用户列表   

实体类: User类           
数据库:user表
		id
		name
		gender
		age
		address
		qq
		email
		username
		password

index.jsp---->点击查询所有 ---->findAllUserServlet
                            service
                            dao
                            
登录页面
	 用户名
	 
	 密码
	 
	 加入验证码
	 
	  增加用户
	  删除用户
	  修改用户....
	  
	  
	  
	  
1.登录过滤任务

loginFilter
路径:/*

将用户登录的相关资源,排除掉(放行)
   /login.jsp
   /loginServlet
   /checkCodeServlet
   /css
   /js
   /fonts
   /img...
   
   获取http://lcalhost:8080/Admin_Project/index.jsp
   
   过滤器doFilter(ServletRequest/ res,ServletRespons resp,ChainFitler...)
   	//需要将ServletRequest/ServletResponse---->HttpServletRequest,HttpServletResponse
   	rquest.getURI ;-----String uri
   	//进行判断即可是否是上面的这些登录的相关资源
   	   放行
   	   
   	 如果不是登录相关的资源
   	    判断,用户是否登录过,
   	    从session中获取用户---->如果用户不为null,
   	    登录过,放行
   	    如果用户为null
   	    设置登录页面提示"用户还没有登录过"
   	    请求转发到登录页面login.jsp  

4.1_查询所有用户

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.qf.entity.User;
import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;

/**
 * 
 *Title: FindAllUserServlet 
 * Description: 查询所有用户 <  
 */
@WebServlet("/findAllUserServlet")
public class FindAllUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) 
					throws ServletException, IOException {
		
		//调用service
		//创建UserService对象
		UserService userService = new UserServiceImpl() ;
		//调用
		List<User> users = userService.findAll() ;
		
		//user不为空,将users集合数据存储到request域对象中
		if(users!=null) {
			request.setAttribute("users", users);
			//请求转发到list.jsp
			request.getRequestDispatcher("/list.jsp").forward(request, response);
		}
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

4.2_添加用户

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.BeanUtils;

import com.qf.entity.User;
import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;
/**
 * 
 * Title: AddUserServlet  
 * Description:添加用户  
 */
@WebServlet("/addUserServlet")
public class AddUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		//1.手动解决post乱码
		request.setCharacterEncoding("utf-8");
		//2)接收前台参数
		//一次接收一个/接收map集合
		Map<String, String[]> map = request.getParameterMap() ;
		
		//3)封装User对象
		User user = new User() ;
		System.out.println(user);
		
		//4)使用Apache 提供的工具类:commons-beanUtils
		//导入两个jar 
		//一个核心jar包+一个日志记录jar包
		try {
			//将前台输入的参数封装到User对象中
			BeanUtils.populate(user, map);
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (InvocationTargetException e) {
			e.printStackTrace();
		}
		System.out.println(user);
		
		//调用service
		UserService userService = new UserServiceImpl() ;
		userService.addUser(user) ;
		
		//没有业务数据,后台重定向到findAllUserServlet后台
		response.sendRedirect(request.getContextPath()+"/findAllUserServlet") ;
		
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

4.3_登录业务

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.apache.commons.beanutils.BeanUtils;

import com.qf.entity.User;
import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;

/**
 * 
 * <p>Title: LoginServlet</p>  
 * <p>Description: 登录的Servlet</p>  
 */
@WebServlet("/loginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		
		//解决post乱码
		request.setCharacterEncoding("utf-8");
		
		//获取前台用输入的参数
		//获取用户输入的验证码
		String inputCheckCode = request.getParameter("verifycode") ;
		//获取服务器端存储的验证码---session:
		HttpSession session = request.getSession() ;
		String CHECKCODE_SERVER = (String) session.getAttribute("CHECKCODE_SERVER") ;
	
		//比较前台输入的和后端存的验证码
		if(!CHECKCODE_SERVER.equalsIgnoreCase(inputCheckCode)||inputCheckCode ==null ) {
			//提示错误信息
			request.setAttribute("login_msg", "验证码错误!");
			//请求转发到login.jsp
			request.getRequestDispatcher("/login.jsp").forward(request, response);
			return ;
		}
		
		//如果验证码一致
		//获取用户名和密码:这些参数
		Map<String, String[]> map = request.getParameterMap() ;
		//封装User对象
		User user = new User() ;
		
		try {
			BeanUtils.populate(user, map);
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (InvocationTargetException e) {
			e.printStackTrace();
		}
		System.out.println(user);
		
		//调用service
		UserService userService = new UserServiceImpl() ;
		
		User loginUser = userService.login(user) ;
		//判断user是否为null
		if(loginUser!=null) {
			//登录成功
			//存储到session中
			request.getSession().setAttribute("user", loginUser) ;
			//请求转发到index.jsp
			request.getRequestDispatcher("/index.jsp").forward(request, response);
		}else {
			//用户没查询到
			//错误提示信息
			request.setAttribute("login_msg", "用户名或者密码错误!");
			//请求转发到登录页面
			request.getRequestDispatcher("/login.jsp").forward(request, response);
			
		}
		
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		doGet(request, response);
	}

}

4.4_通过id查询用户

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.qf.entity.User;
import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;
/**
 * 通过id查询用户
 * <p>Title: FindUserServlet</p>  
 */
@WebServlet("/findUserServlet")
public class FindUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//1.接收参数
		String id = request.getParameter("id") ;
		
		//2.调用service,通过id查询用户
		UserService userService = new UserServiceImpl() ;
		User user = userService.findUserById(id) ;
		
		//3)判断user不为null
		if(user !=null) {
			//将user对象存储request域中
			request.setAttribute("user", user);
			//请求转发到update.jsp
			request.getRequestDispatcher("/update.jsp").forward(request, response);
			
		}
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

5.后台管理系统

1)查询所有
2)添加用户
      点击添加----->    /addUserServlet
      		通过service:
      				addUser(user)---到dao层:数据库的添加操作
      				
      	   添加完毕,页面跳转:后台地址 查询所有的findAllUserServlt
2)登录功能
       
        管理员输入用户名和密码
        以及验证码(在服务器端:生产4个随机数-----存储session中)
        
        
        loinServlet
        1)获取用户输入的验证码
        2)从sesison中获取服务器端存储的验证码
        3)进行比较,如果当前数据不相等或用户输入的验证码为null
        
          3.1)提示信息
          3.2)请求转发到login.jsp
          
        4)没有问题:验证码验证成功
        接收前台用户名和密码的数据
        封装User对象
           BeanUtils.populate(Object obj,Map map) :参数2:就是前台所有的参数数据
           
         5)调用service :登录查询 login(User user)
         6)获取User loginUser = xxx
         7)判断user是否null
           如果不为null,
               将用户存储在session中 ----->Cookie:name:JESESSIONID
               请求转发到index.jsp中,显示,    "某个管理员名字 ,欢迎您"
               
            为null
                提示,
                请求转发到login.jsp:用户名或者密码错误!
         
         
         
         
         
         serivce--->dao层
        User  findUser(String username,String password)

5.1登录的过滤器

import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 
 * <p>Title: LoginFilter</p>  
 * <p>Description:登录的权限校验 </p>  
 * @author ZhangYang
 * @date 2020年11月26日  
 * @Version 1.0
 */
@WebFilter("/*")
public class LoginFilter implements Filter {

	
	public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
		
		//1)获取请求资源地址的uri
		//过滤任务中request不是---->HtppServletRequest----父接口 ServletRequest
		//将req和resp强制转换为HtppServletRequest/HttpServletResponse
		HttpServletRequest request = (HttpServletRequest) req ;
		HttpServletResponse response = (HttpServletResponse) resp ;
		
		String uri = request.getRequestURI() ;
		//2)判断uri中是否包含登录相关的资源
		//需要将登录相关的资源排除掉,放行
		//login.jsp,/loginServlet,验证码 
		//还需要将登录相关的css,js,图片资源,fonts 资源都放行
		if(uri.contains("/login.jsp") || uri.contains("/loginServlet") 
				|| uri.contains("/checkCodeServlet")
				|| uri.contains("/css") 
				|| uri.contains("/js")
				|| uri.contains("/fonts")) {
			//放行
			chain.doFilter(request, response);
		}else {
			//访问的非登录的资源
			//就需要还要验证用户是否登录
			//用户存储在session中
			Object user = request.getSession().getAttribute("user") ;
			if(user !=null) {
				//登录过了,放行
				chain.doFilter(request, response);
			}else {
				//没有登录,跳转到login.jsp执行登录操作
				//提示信息
				request.setAttribute("login_msg", "用户尚未登录");
				//请求转发到login.jsp
				request.getRequestDispatcher("/login.jsp").forward(request, response);
			}
			
		}
		
	
	}

	public void destroy() {
	}

	public void init(FilterConfig fConfig) throws ServletException {
	}

}

5.2删除用户

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;

/**
 * <p>Title: DelUserServlet</p>  
 * <p>Description:根据id删除某个用户 </p>  
 */
@WebServlet("/delUserServlet")
public class DelUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		
		//${pageContext.request.contextPath }/delUserServlet?id=${u.id}"
		//接收这个前台参数
		String id = request.getParameter("id") ;
		
		
		//调用service:根据用户id删除用户
		UserService userService = new UserServiceImpl() ;
		userService.delUser(id) ;
		
		//重新重定向到查询所有用户列表的后台: 重新查询数据库的最新消息(数据库的压力大:使用缓存技术 后面应用)
		response.sendRedirect(request.getContextPath()+"/findAllUserServlet");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}

}

5.3修改用户

修改用户:
    两个步骤
      1)首先的通过id 查询到用户
          findUserServlet
          
          接收参数
          ----->需要通过用户封装数据
          如果查询servier--dao层:查询user
          将用户对象存储request域中,请求转发update.jsp
          
          ----将用户的信息回显到upate.jsp上面
          
         2)修改样用户的信息----->提交update.jsp----->UpdateUserServlet
         封装业务数据
           调用service
           调用dao层
          		

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.beanutils.BeanUtils;

import com.qf.entity.User;
import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;
/**
 * 
 * <p>Title: UpdateUserServlet</p>  
 * <p>Description:更新用户操作 </p>  
 */

@WebServlet("/updateUserServlet")
public class UpdateUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			
			throws ServletException, IOException {
		//1)post提交乱码中
		request.setCharacterEncoding("utf-8");
		//2)接收参数
		Map<String, String[]> map = request.getParameterMap() ;
		
		//3)封装User对象
		User user = new User() ;
		try {
			BeanUtils.populate(user, map);
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (InvocationTargetException e) {
			e.printStackTrace();
		}
		
		//4)调用service完成更新的操作
		UserService userService = new UserServiceImpl() ;
		userService.updateUser(user) ;
		
		//5)重定向到findAllUserServlet重新查询列表数据
		response.sendRedirect(request.getContextPath()+"/findAllUserServlet");
	}

	
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

5.3删除选中的用户数据

1)前台:完成全选----反选

    只要当前第一个复选框和每一个列的复选框保持的checked状态(选中:true,没有选中:false)
    
2)点击超链接----超链接失效----执行点击事件跳转
   选中删除
     a href="javascript:void(0)" id="delSelected"
     //选中的条目----执行表单提交
       
       
       
  3)后台业务
  
    只需要接收这些用户id编号   String[]  ids=  request.getParamerterValues() ;
    调用service----
         delSelected(String[] ids)
         
       遍历ids
         为了防止:空指针
         if(ids!=nulll && ids.length>0){
             //遍历
             for(String id:ids){
             //调用dao层
             dao.delete(Integer.parseInt(id));
             
            }
             
         }

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;

/**
 * <p>Title: DelSelectedServlet</p>  
 * <p>Description:删除选中的用户操作 </p>  
 */
@WebServlet("/delSelectedServlet")
public class DelSelectedServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		
		//1)接收参数:选中哪些id
		String[] ids = request.getParameterValues("uid") ;
		
		//2)调用service完成 批量删除操作
		UserService userService = new UserServiceImpl() ;
		userService.delSelected(ids) ;
		
		//3)重定向到findAllUserServlet查询下
		response.sendRedirect(request.getContextPath()+"/findAllUserServlet");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

5.4分页查询(高级功能)

import java.io.IOException;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.qf.entity.PageBean;
import com.qf.entity.User;
import com.qf.service.UserService;
import com.qf.service.impl.UserServiceImpl;

import sun.swing.plaf.synth.Paint9Painter;
/**
 * 分页查询的后台
 * <p>Title: FindUserByPageServlet</p>  
 */
@WebServlet("/findUserByPageServlet")
public class FindUserByPageServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		//处理post请求乱码
		request.setCharacterEncoding("utf-8");
		//获取前台用户输入的条件参数
		Map<String, String[]> condition = request.getParameterMap() ;
		
		
		
		//1)接收参数
		//当前页码
		String currentPage = request.getParameter("currentPage") ;
		//每页显示的条数
		String pageSize = request.getParameter("pageSize") ;
		
		//判断
		if(currentPage==null || "".equals(currentPage)) {
			currentPage = "1" ;
		}
		
		if(pageSize ==null || "".equals(pageSize)) {
			pageSize ="5" ;
		}
		
		//2)调用service
		UserService userService = new UserServiceImpl() ;
		//分页查询的方法---服务器端需要给客户端:输出 PageBean
		//PageBean<User> pb = userService.findUserByPage(currentPage,pageSize) ;
		PageBean<User> pb = userService.findUserByPage(currentPage,pageSize,condition) ;
		//System.out.println(pb);
		
		
		//3)需要将分页对象存储到request域中
		request.setAttribute("pb", pb);
		//请求转发到list.jsp上
		request.getRequestDispatcher("/list.jsp").forward(request, response);
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

}

5.5_验证码

import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 验证码
 */
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		
		//服务器通知浏览器不要缓存
		response.setHeader("pragma","no-cache");
		response.setHeader("cache-control","no-cache");
		response.setHeader("expires","0");
		
		//在内存中创建一个长80，宽30的图片，默认黑色背景
		//参数一：长
		//参数二：宽
		//参数三：颜色
		int width = 80;
		int height = 30;
		BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
		
		//获取画笔
		Graphics g = image.getGraphics();
		//设置画笔颜色为灰色
		g.setColor(Color.GRAY);
		//填充图片
		g.fillRect(0,0, width,height);
		
		//产生4个随机验证码，12Ey
		String checkCode = getCheckCode();
		//将验证码放入HttpSession中 //存储在服务器端
		request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
		
		//设置画笔颜色为黄色
		g.setColor(Color.YELLOW);
		//设置字体的小大
		g.setFont(new Font("黑体",Font.BOLD,24));
		//向图片上写入验证码
		g.drawString(checkCode,15,25);
		
		//将内存中的图片输出到浏览器
		//参数一：图片对象
		//参数二：图片的格式，如PNG,JPG,GIF
		//参数三：图片输出到哪里去
		ImageIO.write(image,"PNG",response.getOutputStream());
	}
	/**
	 * 产生4位随机字符串 
	 */
	private String getCheckCode() {
		String base = "0123456789ABCDEFGabcdefg";
		int size = base.length();
		Random r = new Random();
		StringBuffer sb = new StringBuffer();
		for(int i=1;i<=4;i++){
			//产生0到size-1的随机值
			int index = r.nextInt(size);
			//在base字符串中获取下标为index的字符
			char c = base.charAt(index);
			//将c放入到StringBuffer中去
			sb.append(c);
		}
		return sb.toString();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request,response);
	}
}

6._Jquery----js库

//看官网文档
重点掌握的选择器
$("#id属性值").click=function(){
    
}
$(".class属性值")
$("标签名称")

6.1_Jquery入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery入门</title>
		<!-- 
				Jquery---简称"JQ"  ,是一个丰富js工具库!
				特点:
				      write less ,do more :写的少,做的多!
		 
		 
		 使用步骤:
				1)导入Jqury-js库
				2)通过文档---使用jquery的函数
		 -->
		 <script src="js/jquery-3.3.1.min.js"></script>
		 
		 <script>
			 //没有使用jquery之前:
			 //原生Js
			 //给第一个加入一个点击事件
		 	// function init(){
				 //通过id="div1"获取当前标签对象
				/* document.getElementById("input").onclick = function(){
					 alert("触发点击事件") ;
				 } */
				 
			// } 
			 
			 //上面是原生js的方式
			/* function testClick(){
				 var input = document.getElementById("input") ;
				 alert(input) ; //[object HTMLInputElement] 原生js
			 } */
			 
			 
			 //原生js的页面载入事件
			/* window.οnlοad=function(){
				 alert("indow.οnlοad=function事件触发了...") ;
			 } */
			 
			 
			 //开发中:一般情况:如果页面载入事件,使用Jquery,全部Jquery
			 
			//为了简化书写方式:提供js库
			//Jquery的页面载入事件
				$(function(){
					//alert("Jquery的页面载入事件触发了...") ;
					
					//Jquery
					/* $("#input").click(function(){
						
						alert("单击点击事件触发了...");
						
					}) ; */
					var $input = $("#input") ;
					alert($input) ; //[object Object]
					
				}) ;
			 
		 </script>
	</head>
	<!-- <body οnlοad="init()"> -->
	<body>
		
			<input  type="button" id="input" onclick="testClick()" value="点击" />
			<div id="div2" onmouseover="">div2</div>
	</body>
</html>

6.2_Jquery对象和Js对象的相互转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>_Jquery对象和Js对象的相互转换</title>
<!-- 
	引入Js库
	
-->
<script src="js/jquery-3.3.1.min.js"></script>
<script>
		
		
		//js对象----Jq
		/*
		window.onload = function(){
			//原生Js----Jquery对象
			//获取id="d1"div标签对象
			var jsDiv = document.getElementById("d1") ;
			//jsDiv.innerHTML = "aaa" ;
			//jsDiv.html("ccc") ; //原生js对象没有这个函数
			//alert(jsDiv); //[object HTMLDivElement]
			
			//js---Jq: 通过$(原生js对象)---->
			//var $div = $(jsDiv) ;
			$div.html("bbb") ; //获取/设置标签体内容
			
		}
		*/
	   
	   //Jquery对象----原生Js对象
	   //Jq的页面载入事件
	   $(function(){
		   //id="d2"的div标签对象
		   var $div = $("#d2") ; //Jquery对象
		  // alert($div) ;//[object Object]:Jquery对象
		   
		   //html("xxx"):获取文本内容或者设置标体内容
		  // $div.html("goodStudy") ;
		  
		  //将$div对象--转换js对象
		  //get(index):通过索引值获取标签对象---js对象
		  var jsDiv =  $div.get(0) ;
		  jsDiv.innerHTML = "helloJq";
		   
		   
		   //一般开发:如果使用Jquery:定义变量:var $变量名: Jquery的方式
		   
	   }) ;
		
	
</script>
	</head>
	<body>
		
		<div id="d1">div1</div>
		<div id="d2">div2</div>
	</body>
</html>

6.3_Jq基本选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			
			
	 </style>
	 
	 <!-- 
		Jquery的id选择器
				
					引入Jquery的js库
					
					$("#id属性值")  ------$(Jquery的id选择器) :Jq对象
					
					
					id选择器"#id"----保证页面中的id属性值唯一!
					
					
		Jquery的element选择器(标签选择器)  :元素选择器
			$("标签名称")---执行对应函数即可
			
		Jquery的class选择器(类匹配)
			$(".class属性值")
			
			
		Jquery的并集选择器
		 selector1,selector2,selectorN
		 选择器和选择器之间逗号隔开
		 
	 -->
	 
	 <script>
		 
		 //页面载入事件
		 $(function(){//Jquery的入口函数
			 
			 
			 //业务
			 //返回值:jQueryclick(fn)
			 $("#b1").click(function(){
				  //获取id="b1"的input标签对象
				  //改变 id 为 one 的元素的背景色为 红色
				 
				 //选中id="one"的标签
				 //Jquery对象.css("css属性样式",value值) ;
				 $("#one").css("backgroundColor","red") ;
				 
			 }) ;
			
			 
			 //id="b2"的input标签设置点击事件
			 $("#b2").click(function(){
			 	 // 改变元素名为 <div> 的所有元素的背景色为 红色
			 	$("div").css("backgroundColor","pink") ;
			 }) ;
			 
			 
			 //改变 class 为 mini 的所有元素的背景色为 红色
			 $("#b3").click(function(){
				 
				 $(".mini").css("backgroundColor","greenyellow") ;
			 }) ;
			 
			 //改变所有的<span>元素和 id 为 two 的元素的背景色为红色
			 $("#b4").click(function(){
				 
				 $("span,#two").css("backgroundColor","blue") ;
				 
			 }) ;
			 
		 }) ;
	 
	 </script>
	
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value="改变 id 为 one 的元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为红色"  id="b4"/>
		
 
		 <h1>Good Good Study,Day Day Up</h1>
		 
		 
	    <div id="one">
	    	 id为one       
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		 </div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		

		<span class="spanone">class为spanone的span元素</span>
		<span class="mini">class为mini的span元素</span>
		

		<input type="text" value="zhang" id="username" name="username">
	
	</body>
	
	
	
</html>

6.4_Jq层次选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>层次选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
	 </style>
	 
	 
	 <script>
		 /**
		  * 层级选择器:
		  * 		常用:后代选择器
		  *          选中父标签的所有的子标签 
		  * 		selecto1 selector2
		  * body内有的div
		  * $("body div")
		  * 
		  * 子元素选择器
		  * parent > child
		  * 
		  */
		 //改变 <body> 内所有 <div> 的背景色为红色
		 $(function(){
			 
			 $("#b1").click(function(){
				$("body div").css("backgroundColor","red") ; 
			 });
			 
			 //改变 <body> 内子 <div> 的背景色为 红色"
			 $("#b2").click(function(){
				 
				 $("body > div").css("backgroundColor","red") ;
				 
				 
			 }) ;
		 }) ;
	 </script>
    
   
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变 <body> 内所有 <div> 的背景色为红色"  id="b1"/>
		 <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 红色"  id="b2"/>
		
 
		 <h1>Good Good Study,Day Day Up!</h1>
		 
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one">
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		
		<span class="spanone">    span
		</span>
		
	</body>
	
	
</html>

6.5_Jq过滤选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>基本过滤选择器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script  src="js/jquery-3.3.1.min.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 180px;
			    height: 180px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div .mini01{
			    width: 50px;
			    height: 50px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
	 </style>
	<script>
		/**
		 * 基本的过滤选择器
		 * 		:first:获取第一个元素
		 * 		:not(selector):去除相关匹配的元素 (不是...)
		 * 		:even:匹配偶数的元素
		 * 		:odd 匹配的奇数元素
		 *      :eq(index):匹配等于 (索引值:从0计数)
		 * 		:gt(index):匹配大于给定元素的索引值
		 * 		:lt(index):匹配所有小于给定索引值的元素
		 * 		:last():最后一个元素
		 * 		:header:匹配所有的诸如:h1,h2,h3....标题元素
		 * 		
		 */
		$(function(){
			$("#b1").click(function(){
				
				// 改变第一个 div 元素的背景色为 红色"
				$("div:first").css("backgroundColor","red") ;
				
			}) ;
			//改变最后一个 div 元素的背景色为 红色
		$("#b2").click(function(){
			
			// 改变第一个 div 元素的背景色为 红色"
			$("div:last").css("backgroundColor","blue") ;
			
		}) ;
			
			//改变class不为 one 的所有 div 元素的背景色为 红色
			$("#b3").click(function(){
				
				// 改变第一个 div 元素的背景色为 红色"
				$("div:not(.one)").css("backgroundColor","blue") ;
				
			}) ;
			
			//改变索引值为偶数的 div 元素的背景色为 红色
			$("#b4").click(function(){
				
				// 改变第一个 div 元素的背景色为 红色"
				$("div:even").css("backgroundColor","red") ;
				
			}) ;
			
			//改变索引值为奇数的 div 元素的背景色为 红色
			$("#b5").click(function(){
				
				// 改变第一个 div 元素的背景色为 红色"
				$("div:odd").css("backgroundColor","green") ;
				
			}) ;
			//改变索引值为等于 3 的 div 元素的背景色为 红色
			$("#b7").click(function(){
				
				// 改变第一个 div 元素的背景色为 红色"
				$("div:eq(3)").css("backgroundColor","green") ;
				
			}) ;
			
			// 改变所有的标题元素的背景色为 红色
			$("#b9").click(function(){
				
				// 改变第一个 div 元素的背景色为 红色"
				$(":header").css("backgroundColor","green") ;
				
			}) ;
			
		}) ;
		
		
	</script>

	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 改变第一个 div 元素的背景色为 红色"  id="b1"/>
		 <input type="button" value=" 改变最后一个 div 元素的背景色为 红色"  id="b2"/>
		 <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 红色"  id="b3"/>
		 <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 红色"  id="b4"/>
		 <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 红色"  id="b5"/>
		 <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 红色"  id="b6"/>
		 <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 红色"  id="b7"/>
		 <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 红色"  id="b8"/>
		 <input type="button" value=" 改变所有的标题元素的背景色为 红色"  id="b9"/>
		 
		
		 <h1>Good Good Study,Day Day Up!</h1>
		 
	     <div id="one">
	    	 id为one  
		     
		 </div>
		
		 <div id="two" class="mini" >
	    	   id为two   class是 mini 
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="one" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" >
		 	  class是 one 
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
	
	</body>
   
</html>