• 阶段一-02.分类,推荐,搜索,评价,购物车开发-第5章 购物车功能开发-5-2 购物车


    前期我们是单体项目,所以采用cookie,等讲完redis相关的课程后,我们再把涉及到redis的地方整合到项目里面去。包括会话和现在所涉及到的购物车。在编写相应的代码之前,我们先来参考下京东。我们随便找一个商品把它加入到购物车。

    打开购物车结算页面

    F12浏览器,这里把cookie都clear掉



    清除以后,刷新购物车的页面

    前端代码展示

    目前前端所包含的脚本代码





    这里我们限制了购物车的数量,如果超过了8件就提示




    购买的数量的双向绑定。就是buyCount




    构建购物车的商品对象

    生产环境的演示。预先放了一个购物车在这里


    把商品添加到购物车里面。

    购物车的结构,本身就是一个jsonList


    如果foodieShopcart不是一个对象就默认设置成一个空的数据对象。

    判断当前这个商品是不是已经包含在购物车里面了。 

    最后把新的购物车的数据覆盖本地的cookie



    添加到购物车后有个alert弹窗,当点击确定后会刷新右侧的的购物车的数量。

    购物车的数量变成了2.


    就是获取购物车的数量,重新覆盖本地的数值。数量是通过vue的双向绑定。

    这里是把购物车的数据保存到后端的redis里 的 ,现在我们没有redis,但是后端的接口还是需要先写好的。防止前端代码报错。

    后端Controller创建


    传递进来一个ShopcartBO的对象,

    创建BO对象

    快速生成get和set

    后端方法设计到cookie。那么就会用到request对象。


    完善方法体

    登陆后后端的接口要判断相应的权限等等,那么这个权限又和redis,分布式会话有关,并且还涉及到拦截器。这些内容我们都会在分布式缓存里面所涉及到。


    在代码编辑器的下方

    点开会找到项目里面所有的TODO,就可以回顾一下,完善一下以前写过的代码。

    双击后会自动的跳转到这里

    这里我们先把TODO完善一下

    最终我们返回一个ok就可以 了

    前端的代码判断后端返回的数据是不是200就可以了。并没有做其他的操作。它只是做了一个异步的同步数据的操作。

    完善用户登陆的TODO


    注册也有TOD

    测试

    在ShopcartBO里面生成toString



    直接打印前端传递过来的BO对象

    maven install

    因为我们涉及到了pojo这个工程,所以需要重新 install一下。

    重启服务器测试

    先登陆

    打开商品详情页,cookie里面 ,现在有一个shopart这样一个cookie

    点击加入购物车

    右侧的购物车数量发生了变化

    后端console的输出

    前端是在这里调用后端服务的。传递了shopcartItem这个对象。


     

    结束

  • 相关阅读:
    Android开发之EditText属性详解
    android开发如何在页面之间传参
    jquery中attr和prop的区别
    Laravel 5.2--改变数据库字段值,编辑时候,默认选中
    Laravel 5.2--git冲突error: Your local changes to the following files would be overwritten by merge:
    Laravel 5.2--如何让表单提交错误,不清空?
    Apache 和 Tomcat联系和区别
    mac 上如何安装非app store上的下载的软件-------打开未知来源
    &#65279导致页面顶部空白一行解决方法
    面向对象设计的三个基本特征
  • 原文地址:https://www.cnblogs.com/wangjunwei/p/12353002.html
Copyright © 2020-2023  润新知