day52-Django项目-天天生鲜

一、商品详情模块

1.在urls.py文件中定义路由

from django.conf.urls import url, include

from goods import views

urlpatterns = [
    # 首页
    url(r'index/', views.index, name='index'),
    # 商品详情
    url(r'^detail/(\d+)/', views.detail, name='detail'),
]

2.查看商品详情功能

def detail(request, id):
    if request.method == 'GET':
        goods = Goods.objects.get(pk=id)
        return render(request, 'detail.html', {'goods': goods})

3.detail.html

{% extends 'base_main.html' %}

{% block title %}
    天天生鲜-商品详情
{% endblock %}

{% block search %}
    {% load  static %}
    <div class="search_bar clearfix">
        <a href="{% url 'goods:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a>
        <div class="search_con fl">
            <input type="text" class="input_text fl" name="" placeholder="搜索商品">
            <input type="button" class="input_btn fr" name="" value="搜索">
        </div>
        <div class="guest_cart fr">
            <a href="{% url 'carts:cart' %}" class="cart_name fl">我的购物车</a>
            <div class="goods_count fl" id="show_count">0</div>
        </div>
    </div>
{% endblock %}

{% block content %}
    <div class="navbar_con">
        <div class="navbar clearfix">
            <div class="subnav_con fl">
                <h1>全部商品分类</h1>
                <span></span>
                <ul class="subnav">
                    <li><a href="#" class="fruit">新鲜水果</a></li>
                    <li><a href="#" class="seafood">海鲜水产</a></li>
                    <li><a href="#" class="meet">猪牛羊肉</a></li>
                    <li><a href="#" class="egg">禽类蛋品</a></li>
                    <li><a href="#" class="vegetables">新鲜蔬菜</a></li>
                    <li><a href="#" class="ice">速冻食品</a></li>
                </ul>
            </div>
            <ul class="navlist fl">
                <li><a href="">首页</a></li>
                <li class="interval">|</li>
                <li><a href="">手机生鲜</a></li>
                <li class="interval">|</li>
                <li><a href="">抽奖</a></li>
            </ul>
        </div>
    </div>

    <div class="breadcrumb">
        <a href="#">全部分类</a>
        <span>></span>
        <a href="#">新鲜水果</a>
        <span>></span>
        <a href="#">商品详情</a>
    </div>

    <div class="goods_detail_con clearfix">
        <div class="goods_detail_pic fl"><img src="/media/{{ goods.goods_front_image }}"></div>

        <div class="goods_detail_list fr">
            <h3>{{ goods.name }}</h3>
            <p>{{ goods.goods_brief }}</p>
            <div class="prize_bar">
                <span class="show_pirze">¥<em>{{ goods.shop_price }}</em></span>
                <span class="show_unit">单  位：500g</span>
            </div>
            <div class="goods_num clearfix">
                <div class="num_name fl">数 量：</div>
                <div class="num_add fl">
                    <input type="text" class="num_show fl" value="1" onblur="change_val({{ goods.goods_nums }})">
                    <a href="javascript:;" class="add fr" onclick="add_cart({{ goods.goods_nums }})">+</a>
                    <a href="javascript:;" class="minus fr" onclick="sub_cart()">-</a>
                </div> 
            </div>
            <div class="total">总价：<em>{{ goods.shop_price }} 元</em></div>
            <div class="operate_btn">
                <a href="javascript:;" class="buy_btn">立即购买</a>
                <a href="javascript:;" class="add_cart" id="add_cart" onclick="add_to_cart({{ goods.id }})">加入购物车</a>
            </div>
        </div>
    </div>

    <div class="main_wrap clearfix">
        <div class="l_wrap fl clearfix">
            <div class="new_goods">
                <h3>新品推荐</h3>
                <ul>
                    <li>
                        <a href="#"><img src="{% static 'images/goods/goods001.jpg' %}"></a>
                        <h4><a href="#">进口柠檬</a></h4>
                        <div class="prize">￥3.90</div>
                    </li>
                    <li>
                        <a href="#"><img src="{% static 'images/goods/goods002.jpg' %}"></a>
                        <h4><a href="#">玫瑰香葡萄</a></h4>
                        <div class="prize">￥16.80</div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="r_wrap fr clearfix">
            <ul class="detail_tab clearfix">
                <li class="active">商品介绍</li>
                <li>评论</li>
            </ul>

            <div class="tab_content">
                <dl>
                    <dt>商品详情：</dt>
                    <dd>{{ goods.goods_desc | safe }}</dd>
                </dl>
            </div>

        </div>
    </div>
{% endblock %}

