Django之爱鲜蜂项目开发 day05(一)

在框架上搭好基本的页面

4. 购物车页面添加商品

可以联想一些在app上购物流程,
先在商品页添加到购物车,

然后从购物车结算,

考虑一下这其中有哪些步骤,有哪些模块,该怎么去实现这些功能

4.1表的关联

商品,购物车,用户之间,可以转换为表的关联,购物车相当于中间表的角色,用户和商品之间成为多对多的关系

首先去models.py文件下写一下购物车的模型

外键关联到用户和商品,采用级联删除,当购物车中删除的时候,用户也删除相关信息

做一下数据迁移,在数据库中创建关于购物车的表

4.2 商品id,数量num

(小技巧,浏览网页时,可以去查看前端的代码)

当点击购物车的时候,发起了一个Ajax请求,通过js样式,把good_id ,num 在后台把用户进行关联

4.2.1取到id和num

首先在闪购页面market.html,
当点击添加到购物车按键时,把商品的id放在这个按钮上

写一下闪购页面market.html,这里报红并没有关系

然后写一下market.js,当点击加入购物车的时候,添加一个点击事件,测试这个点击能不能使用,可以先
console.log(1);打印一下,

当点击的时候,取到button按键上的属性,得到goodsid,可以查看是否成功(打印一下,在浏览器的控制台上显示出来)

同样的方式,还需要取到商品的数量num,这个num在 section 下的 span标签内

prev表示前一个标签.也就是 section 标签,然后找到它的子标签 span

在浏览器的控制台下看一下

这里的num现在还是固定的1,接下来通过 + , - 两个按键改变一下数量
给这两个按键添加一下class 样式

然后去写一下js样式

看一下效果

4.2.2 将商品id和num传到后台

上面的步骤已经取到了商品的id和num,接下来使用Ajax传到后台

先将数据传到 /axf/add_to_cart/ (等下要写一个视图函数)
function (data) 是一个回调函数
作用是当Ajax请求发起后,在后台接受到请求后,会主动调用这个函数,把数据放到 data 里

写一个视图函数
这里因为是Ajax请求,所以返回Jason的形式比较好

首先判断一下请求方式,如果请求方式不对,把状态码status改成**-2**,显示msg为request error,
然后判断一下是否登陆,如果没有userid,把状态码status改成**-1**,显示msg为not login or login with error,

根据id查询用户判断用户是否存在,这里是为了预防万一session被修改,或数据库出了问题,所以这里再判断一下

将数据添加到购物车这个视图函数就完成了

写一下url

去浏览器查看一下

看一下数据库中,是否成功

然而,现在存在一个问题
如果同一个商品,点击 添加购物车两次,商品的个数并不会叠加,而是重复一条商品的记录

所以在视图函数中需要修改一下,然后把叠加后的数量返回到浏览器上

查看一下浏览器,本来数量为2,加4后为6

然后写一下js,添加购物车成功,显示一个弹框,如果失败(没有登陆时没有用户,不会显示购物车页面),跳转到登录页

查看一下浏览器是否有弹框