zoukankan      html  css  js  c++  java
  • pythondjango框架电商项目购物车模块开发_20191125

    python-django框架-电商项目-购物车模块开发

    商品详情页js代码:

    • 在商品详情页,有加入购物车按钮,
    • 点击加减号可以增加减少,手动输入也可以,
    • 点击加入购物车,就要加过去,
    • 先实现加减的操作,这个使用js操作,
    • 实现几个功能:
    • 1,计算总价
    • 2,增加按钮
    • 3,减少按钮
    • 4,输入失去焦点的校验,

    购物车记录添加后台:

    • 我添加购物车之后,是不刷新页面的,所以怎么办?
    • 可以使用ajax,
    • 传递的参数:商品id和商品数量,cart_1:{1:2,2:3}
    • 这是三种前端传参的方式:
    • 使用get还是post传参:
    • 1,get传参数:/cart/add/?sku_id=1&count=3
    • 2,post传参数:{sku_id:1,count:3}
    • 3,还可以使用url传参数:url配置捕获参数,
    • 我们使用ajax我们用哪种方式,如果涉及到数据的修改,包括新增,更新,删除,我们要采用post,如果只涉及到获取,我们就采用get,所以要使用post,
    • #
    • 我们添加购物车的视图,
    • 1,注意数据的接收,
    • 2,注意数据的校验
    • 3,注意数据的处理,购物车的数据是放入redis存储的,
    • 4,注意数据的应答,

    购物车记录添加前端js,

    • 我们视图已经写完了,
    • 现在前端要通过ajax的post来传数据到后端,
    • 发送的内容是获取商品的商品的id,商品的数量,

    总结:

    • 添加购物车记录要登陆
    • ajax发起的请求,都在后台,在浏览器是看不到效果的,所以点击添加购物车,不能直接就是跳转到登录页了 ,因为ajax是局部刷新的,
    • 所以我们做一个判断,告诉他要登陆,让他自己去登陆页面,
    • 开发的时候前端开发前端的,后端开发后端的,
    • 你添加购物的时候,
    • 确定几个事情,
    • 1,前端是否需要传数据,传什么数据,什么样的格式,
    • 2,采用什么方式传,get,post
    • 3,后端需要确定传给前端的的数据,数据的格式,
    • 这些都是需要确定的,前后端配合, 

    购物车页面显示:

    • 点击右上角的购物车图标之后,要调到购物车页面,
    • 需要一个购物车的html页面,
    • 后端需要一个视图,
    •  动态增加属性?这个用法要研究一下,

    购物车页面js操作:

    • 全选,全不选,商品的选中和不选中
    • 商品的总价和件数,需要重新计算,
    • 商品的选中和不选中,需要改变全选的按钮,单个商品都选中了,全选就选中了,

    购物车记录更新,后端的数目更新:

    • 增加,减少,删除都是在更新数据库的记录,要和后台做交互,
    • 点击+号,页面不跳转,采用ajax  post请求,
    • 前端需要传递传递,商品的id,商品的数量,去redis中更新,
    • 后端新建一个更新的视图函数
    • 做几个事情,
    • 1,接收数据,
    • 2,校验数据
    • 3,处理数据,
    • 4,返回应答,
    • 和新增数据的逻辑基本差不多,核心的是数据的处理部分,
    • 注意更新的时候,需要校验库存,否则会有问题,

    购物车记录更新,前端的数目更新:

    • 点击+号,数量的展示就要+1,并且需要往后端发请求,
    • 整个的页面充满了js的操作,

    购物车记录的删除,后端操作:

    • 点击删除,页面不跳转,采用ajax  post请求,
    • 做几个事情,
    • 1,接收数据,
    • 2,校验数据
    • 3,处理数据,
    • 4,返回应答,

    购物车记录的删除,前端操作:

    • 点击操作,在页面删除,向后端发送请求,

    总结:

    • 这个页面的js非常的经典,后续学习js的时候好好体会,
  • 相关阅读:
    nginx 配置 开发
    导入excel 数据到mysql出现的时间格式
    gradle 集成到myeclipse
    多线程同步和异步的方式
    谈一下spring 的理解
    java 中的反射
    Sublime Text 下配置python
    Python元组的简单介绍
    Python中strip()函数
    Python中的repr()函数
  • 原文地址:https://www.cnblogs.com/andy0816/p/11928098.html
Copyright © 2011-2022 走看看