二、添加商品到购物车模块

1.在urls.py文件中定义路由

from django.conf.urls import url, include

from carts import views

urlpatterns = [
    # 购物车页面
    url(r'^cart/', views.cart, name='cart'),
    # 加入购物车
    url(r'^add_cart/', views.add_cart, name='add_cart'),
]

2.添加商品到购物车功能

from django.http import JsonResponse
from django.shortcuts import render


def cart(request):
    if request.method == 'GET':
        return render(request, 'cart.html')


def add_cart(request):
    if request.method == 'GET':
        session_goods = request.session.get('goods')
        goods_count = len(session_goods)
        return JsonResponse({'code': 200, 'msg': '请求成功', 'goods_count': goods_count})

    if request.method == 'POST':
        # 保存到session中
        # 1.获取前端ajax提交的商品goods_id，商品数量nums
        # 2.组装存储到session中的数据结构
        # [[goods_id, nums, is_select], [goods_id, nums, is_select]...]
        # 3.如果加入到session中的商品已经存在于session中，则更新nums字段
        goods_id = int(request.POST.get('goods_id'))
        nums = int(request.POST.get('nums'))
        # 组装存储的结构：[商品id值，商品数量，商品选择状态]
        goods_list = [int(goods_id), int(nums), 1]
        # 判断session中是否保存了购物车数据：{'goods': [[id, nums, 1], [id, nums, 1]]
        session_goods = request.session.get('goods')
        if session_goods:
            # 添加或者修改
            flag = False
            for goods in session_goods:
                # goods为[goods_id, nums, is_select]
                if goods[0] == goods_id:
                    goods[1] += nums
                    flag = True
            # 添加
            if not flag:
                session_goods.append(goods_list)
            request.session['goods'] = session_goods
            # session中保存的商品的个数
            goods_count = len(session_goods)
        else:
            # 第一次添加商品到session中时，保存键值对
            # 键为goods，值为[[id, nums, is_select], [id, nums, is_select]]
            request.session['goods'] = [goods_list]
            goods_count = 1
        return JsonResponse({'code': 200, 'msg': '请求成功', 'goods_count': goods_count})

3.前端页面Ajax提交商品信息代码

 {% csrf_token %}
    <script type="text/javascript" src="{% static 'js/jquery-1.12.4.min.js' %}"></script>
    <script type="text/javascript">
         function add_cart(goods_nums){
              var v = $('.num_show').val()
              var new_value = parseInt(v) + 1
              if (new_value <= goods_nums){
                  $('.num_show').val(new_value)
                  var price = $('.show_pirze em').text()
                  var new_total = price * new_value
                  $('.total em').text(new_total.toFixed(1) + ' 元')
              }
         }

         function sub_cart(){
             var v =  $('.num_show').val()
             var new_value = parseInt(v) - 1
             if (new_value > 0){
                 $('.num_show').val(new_value)
                 var price = $('.show_pirze em').text()
                 var new_total = price * new_value
                 $('.total em').text(new_total.toFixed(1) + ' 元')
             }
         }

         function change_val(goods_nums) {
             var v = $('.num_show').val()
             if (parseInt(v) > 0){
                if(v <= goods_nums && v > 0){
                     var price = $('.show_pirze em').text()
                     var new_total = parseInt(v) * price
                     $('.total em').text(new_total.toFixed(1) + ' 元')
                 }
                 if (v > goods_nums){
                     $('.num_show').val(goods_nums)
                     var v = $('.num_show').val()
                     var price = $('.show_pirze em').text()
                     var new_total = parseInt(v) * price
                     $('.total em').text(new_total.toFixed(1) + ' 元')
                 }
             }else{
                 $('.num_show').val(1)
                 var price = $('.show_pirze em').text()
                 var new_total = 1 * price
                 $('.total em').text(new_total.toFixed(1) + ' 元')
             }
         }

         function add_to_cart(id) {
            var nums = $('.num_show').val()
            var csrf = $('input[name="csrfmiddlewaretoken"]').val()
             $.ajax({
                 url: '/carts/add_cart/',
                 data: {'goods_id': id, 'nums': nums},
                 type: 'POST',
                 dataType: 'JSON',
                 headers: {'X-CSRFToken': csrf},
                 success: function (data) {
                     if(data.code == '200'){
                         $('#show_count').text(data.goods_count)
                     }
                 },
                 error: function (data) {
                     alert('添加失败')
                 }
             })
         }
    </script>