JavaWeb11-HTML篇笔记

1.1 案例三：将商品添加到购物车:1.1.1 需求:
查看某个商品详情的时候,添加到购物车.需要将商品添加到购物车.

1.1.2 分析:1.1.2.1 技术分析:
【Session的概述】
Cookie本身是有大小和个数的限制.Session没有限制.Cookie的数据保存在客户端,Session数据保存在服务器端.
Ø Session的执行原理：基于Cookie的.
Ø 使用Session:

• 获得Session:

  • request.getSession();
    1.1.2.2 步骤分析:
    【步骤一】：点击加入购物车提交到Servlet
    【步骤二】：在Servlet将购物的商品存入到Session中.
    【步骤三】：可以创建一个Map集合用于保存购物信息Map的key可以是商品的名称,Map的value是数量.
    【步骤四】：在购物车页面中显示Map中的数据就可以.
    1.1.3 代码实现:

    public class CartServlet extends HttpServlet {private static final long serialVersionUID = 1L;protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // 接收商品名称:        String name = new String(request.getParameter("name").getBytes("ISO-8859-1"),"UTF-8");        // 创建Map集合用于保存购物信息.Map<String,Integer> Map的key是商品的名称 value是购买的数量.        Map<String,Integer> map = (Map<String, Integer>) request.getSession().getAttribute("cart");        if(map == null){                map = new LinkedHashMap<String,Integer>();        }        // 判断购物车中是否已经买了该商品.        if(map.containsKey(name)){                // map中已经有该商品:// * 如果购物车中已经有该商品: 获得到Map中该商品的数量+1。 存回到Map集合中.                Integer count = map.get(name);                count++;                map.put(name, count);        }else{                // map中没有该商品.// * 如果购物车中没有改商品: 将商品添加到Map集合中 数量1.                map.put(name, 1);        }        // * 将Map集合保存到session中.        request.getSession().setAttribute("cart", map);        response.setContentType("text/html;charset=UTF-8");        response.getWriter().println("<h3><a href='/day11/demo2/product_list.jsp'>继续购物</a> | <a href='/day11/demo2/cart.jsp'>去结算</a></h3>");}

    1.1.4 总结:1.1.4.1 Session是域对象:
    session何时创建和销毁?作用范围:

• 创建:服务器端第一次调用getSession()创建session.

• 销毁:三种情况销毁session:

  • 1.session过期. 默认过期时间为30分钟.

  • 2.非正常关闭服务器.如果正常关闭session序列化到硬盘.

  • 3.手动调用session.invalidate();

• 作用范围:多次请求.(一次会话)
  1.2 案例四：进行一次性验证码的校验1.2.1 需求：
  在登录的页面中，需要有一个验证码的校验.
  
  1.2.2 分析：1.2.2.1 技术分析：
  使用session保存生产的验证码.
  1.2.2.2 步骤分析:
  【步骤一】：生成验证码,将生成验证码的随机的4个字母或数字保存到session中.
  【步骤二】：在页面中输入验证码值,点提交.
  【步骤三】：在Servlet中从表单中获得验证码从session中获得一个验证码.
  【步骤四】：比对两个验证码值是否一致.
  【步骤五】：将session中保存的验证码清空.
  1.2.3 代码实现:

  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {            // 校验验证码程序:            String code1 = request.getParameter("code");            String code2 = (String) request.getSession().getAttribute("code");            request.getSession().removeAttribute("code");            if(!code1.equalsIgnoreCase(code2)){                    request.setAttribute("msg", "验证码输入错误！");                    request.getRequestDispatcher("/demo2/login.jsp").forward(request, response);                    return ;            }...}1.2.4 总结:1.2.4.1 使用JS控制图片切换:<script type="text/javascript">    function changeImg(){            document.getElementById("img1").class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/day11/CheckImgServlet?time="+new Date().getTime();    }</script>