代码拉取完成,页面将自动刷新
后端只实现数据库数据向前端传输与接收前端数据并写进数据库的功能。
其他事件由前端进行实现。
购物车页面功能:
1.实现将在商品详情页面添加到购物车的物品信息从相应的数据库中调出,显示到购物车页面中。
2.添加物品增减功能,实现对于已经加入购物车的商品数量进行修改,并同时修改数据库中购物车中的相应信息。
3.增减物品选择功能,为相应的商品记录增加选择框,实现在支付时对于商品的部分选择支付,增加全选功能,实现对于商品的全部选择支付。
4.商品价格计算功能,通过添加到购物车的产品的数量与单价计算每项产品的总价格与选中的各项产品的总价格。
5.点击去支付按钮完成向支付界面的跳转。
功能实现过程:
1.
通过
{% for cart in carts %}
{% endfor %}
实现根据后端传输过来的购物车中的数据项动态的生成购物车中商品记录。将后端传输过来的数据显示在相应的位置。
后端传递的数据
cart{
id//产品编号,将其作为各项产品的id以进行不同产品的区分。
goods{
gtitle//产品名称
gpic//产品图片
gprice//产品单价
gunit//产品单位
gkucun//产品库存
}
count//产品数量
}
2.
为购物车记录添加数量变化按钮,并为其添加点击响应函数,实现对于已选择产品购买数量的改变。每次点击按钮后使其失去焦点,并通过为失去焦点事件函数通过ajax将改变后的产品信息(改变后的产品id与产品数量)传递到后端,由后端实现对于数据库中相应信息的的修改。
为删除编写函数,点击删除时,将删除商品的id传递到后端,根据传递商品的id实现对于数据库中信息的删除。
3.
增加函数实现将全选按钮与各项记录选择按钮相连,当点击全选按钮时触发点击事件将其他所有记录按钮都标记为选中状态。
4.
编写total函数实现将所有选中的记录的价格进行累加,计算出购物车选中商品的总价格。该函数由其他函数如(改变产品数量点击函数、产品选择状态点击函数)调用,实现动态计算产品总价格。
支付页面功能:
实现对于购物车中选中商品的支付功能。
实现过程:
1.
通过调用由后端传递到前端的用户信息,再支付界面显示用户地址、电话等用户信息。
2.
添加不同的支付方式,以支持不同形式的支付。
3.
将数据库中的购物车表信息由后端传递到前端并进行显示,此过程与购物车界面类似,只是不需要添加选择或数量修改功能,只需进行显示。
4.
为提交订单按钮添加响应函数,实现将订单信息通过post请求发送到后端,在函数中需要对于用户地址等信息进行判断是否填写,若未填写则提醒用户填写相应地址并跳转到相应的用户页面进行填写。
5.
若支付成功则通过post传递订单信息与订单提交时间、订单号到后端,将信息保存在用户订单数据库表中。
订单信息页面功能:
实现对于用户提交订单的显示。
实现过程:
后端传递数据库中订单数据表中信息到前端,通过
{% for orderinfo in page %}
{% endfor %}
进行对于不同时间提交的订单数据显示
并通过
{% for order_detail in orderinfo.orderdetailinfo_set.all %}
{% endfor %}
循环在每一个订单中对于订单中的商品数据进行显示
前端接收后端传递数据的结构:
orderinfo{
orderinfo.odate//订单提交时间
orderinfo.oid//订单号
orderdetailinfo_set{//单次订单
goods{
gtitle//商品名称
gpic//商品图片
gprice//商品价格
gunit//商品单位
}
count产品数量
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。