Django项目之Web端电商网站的实战开发（五）

最新推荐文章于 2022-03-14 16:51:57 发布

原创

最新推荐文章于 2022-03-14 16:51:57 发布 · 4.5w 阅读

19 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#Web 开发 #Django Web开发 #Python Web开发 #Python 网站实战开发 #Django 网站实战开发

该博客详细介绍了使用Django开发电商网站的过程，包括天天生鲜商品详情页的展示、商品列表页、商品搜索功能、添加商品到购物车的实现以及购物车页面的展示。内容涵盖商品详情的获取、历史浏览记录存储、商品总价计算、列表页分页控制、全文检索配置和中文分词，以及购物车的添加、删除和数量调整等前端交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！

接着上一篇博客继续往下写：Django项目之Web端电商网站的实战开发（四）_cdtaogang's blog-优快云博客

非VIP用户请点击这里进行查阅

一丶天天生鲜详情页

1.显示商品详情页

step1 在df_goods/views中定义类视图get方法渲染详情页模板

# /goods/商品id
class DetailView(View):
    """详情页"""
    def get(self, request, goods_id):
        """显示商品详情页"""
        return render(request, "detail.html")

step2 在df_goos/urls中定义详情页路由

url(r"^goods/(?P<goods_id>\d+)$", DetailView.as_view(), name="detail"),  # 详情页

step3 在浏览器直接输入

2.获取商品详情页信息

step1 根据商品goods_id,获取商品信息，如果查询不到则返回首页

try:
    sku = GoodsSKU.objects.get(id=goods_id)
except GoodsSKU.DoesNotExist:
    # 此goods_id的商品不存在
    return redirect(reverse("goods:index"))

step2 获取所有的商品类型

types = GoodsType.objects.all()

step3 从订单模块中根据查询到的sku对象查询出评论不为空的评论信息

sku_orders_comment = OrderGoods.objects.filter(sku=sku).exclude(comment='')

step4 根据查询到的商品sku对象获取商品信息按照创建时间进行倒序排序并且只显示最前面两个

new_skus = GoodsSKU.objects.filter(type=sku.type).order_by('-create_time')[:2]

step5 获取用户购物车中商品的数目

# 获取用户购物车中商品的数目
user = request.user  # 获取user对象
cart_count = 0  # 默认设置为0
# 获取商品详情页中的购物车数目信息
if user.is_authenticated():  # 如果返回True表示用户已登录
    # 用户已登录
    conn = get_redis_connection('default')  # 获取配置中default默认redis连接对象
    cart_key = 'cart_%d' % user.id  # 设置key
    # 通过hlen方法获取购物车商品数目
    cart_count = conn.hlen(cart_key)

step6 定义模板上下文，并返回

# 定义模板上下问
content = {"types":types, "sku":sku,
           "sku_orders_comment":sku_orders_comment,
           "new_skus":new_skus, "cart_count":cart_count}
return render(request, "detail.html", content)

step7 在商品详情页父模板base_detail_list.html中，获取全部分类信息

<ul class="subnav">
    {% for type in types %}
    <li><a href="{% url 'goods:list' type.id 1 %}" class="{
  
  { type.logo }}">{
  
  { type.name }}</a></li>
    {% endfor %}
</ul>

step8 在商品详情页detail.html模板中进行数据填坑

<div class="breadcrumb">
    <a href="#">全部分类</a>
    <span>></span>
    <a href="#">{
  
  { sku.type.name }}</a>
    <span>></span>
    <a href="#">商品详情</a>
</div>
<div class="goods_detail_con clearfix">
    <div class="goods_detail_pic fl"><img src="{
  
  { sku.image.url }}"></div>

    <div class="goods_detail_list fr">
        <h3>{
  
  { sku.name }}</h3>
        <p>{
  
  { sku.desc }}</p>
        <div class="prize_bar">
            <span class="show_pirze">¥<em>{
  
  { sku.price }}</em></span>
            <span class="show_unit">单  位：{
  
  { sku.unite }}</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">
                <a href="javascript:;" class="add fr">+</a>
                <a href="javascript:;" class="minus fr">-</a>   
            </div> 
        </div>
        <div class="total">总价：<em>16.80元</em></div>
        <div class="operate_btn">
            <a href="javascript:;" class="buy_btn">立即购买</a>
            <a href="javascript:;" class="add_cart" id="add_cart">加入购物车</a>             
        </div>
    </div>
