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

在框架上搭好基本的页面

4. 购物车页面

4.3 购物车cart页面

4.3.3 购物车中商品的选择,删除及价格的结算

4.3.3.1 购物车中商品的删除

先看一下页面

写一下js样式

去写一下视图函数

同样需要配置一下url

可以去浏览去查看一下,点击删除

还可以实时查看事件的过程,可以看到li标签里的内容逐渐减少

还可以去确认一下数据库中的数据,是否删除.

4.3.3.2 购物车中商品的勾选

先搞定单个商品的勾选

写一下js样式

写一下视图函数

配置一下路由

去浏览器操作一下

查看一下数据库

全选功能

在cart.html页面给全选的 √ 加一个id,

写一下js样式

点击全选按键时,全选的按键是要根据商品的√的数量才能对商品的√做出相应的改变
可以联系一下淘宝,只要商品中有一个没有勾上 √的,点击全选的时候,就会把全部 √选上;
如果商品全部选上了 √,只要再点击一次全选,就把全部 √去掉,全选的 √也没有

要根据每一次对商品 打✔ 的时候判断全选按钮的状态,修改一下对商品打勾的函数,让它每次运行的时候调用一下核对全选的函数
当全选的时候,商品的√ 全部都打上,修改一下js

全选和打勾的js样式实现了相应的功能
写一下视图函数

配置路由

在浏览器中看一下效果,
在数据库中看一下数据是否正确

4.3 3.3 价格的结算

总价: 每个商品的价格 x 数量

为了数据的安全,价格结算时,前端要计算价格,前端的计算是显示出来供查看的.但前端的数据不安全,为了避免被恶意篡改,后端也需要计算价格,如果前端返回的数据和后端的一致,说明数据准确,可以提交订单

写一下js样式

当打勾,全选,删除的时候,都要去运行一下这个计算的函数



查看一下浏览器,是否计算正确

文件链接
链接：https://pan.baidu.com/s/1Pr1OpuBVyOsSqedZSREYdQ
提取码：jvzg