zoukankan      html  css  js  c++  java
  • 购物车工程

    概述:

    购物车是一个独立的表现层工程(因为购物车里面的商品信息,我们可以通过manager服务来获取。)

    1、添加购物车时不需要登录。可以指定购买商品的数量。

      在未登录的情况下,把购物车信息写入到cookie中,如果清空了cookie也就清空了购物车。

      把购物车信息写入cookie的优点:不占用服务端资源、用户体验好、代码实现简单

      缺点:cookie中保存的容量是有限的,最大为4K;把购物车信息保存在cookie中,更换设备时购物车信息不能同步。

    业务逻辑:

      1、从cookie中查询商品列表

      2、判断商品在商品列表中是否存在

      3、如果存在,商品数量相加

      4、不存在,根据商品id查询商品信息

      5、把商品添加到购物车列表

      6、把购物车列表写入cookie

    2、展示购物车列表页面。

      (1)从cookie中取出购物车列表

      (2)把购物车列表传递给cart.jsp页面

      (3)返回逻辑视图

    3、修改购物车商品数量

      修改商品数量的同时还要修改商品总价格以及修改cookie中的信息。

    js代码

    $(".increment").click(function(){//
        var _thisInput = $(this).siblings("input");
        _thisInput.val(eval(_thisInput.val()) + 1);
        $.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val() + ".action",function(data){
            TTCart.refreshTotalPrice();
        });
    });
    $(".decrement").click(function(){//-
        var _thisInput = $(this).siblings("input");
        if(eval(_thisInput.val()) == 1){
            return ;
        }
        _thisInput.val(eval(_thisInput.val()) - 1);
        $.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val() + ".action",function(data){
            TTCart.refreshTotalPrice();
        });
    });
    • $(".increment").click(function(){的意思很明显是给class为”increment”的那个”+”号按钮绑定了一个事件。
    • var _thisInput = $(this).siblings("input");这句代码的意思是,$(this)是把”+”这个<a>标签转换成jQuery对象,因为只有转成jQuery对象才能使用它的方法,$(this).siblings("input");的意思是找到兄弟节点中是<input>的标签。
    • _thisInput.val(eval(_thisInput.val()) + 1);这句代码的意思是找到input标签后,将数字加1。
    • $.post("/cart/update/num/"+_thisInput.attr("itemId")+"/"+_thisInput.val() + ".action",function(data){这句代码的意思是,点击”+”会向服务端发送post请求,请求的url的形式是:/cart/update/num/{itemId}/{num}.action,这里需要注意的是,url的结尾不能是.html,如果请求的url是以”.html”结尾的话,但服务端现在响应的是一个json,json就不是html,所以这个时候就是有问题的,在SpringMVC中如果请求的后缀是.html,这时必须给它响应一个字符串,如果响应的是一个json,那么这个时候就会报406错误。

     业务逻辑:

      (1)取购物车列表

      (2)遍历商品列表找到商品

      (3)更新商品数量

      (4)将更新后的商品列表写入cookie

      (5)返回结果。

    4、删除购物车商品

      删除商品的url域购物车列表的url不一致,但是点击删除链接后页面应该仍然在当前页面,此时就可以在Controller类的方法中指定删除商品的url,处理完逻辑后重定向到我们的购物车列表页面,这样就好像页面一直在当前页面一样。

      业务逻辑:

    1.  从url中取商品id
    2.  从cookie中取购物车商品列表
    3.   遍历列表找到对应的商品
    4.   删除商品
    5.   把商品列表写入cookie
    6.   返回逻辑视图:在逻辑视图中做重定向跳转

     

    改进的购物车功能:

      1. 要求用户登录。
      2. 把购物车商品列表保存到数据库中。推荐使用Redis。
      3. 如果存到Redis的话,key最好用用户的ID,value便是购物车中商品列表。在Redis中存储有五种存储方式,我们比较适合使用hash方式,规定一个hash,然后key是商品ID,value是商品基本信息。这样做的好处是存储的内容不是很长,效率比较高。
      4. 在用户未登录的情况下写入cookie当中,当用户登录后,访问购物车列表时 
        如果用户是登录状态,展示购物车列表时以Redis为准。如果未登录,以cookie为准
        • a) 把cookie中的数据同步到Redis
        • b) 把cookie中的数据删除
        • c) 展示购物车列表时以Redis为准
        • d) 如果Redis中有数据cookie中也有数据,那么需要做数据合并,即相同商品数量相加,不同商品添加一个新商品
  • 相关阅读:
    git 从创建到推送到远程,到拉取,实操
    《React后台管理系统实战 :三》header组件:页面排版、天气请求接口及页面调用、时间格式化及使用定时器、退出函数
    《React后台管理系统实战 :一》:目录结构、引入antd、引入路由、写login页面、使用antd的form登录组件、form前台验证、高阶函数/组件
    《React后台管理系统实战 :二》antd左导航:cmd批量创建子/目录、用antd进行页面布局、分离左导航为单独组件、子路由、动态写左导航、css样式相对陷阱
    《React后台管理系统实战 :四》产品分类管理页:添加产品分类、修改(更新)产品分类
    go的变量与常量
    Go 语言最简单程序的结构
    go的安装与测试
    java
    go语言
  • 原文地址:https://www.cnblogs.com/xiaoxli/p/9635447.html
Copyright © 2011-2022 走看看