</div>
<div class="main_wrap clearfix">
    <div class="l_wrap fl clearfix">
        <div class="new_goods">
            <h3>新品推荐</h3>
            <ul>
                {% for sku in new_skus %}
                <li>
                    <a href="{% url 'goods:detail' sku.id %}"><img src="{
  
  { sku.image.url }}"></a>
                    <h4><a href="{% url 'goods:detail' sku.id %} ">{
  
  { sku.name }}</a></h4>
                    <div class="prize">￥{
  
  { sku.price }}</div>
                </li>
                {% endfor %}
            </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>{
  
  { sku.goods.detail |safe }}</dd>
            </dl>
        </div>
        <div class="tab_content">
            <dl>
                {% for comment in sku_orders_comment %}
                <dt>评论时间：{
  
  { comment.update_time }}&nbsp;&nbsp;{
  
  { comment.order.user.username }}</dt>
                <dd>评论内容：{
  
  { comment.comment |safe }}</dd>
                {% endfor %}
            </dl>
        </div>

    </div>
</div>

step9 在首页index.html中对商品详情链接地址进行数据填坑

<div class="center_con clearfix">
    <ul class="subnav fl">
        {% for type in types %}
        <li><a href="#model0{
  
  { forloop.counter }}" class="{
  
  { type.logo }}">{
  
  { type.name }}</a></li>
        {% endfor %}
    </ul>
    <div class="slide fl">
        <ul class="slide_pics">
            {% for banner in goods_banners %}
                <li><a href="{% url 'goods:detail' banner.sku.id %}" ><img src="{
  
  { banner.image.url }}" alt="幻灯片"></a>/li>
            {% endfor %}
        </ul>
        <div class="prev"></div>
        <div class="next"></div>
        <ul class="points"></ul>
    </div>
    <div class="adv fl">
        {% for banner in promotion_banners %}
        <a href="{
  
  { banner.url }}"><img src="{
  
  { banner.image.url }}"></a>
        {% endfor %}
    </div>
</div>
{% for type in types %}
<div class="list_model">
    <div class="list_title clearfix">
        <h3 class="fl" id="model{
  
  { forloop.counter }}">{
  
  { type.name }}</h3>
        <div class="subtitle fl">
            <span>|</span>
            {% for banner in type.title_banners %}
            <a href="{% url 'goods:detail' banner.sku.id %}">{
  
  { banner.sku.name }}</a>
            {% endfor %}
        </div>
        <a href="#" class="goods_more fr" id="fruit_more">查看更多 ></a>
    </div>

    <div class="goods_con clearfix">
        <div class="goods_banner fl"><img src="{
  
  { type.image.url }}"></div>
        <ul class="goods_list fl">
            {% for banner in type.image_banners %}
            <li>
                <h4><a href="{% url 'goods:detail' banner.sku.id %}">{
  
  { banner.sku.name }}</a></h4>
                <a href="{% url 'goods:detail' banner.sku.id %}"><img src="{
  
  { banner.sku.image.url }}"></a>
                <div class="prize">¥ {
  
  { banner.sku.price }}</div>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

step10 测试

3.添加历史浏览记录

step1 当用户点击某个商品，进入商品商品详情页面时，将该商品id保存到redis数据库中，在用户中心页面个人信息页面进行显示

# 添加用户中心历史浏览记录
history_key = "history_%d"% user.id
# 当用户进入该goods_id的商品详情页时，则将之前redis数据中的的此goods_id的商品移除
conn.lrem(history_key, 0, goods_id)
# 将此goods_id的商品排到浏览记录列表的左侧
conn.lpush(history_key, goods_id)
# 最多只保存5条浏览记录
conn.ltrim(history_key, 0 ,4)

step2 测试用户历史浏览记录

step3 查看redis数据库以及mysql数据库

4.在商品详情页添加其他规格的商品

step1 在DetailView类视图get方法中进行获取，获取同一个spu的其他规格的商品,不显示当前的商品

same_spu_skus = GoodsSKU.objects.filter(goods=sku.goods).exclude(id=goods_id)

content = {"types":types, "sku":sku,
           "sku_orders_comment":sku_orders_comment,
           "same_spu_skus":same_spu_skus,
           "new_skus":new_skus, "cart_count":cart_count}

step2 在detail.html模板中添加其他规格的标签，并进行数据填坑

<div>
    <p>其他规格:</p>
    <ul>
        {% for sku in same_spu_skus %}
        <li><a href="{% url 'goods:detail' sku.id %}">{
  
  { sku.name }}</a></li>