devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

小鱼商城首页_小鱼商城网页案例

作者：小丑西瓜9 | 2024-03-02 01:32:25

赞

踩

小鱼商城网页案例

项目介绍：本项目是购物平台，页面展示商品，点击商品能进入详情页面，能做购 买、加入购物车等操作，购买和加入购物车都需要登录

工具：PyCharm 2021.3, Microsoft Edge, Navicat Premium 16

技术点：链接数据库，Django框架，轮播图，html+css，Cookie记住密码

主要职责：

  1. 完成项目框架设计
  2. 根据项目框架编写html，css，以及js代码编写轮播图效果
  3. 使用orm映射进行商品展示，完成首页类容

效果展示：

代码展示：

  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  2. <head>
  3.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  4.     <title>小鱼商城-首页</title>
  5.     <link rel="stylesheet" type="text/css" href="/static/css/reset.css">
  6.     <link rel="stylesheet" type="text/css" href="/static/css/main.css">
  7.     <style>
  8.         {#不显示滑动条#}
  9.         ::-webkit-scrollbar {
  10.             display: none;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div id="app">
  16.     <div class="header_con">
  17.         <div class="header">
  18.             <div class="welcome fl">欢迎来到小鱼商城!</div>
  19.             <div class="fr">
  20.                 <div class="login_btn fl">
  21.                     欢迎您：<em>某某某</em>
  22.                     <span>|</span>
  23.                     <a href="#">退出</a>
  24.                 </div>
  25.                 <div v-else class="login_btn fl">
  26.                     <a href="#">登录</a>
  27.                     <span>|</span>
  28.                     <a href="#">注册</a>
  29.                 </div>
  30.                 <div class="user_link fl">
  31.                     <span>|</span>
  32.                     <a href="#">用户中心</a>
  33.                     <span>|</span>
  34.                     <a href="#">我的购物车</a>
  35.                     <span>|</span>
  36.                     <a href="#">我的订单</a>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </div>
  41.     <div class="search_bar clearfix">
  42.         <a href="#" class="logo fl"><img src="/static/images/logo.png"></a>
  43.         <div class="search_wrap fl">
  44.             <form  action="#" class="search_con">
  45.                 <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
  46.                 <input type="submit" class="input_btn fr" name="" value="搜索">
  47.             </form>
  48.             <ul class="search_suggest fl">
  49.                 <li><a href="#">索尼微单</a></li>
  50.                 <li><a href="#">优惠15元</a></li>
  51.                 <li><a href="#">美妆个护</a></li>
  52.                 <li><a href="#">买2免1</a></li>
  53.             </ul>
  54.         </div>
  55.         <div class="guest_cart fr">
  56.             <a href="#" class="cart_name fl">我的购物车</a>
  57.             <div class="goods_count fl" id="show_count">点击结算</div>
  58.             <ul class="cart_goods_show">
  59.                 <li>
  60.                     <img src="#" alt="商品图片">
  61.                     <h4></h4>
  62.                     <div></div>
  63.                 </li>
  64.             </ul>
  65.         </div>
  66.     </div>
  67.     <div class="navbar_con">
  68.         <div class="navbar">
  69.             <div class="sub_menu_con fl">
  70.                 <h1 class="fl">商品分类</h1>
  71.                 <ul class="sub_menu">
  72.                     {% for k,v in cates.items %}
  73.                     <li>
  74.                             <div class="level1">
  75.                                 {% for item in v.cate1 %}
  76.                                        <a href="#">{{ item.name }}</a>
  77.                                 {% endfor %}
  78.                             </div>
  79.  
  80.                             <div class="level2">
  81.                                
  82.                                     <div class="list_group">
  83.                                         {% for item2 in v.cate2 %}
  84.                                         <div class="group_name fl">{{ item2.name }} &gt;</div>
  85.                                         <div class="group_detail fl">
  86.                                         {% for item3 in item2.cate3_new %}
  87.                                                 <a href="/list/{{ cat3.id }}/1/">{{ item3.name }}</a>
  88.                                         {% endfor %}
  89.                                         </div>
  90.                                         {% endfor %}
  91.  
  92.                                     </div>
  93.                                 
  94.                             </div>
  95.                         </li>
  96.                     {% endfor %}
  97.                 </ul>
  98.             </div>
  99.  
  100.             <ul class="navlist fl">
  101.                 <li><a href="">首页</a></li>
  102.                 <li class="interval">|</li>
  103.                 <li><a href="">真划算</a></li>
  104.                 <li class="interval">|</li>
  105.                 <li><a href="">抽奖</a></li>
  106.             </ul>
  107.         </div>
  108.     </div>
  109.     <div class="pos_center_con clearfix">
  110.         <ul class="slide" style="position: absolute">
  111.             {% for content in contents.index_lbt %}
  112.                 <li><a href="#"><img style="opacity: 0;position: absolute;transition-duration: 1s " src="/static/images/{{ content.image }}.jpg" alt="幻灯片01"></a>
  113.                 </li>
  114.             {% endfor %}
  115.         </ul>
  116.         <div class="prev"></div>
  117.         <div class="next"></div>
  118.         <ul class="points">
  119.             <li></li>
  120.             <li></li>
  121.             <li></li>
  122.             <li></li>
  123.         </ul>
  124.         <div class="news">
  125.             <div class="news_title">
  126.                 <h3>快讯</h3>
  127.                 <a href="#">更多 &gt;</a>
  128.             </div>
  129.             <ul class="news_list">
  130.                 {% for content in contents.index_kx %}
  131.                     <li><a href="{{ content.url }}">{{ content.title }}</a></li>
  132.                 {% endfor %}
  133.             </ul>
  134.             {% for content in contents.index_ytgg %}
  135.                 <a href="{{ content.url }}" class="advs"><img src="/static/images/{{ content.image }}.jpg"></a>
  136.             {% endfor %}
  137.         </div>
  138.  
  139.     </div>
  140.     <div class="floor_adv">
  141.         <div class="list_model">
  142.             <div class="list_title clearfix">
  143.                 <h3 class="fl" id="model01">1F 手机通讯</h3>
  144.                 <div id="f1" class="subtitle fr">
  145.                     <a>时尚新品</a>
  146.                     <a>畅想低价</a>
  147.                     <a>手机配件</a>
  148.                 </div>
  149.             </div>
  150.             <div class="goods_con clearfix">
  151.                 <div class="goods_banner fl">
  152. <!--{#                    <img src="/static/data_images/{{ contents.index_1f_logo.0.image.url}}.jpg">#}-->
  153. {#                    <img src="/static/images/indexes/{{ contents.index_1f_logo.0.image.url}}.jpg">#}
  154.                     <img src="/static/images/{{ contents.index_1f_logo.0.image}}.jpg">
  155.                     <div class="channel">
  156.                         {% for content in contents.index_1f_pd %}
  157.                         <a href="{{ content.url }}">{{ content.title }}</a>
  158.                         {% endfor %}
  159.                     </div>
  160.                     <div class="key_words">
  161.                         {% for content in contents.index_1f_bq %}
  162.                         <a href="{{ content.url }}">{{ content.title }}</a>
  163.                         {% endfor %}
  164.                     </div>
  165.                 </div>
  166.                 <div id="goods_list_con" class="goods_list_con" style="overflow: auto" >
  167.                     <ul class="goods_list fl ">
  168.                         {% for content in contents.index_1f_ssxp %}
  169.                         <li>
  170. <!--{#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/data_images/{{ content.image.url }}.jpg"></a>#}-->
  171. {#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/indexes/{{ content.image.url }}.jpg"></a>#}
  172.                             <a href="/product/detail/{{ content.id }}" class="goods_pic"><img src="/static/images/{{ content.image }}.jpg"></a>
  173.                             <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
  174.                             <div class="price">{{ content.text }}</div>
  175.                         </li>
  176.                         {% endfor %}
  177.                     </ul>
  178.                     <ul class="goods_list fl" style="display: none">
  179.                         {% for content in contents.index_1f_cxdj %}
  180.                         <li>
  181. <!--{#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/data_images/{{ content.image.url }}.jpg"></a>#}-->
  182. {#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/indexes/{{ content.image.url }}.jpg"></a>#}
  183.                             <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/{{ content.image}}.jpg"></a>
  184.                             <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
  185.                             <div class="price">{{ content.text }}</div>
  186.                         </li>
  187.                         {% endfor %}
  188.                     </ul>
  189.                     <ul  class="goods_list fl" style="display: none">
  190.                         {% for content in contents.index_1f_sjpj %}
  191.                         <li>
  192. <!--{#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/data_images/{{ content.image.url }}.jpg"></a>#}-->
  193. {#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/indexes/{{ content.image.url }}.jpg"></a>#}
  194.                             <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/{{ content.image }}.jpg"></a>
  195.                             <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
  196.                             <div class="price">{{ content.text }}</div>
  197.                         </li>
  198.                         {% endfor %}
  199.                     </ul>
  200.                 </div>
  201.             </div>
  202.         </div>
  203.         <div class="list_model model02">
  204.             <div class="list_title clearfix">
  205.                 <h3 class="fl" id="model01">2F 电脑数码</h3>
  206.                 <div id="f2" class="subtitle fr">
  207.                     <a >加价换购</a>
  208.                     <a >畅享低价</a>
  209.                 </div>
  210.             </div>
  211.             <div class="goods_con clearfix">
  212.                 <div class="goods_banner fl">
  213. <!--{#                    <img src="/static/data_images/{{ contents.index_2f_logo.0.image.url}}.jpg">#}-->
  214. {#                    <img src="/static/images/indexes/{{ contents.index_2f_logo.0.image.url}}.jpg">#}
  215.                     <img src="/static/images/{{ contents.index_2f_logo.0.image}}.jpg">
  216.                     <div class="channel">
  217.                         {% for content in contents.index_2f_pd %}
  218.                         <a href="{{ content.url }}">{{ content.title }}</a>
  219.                         {% endfor %}
  220.                     </div>
  221.                     <div class="key_words">
  222.                         {% for content in contents.index_2f_bq %}
  223.                         <a href="{{ content.url }}">{{ content.title }}</a>
  224.                         {% endfor %}
  225.                     </div>
  226.                 </div>
  227.                 <div id="goods_list_con2" class="goods_list_con" style="overflow: auto">
  228.                     <ul class="goods_list f2">
  229.                         {% for content in contents.index_2f_cxdj %}
  230.                         <li>
  231. <!--{#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/data_images/{{ content.image.url }}.jpg"></a>#}-->
  232. {#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/indexes/{{ content.image.url }}.jpg"></a>#}
  233.                             <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/{{ content.image }}.jpg"></a>
  234.                             <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
  235.                             <div class="price">{{ content.text }}</div>
  236.                         </li>
  237.                         {% endfor %}
  238.                     </ul>
  239.                     <ul class="goods_list f2" style="display: none">
  240.                         {% for content in contents.index_2f_jjhg %}
  241.                         <li>
  242. <!--{#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/data_images/{{ content.image.url }}.jpg"></a>#}-->
  243. {#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/indexes/{{ content.image.url }}.jpg"></a>#}
  244.                             <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/{{ content.image }}.jpg"></a>
  245.                             <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
  246.                             <div class="price">{{ content.text }}</div>
  247.                         </li>
  248.                         {% endfor %}
  249.                     </ul>
  250.                 </div>
  251.             </div>
  252.         </div>
  253.         <div class="list_model model03">
  254.             <div class="list_title clearfix">
  255.                 <h3 class="fl" id="model01">3F 家居家装</h3>
  256.                 <div id="f3" class="subtitle fr">
  257.                     <a>生活用品</a>
  258.                     <a>厨房用品</a>
  259.                 </div>
  260.             </div>
  261.             <div class="goods_con clearfix">
  262.                 <div class="goods_banner fl">
  263.                     <img src="/static/images/{{ contents.index_3f_logo.0.image }}.jpg">
  264.                     <div class="channel">
  265.                         {% for content in contents.index_3f_pd %}
  266.                         <a href="{{ content.url }}">{{ content.title }}</a>
  267.                         {% endfor %}
  268.                     </div>
  269.                     <div class="key_words">
  270.                         {% for content in contents.index_3f_bq %}
  271.                         <a href="{{ content.url }}">{{ content.title }}</a>
  272.                         {% endfor %}
  273.                     </div>
  274.                 </div>
  275.                 <div id="goods_list_con3" class="goods_list_con" style="overflow: auto">
  276.                     <ul class="goods_list fl">
  277.                         {% for content in contents.index_3f_shyp %}
  278.                         <li>
  279. <!--{#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/data_images/{{ content.image.url }}.jpg"></a>#}-->
  280. {#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/indexes/{{ content.image.url }}.jpg"></a>#}
  281.                             <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/{{ content.image }}.jpg"></a>
  282.                             <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
  283.                             <div class="price">{{ content.text }}</div>
  284.                         </li>
  285.                         {% endfor %}
  286.                     </ul>
  287.                     <ul class="goods_list fl" style="display: none">
  288.                         {% for content in contents.index_3f_cfyp %}
  289.                         <li>
  290. <!--{#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/data_images/{{ content.image.url }}.jpg"></a>#}-->
  291. {#                            <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/indexes/{{ content.image.url }}.jpg"></a>#}
  292.                             <a href="{{ content.url }}" class="goods_pic"><img src="/static/images/{{ content.image }}.jpg"></a>
  293.                             <h4><a href="{{ content.url }}" title="{{ content.title }}">{{ content.title }}</a></h4>
  294.                             <div class="price">{{ content.text }}</div>
  295.                         </li>
  296.                         {% endfor %}
  297.                     </ul>
  298.                 </div>
  299.             </div>
  300.         </div>
  301.     </div>
  302.     <div class="footer">
  303.         <div class="foot_link">
  304.             <a href="#">关于我们</a>
  305.             <span>|</span>
  306.             <a href="#">联系我们</a>
  307.             <span>|</span>
  308.             <a href="#">招聘人才</a>
  309.             <span>|</span>
  310.             <a href="#">友情链接</a>
  311.         </div>
  312.         <p>CopyRight © 2016 北京小鱼商业股份有限公司 All Rights Reserved</p>
  313.         <p>电话：010-****888 京ICP备*******8号</p>
  314.     </div>
  315. </div>
  316. </body>
  317. <script src="/static/js/gaoliang.js"></script>
  318. <script src="/static/js/Carousel.js"></script>
  319. </html>

 

  1. from django.shortcuts import render
  2. from Product.models import TbContent,TbGoodsChannel,TbContentCategory,TbSku,TbChannelGroup,TbGoodsCategory,TbSpu
  3. from django.db.models import Avg,Sum,Count
  4. # from redis import Redis
  5. # Create your views here.
  6. def index(request):
  7.     tbc=TbContentCategory.objects.all()
  8.     contents={}
  9.     for item in tbc:
  10.         contents[item.key]=TbContent.objects.filter(category_id=item.id)
  11.     cates={}
  12.     tgc=TbGoodsChannel.objects.all()
  13.     for item in tgc:
  14.         if item.group_id not in cates.keys():
  15.             cates[item.group_id]={"cate1":[],'cate2':[]}
  16.         cate1=item.category
  17.         cates[item.group_id]['cate1'].append(cate1)
  18.         cate2=TbGoodsCategory.objects.filter(parent_id=cate1.id)
  19.         for item2 in cate2:
  20.             item2.cate3_new=[]
  21.             cate3=TbGoodsCategory.objects.filter(parent_id=item2.id)
  22.             for item3 in cate3:
  23.                 item2.cate3_new.append(item3)
  24.             cates[item.group_id]['cate2'].append(item2)
  25.     return render(request,'index12.html',locals())
  26.  
  27. def list(request):
  28.     lists=TbSku.objects.all()
  29.     hot_shop = TbSku.objects.order_by('comments')
  30.     print(hot_shop)
  31.     return render(request,'list.html',locals())
  32.  
  33. def detail(request,id):
  34.     # rc=Redis(host='192.168.121.78')
  35.     # rc.hset('111','111','111')
  36.     # info=rc.hgetall('111')
  37.     # print(info)
  38.     details = TbSku.objects.get(id=id)
  39.     return  render(request,'detail.html',locals())

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/178219
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号