相关文章推荐
幸福的水煮肉  ·  TOXRIC: ...·  1 月前    · 
爱旅游的柠檬  ·  正则表达式如何处理嵌套结构 - 周骏 - 博客园·  5 月前    · 
小胡子的大葱  ·  远程JMX访问拒绝：Caused by: ...·  1 年前    · 
千年单身的红金鱼  ·  普通克里金插值的详细计算步骤，适合初学者。_ ...·  1 年前    · 
才高八斗的碗  ·  剑桥女子学院给学生发邮件 ...·  1 年前    · 
Code  ›  【愚公系列】2022年01月 Django商城项目 22-首页信息展示
django content fl
https://cloud.tencent.com/developer/article/1940296
坚韧的南瓜
1 年前
备案 控制台
学习
实践
活动
专区
工具
TVP
文章/答案/技术大牛
写文章
专栏首页 CTF-攻防世界 【愚公系列】2022年01月 Django商城项目 22-首页信息展示
2 0

海报分享

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

发布于2022-02-01 09:32:37 阅读 222 0

文章目录

一、首页信息展示

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() %}
		<div class="level1">
			{% for channel in group.channels %}
			<a href="{{ channel.url }}">{{ channel.name }}</a>
			{% endfor %}
		<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 %}
			{% endfor %}
	{% 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>
    <ul class="news_list">
        {% for content in contents.index_kx %}
        <li><a href="{{ content.url }}">{{ content.title }}</a></li>
        {% endfor %}
    {% 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 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 class="key_words">
                  {% for content in contents.index_1f_bq %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
          <div class="goods_list_con">
              <ul v-show="f1_tab===1" class="goods_list fl">
                  {% for content in contents.index_1f_ssxp %}
                      <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>
                  {% endfor %}
              <ul v-show="f1_tab===2" class="goods_list fl">
                  {% for content in contents.index_1f_cxdj %}
                      <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>
                  {% endfor %}
              <ul v-show="f1_tab===3" class="goods_list fl">
                  {% for content in contents.index_1f_sjpj %}
                      <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>
                  {% endfor %}
<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 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 class="key_words">
                  {% for content in contents.index_2f_bq %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
          <div class="goods_list_con">
              <ul v-show="f2_tab===1" class="goods_list fl">
                  {% for content in contents.index_2f_cxdj %}
                      <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>
                  {% endfor %}
              <ul v-show="f2_tab===2" class="goods_list fl">
                  {% for content in contents.index_2f_jjhg %}
                      <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>
                  {% endfor %}
<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 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 class="key_words">
                  {% for content in contents.index_3f_bq %}
                  <a href="{{ content.url }}">{{ content.title }}</a>
                  {% endfor %}
          <div class="goods_list_con">
              <ul v-show="f3_tab===1" class="goods_list fl">
                  {% for content in contents.index_3f_shyp %}
                      <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>
                  {% endfor %}
              <ul v-show="f3_tab===2" class="goods_list fl">
                  {% for content in contents.index_3f_cfyp %}
                      <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>
                  {% endfor %}
  </div>

2.实际效果

本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
本文分享自作者个人站点/博客： https://codeboy.blog.csdn.net 复制
如有侵权，请联系 cloudcommunity@tencent.com 删除。
展开阅读全文
举报

 
推荐文章
幸福的水煮肉  ·  TOXRIC: 全面的毒理学数据与基准数据库|算法|转录组|化合物_网易订阅
1 月前
爱旅游的柠檬  ·  正则表达式如何处理嵌套结构 - 周骏 - 博客园
5 月前
小胡子的大葱  ·  远程JMX访问拒绝：Caused by: java.rmi.ConnectException: Connection refused to host: 127.0.0.1; nested - 天宇轩-
1 年前
千年单身的红金鱼  ·  普通克里金插值的详细计算步骤，适合初学者。_BetterQ.的博客-CSDN博客
1 年前
才高八斗的碗  ·  剑桥女子学院给学生发邮件 提醒她们做爱声音“小一点”_手机新浪网
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号