【愚公系列】2022年01月 Django商城项目 22-首页信息展示

愚公搬代码

发布于 2022-02-01 09:32:37

4210

发布于 2022-02-01 09:32:37

文章被收录于专栏：历史专栏历史专栏

文章目录

一、首页信息展示

1.后台查询代码

from app.contents.models import ContentCategory
from app.contents.utils import get_categories
class IndexView(View):

    def get(self,request):
        """
         # 1.分类信息
         # 2.楼层信息
        """
        # 1.分类信息 分类信息在其他页面也会出现,我们应该直接抽取为一个方法
        # 查询商品频道和分类
        categories = get_categories()

        # 2.楼层信息
        contents = {}
        content_categories = ContentCategory.objects.all()
        for cat in content_categories:
            contents[cat.key] = cat.content_set.filter(status=True).order_by('sequence')

        # 渲染模板的上下文
        context = {
            'categories': categories,
            'contents': contents,
        }

        return render(request,'index.html',context=context)

二、分类信息展示

1.前台html代码

<ul class="sub_menu">
	{% for group in categories.values() %}
	<li>
		<div class="level1">
			{% for channel in group.channels %}
			<a href="{{ channel.url }}">{{ channel.name }}</a>
			{% endfor %}
		</div>
		<div class="level2">
			{% for cat2 in group.sub_cats %}
			<div class="list_group">
				<div class="group_name fl">{{ cat2.name }} &gt;</div>
				<div class="group_detail fl">
					{% for cat3 in cat2.sub_cats %}
					<a href="/list/{{ cat3.id }}/1/">{{ cat3.name }}</a>
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		</div>
	</li>
	{% endfor %}
</ul>

2.实际效果

三、轮播图广告展示

1.前台html代码

<ul class="slide">
    {% for content in contents.index_lbt %}
    <li><a href="{{ content.url }}"><img src="{{ content.image }}" alt="{{ content.title }}"></a></li>
    {% endfor %}
</ul>

2.实际效果

四、快讯和页头展示

1.前台html代码

<div class="news">
    <div class="news_title">
        <h3>快讯</h3>
        <a href="#">更多 &gt;</a>
    </div>
    <ul class="news_list">
        {% for content in contents.index_kx %}
        <li><a href="{{ content.url }}">{{ content.title }}</a></li>
        {% endfor %}
    </ul>
    {% for content in contents.index_ytgg %}
    <a href="{{ content.url }}" class="advs"><img src="{{ content.image }}"></a>
    {% endfor %}
</div>

2.实际效果

五、商品楼层展示

1.前台html代码

<div class="list_model">
      <div class="list_title clearfix">
          <h3 class="fl" id="model01">1F 手机通讯</h3>
          <div class="subtitle fr">
              <a @mouseenter="f1_tab=1" :class="f1_tab===1?'active':''">时尚新品</a>
              <a @mouseenter="f1_tab=2" :class="f1_tab===2?'active':''">畅想低价</a>
              <a @mouseenter="f1_tab=3" :class="f1_tab===3?'active':''">手机配件</a>
          </div>
      </div>
      <div class="goods_con clearfix">
          <div class="goods_banner fl">
              <img src="{{ contents.index_1f_logo.0.image.url}}">
              <div class="channel">
                  {% for content in contents.index_1f_pd %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
              </div>
              <div class="key_words">
                  {% for content in contents.index_1f_bq %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
              </div>

          </div>
          <div class="goods_list_con">
              <ul v-show="f1_tab===1" class="goods_list fl">
                  {% for content in contents.index_1f_ssxp %}
                  <li>
                      <a href="{{ content.url }}" class="goods_pic"><img src="{{ content.image.url }}"></a>
                      <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                      <div class="price">{{ content.text }}</div>
                  </li>
                  {% endfor %}
              </ul>
              <ul v-show="f1_tab===2" class="goods_list fl">
                  {% for content in contents.index_1f_cxdj %}
                  <li>
                      <a href="{{ content.url }}" class="goods_pic"><img src="{{ content.image }}"></a>
                      <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                      <div class="price">{{ content.text }}</div>
                  </li>
                  {% endfor %}
              </ul>
              <ul v-show="f1_tab===3" class="goods_list fl">
                  {% for content in contents.index_1f_sjpj %}
                  <li>
                      <a href="{{ content.url }}" class="goods_pic"><img src="{{ content.image }}"></a>
                      <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                      <div class="price">{{ content.text }}</div>
                  </li>
                  {% endfor %}
              </ul>
          </div>
      </div>
  </div>

<div class="list_model model02">
      <div class="list_title clearfix">
          <h3 class="fl" id="model01">2F 电脑数码</h3>
          <div class="subtitle fr">
              <a @mouseenter="f2_tab=1" :class="f2_tab===1?'active':''">加价换购</a>
              <a @mouseenter="f2_tab=2" :class="f2_tab===2?'active':''">畅享低价</a>
          </div>
      </div>
      <div class="goods_con clearfix">
          <div class="goods_banner fl">
              <img src="{{ contents.index_2f_logo.0.image}}">
              <div class="channel">
                  {% for content in contents.index_2f_pd %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
              </div>
              <div class="key_words">
                  {% for content in contents.index_2f_bq %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
              </div>
          </div>
          <div class="goods_list_con">
              <ul v-show="f2_tab===1" class="goods_list fl">
                  {% for content in contents.index_2f_cxdj %}
                  <li>
                      <a href="{{ content.url }}" class="goods_pic"><img src="{{ content.image }}"></a>
                      <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                      <div class="price">{{ content.text }}</div>
                  </li>
                  {% endfor %}
              </ul>
              <ul v-show="f2_tab===2" class="goods_list fl">
                  {% for content in contents.index_2f_jjhg %}
                  <li>
                      <a href="{{ content.url }}" class="goods_pic"><img src="{{ content.image }}"></a>
                      <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                      <div class="price">{{ content.text }}</div>
                  </li>
                  {% endfor %}
              </ul>
          </div>
      </div>
  </div>

<div class="list_model model03">
      <div class="list_title clearfix">
          <h3 class="fl" id="model01">3F 家居家装</h3>
          <div class="subtitle fr">
              <a @mouseenter="f3_tab=1" :class="f3_tab===1?'active':''">生活用品</a>
              <a @mouseenter="f3_tab=2" :class="f3_tab===2?'active':''">厨房用品</a>
          </div>
      </div>
      <div class="goods_con clearfix">
          <div class="goods_banner fl">
              <img src="{{ contents.index_3f_logo.0.image.url }}">
              <div class="channel">
                  {% for content in contents.index_3f_pd %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
              </div>
              <div class="key_words">
                  {% for content in contents.index_3f_bq %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
              </div>
          </div>
          <div class="goods_list_con">
              <ul v-show="f3_tab===1" class="goods_list fl">
                  {% for content in contents.index_3f_shyp %}
                  <li>
                      <a href="{{ content.url }}" class="goods_pic"><img src="{{ content.image.url }}"></a>
                      <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                      <div class="price">{{ content.text }}</div>
                  </li>
                  {% endfor %}
              </ul>
              <ul v-show="f3_tab===2" class="goods_list fl">
                  {% for content in contents.index_3f_cfyp %}
                  <li>
                      <a href="{{ content.url }}" class="goods_pic"><img src="{{ content.image.url }}"></a>
                      <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
                      <div class="price">{{ content.text }}</div>
                  </li>
                  {% endfor %}
              </ul>
          </div>
      </div>
  </div>