【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面
生活随笔
收集整理的這篇文章主要介紹了
【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
首先將我們的模板文件拷貝到 templates 目錄下, 將我們模板的靜態文件拷貝到 static 目錄下.
首頁頁面主要展示的數據包括:
產品的分類數據
每個分類的產品數據
購物車商品數據
編寫首頁視圖函數 index, 代碼實現如下:
def index(request):"""首頁頁面""" ?# 查詢商品分類categories = GoodsCategory.objects.all()# 從每個分類中獲取四個商品for cag in categories:cag.goods_list = cag.goodsinfo_set.order_by('-id')[:4] ?# 讀取購物車商品列表cart_goods_list = []# 商品總數cart_goods_count = 0for goods_id, goods_num in request.COOKIES.items():if goods_id == 'csrftoken':continuecart_goods = GoodsInfo.objects.get(id=goods_id)cart_goods.goods_num = goods_numcart_goods_list.append(cart_goods)# 累加購物車商品總數cart_goods_count = cart_goods_count + int(goods_num) ?return render(request, 'index.html', {'categories': categories, 'cart_goods_list': cart_goods_list, 'cart_goods_count': cart_goods_count})獲得所有分類數據, 該部分功能實現代碼如下:
然后根據分類獲取每個分類中的4條商品數據.
購物車數據展示. 由于購物車數據我們存儲在 cookie 中, 所以我們這里遍歷 request.COOKIES 從中讀取所有商品信息.
其中代碼:
if goods_id == 'csrftoken':continue由于我們的 cookie 中除了商品數據之外, django 也會增加其他的 cookie 數據, 我們通過 if 判斷將非商品數據的 cookie 過濾掉.
index.html 模板主要代碼實現如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>天天生鮮-首頁</title><link rel="stylesheet" type="text/css" href="/static/css/reset.css"><link rel="stylesheet" type="text/css" href="/static/css/main.css"><script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script><script type="text/javascript" src="/static/js/jquery-ui.min.js"></script><script type="text/javascript" src="/static/js/slide.js"></script> </head> <body><div class="header_con"><div class="header"><div class="welcome fl">歡迎來到天天生鮮!</div></div> </div> ?<div class="search_bar clearfix"><a href="/index/" class="logo fl"><img src="/static/images/logo.png"></a><div class="guest_cart fr"><a href="/cart/show_cart/" class="cart_name fl">我的購物車</a><div class="goods_count fl">{{ cart_goods_count }}</div><ul class="cart_goods_show"> ? ?{% for cart_goods in cart_goods_list %}<li><img src="/static/{{ cart_goods.goods_img }}" alt="商品圖片"><h4>{{ cart_goods.goods_name }}</h4><div>{{ cart_goods.goods_num }}</div></li>{% endfor %} ?</ul></div></div> ?<div class="navbar_con"><div class="navbar"><h1 class="fl">全部商品分類</h1></div></div> ?<div class="center_con clearfix"><ul class="subnav fl">{% for cag in categories %}<li><a href="/goods/?cag={{ cag.id }}&page=1" class="{{ cag.cag_css }}">{{ cag.cag_name }}</a></li>{% endfor %}</ul><div class="slide fl"><ul class="slide_pics"><li><img src="/static/images/slide.jpg" alt="幻燈片"></li><li><img src="/static/images/slide02.jpg" alt="幻燈片"></li><li><img src="/static/images/slide03.jpg" alt="幻燈片"></li><li><img src="/static/images/slide04.jpg" alt="幻燈片"></li></ul><div class="prev"></div><div class="next"></div><ul class="points"></ul></div><div class="adv fl"><a href="#"><img src="/static/images/adv01.jpg"></a><a href="#"><img src="/static/images/adv02.jpg"></a></div></div> ?{% for cag in categories %}<div class="list_model"><div class="list_title clearfix"><h3 class="fl" id="model01">{{ cag.cag_name }}</h3><a href="/goods/?cag={{ cag.id }}&page=1" class="goods_more fr" id="fruit_more">查看更多 ></a></div> ?<div class="goods_con clearfix"><div class="goods_banner fl"><img src="/static/{{ cag.cag_img }}"></div><ul class="goods_list fl"> ?{% for goods in cag.goods_list %}<li><h4><a href="/detail/?id={{ goods.id }}">{{ goods.goods_name }}</a></h4><a href="/detail/?id={{ goods.id }}"><img src="/static/{{ goods.goods_img }}"></a><div class="prize">￥ {{ goods.goods_price }}</div></li>{% endfor %} ?</ul></div></div>{% endfor %} ?<div class="footer"><div class="foot_link"><a href="#">關于我們</a><span>|</span><a href="#">聯系我們</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情鏈接</a> </div><p>CopyRight ? 2016 北京天天生鮮信息技術有限公司 All Rights Reserved</p><p>電話：010-****888 ? 京ICP備*******8號</p></div> </body> </html>我們由 index 視圖函數傳遞給模板的數據 categories 是一個結果集, 我們在 index.html 模板中, 通過使用 Django 提供的模板語法, 來遍歷輸出. 模板中 for 的使用格式如下:
{% for ... in ... %} ? {% endfor %}輸出變量, 我們使用如下格式的語法:
{{ 變量名 }}下面模板代碼, 主要用戶遍歷輸出購物車中的商品信息.
<a href="/cart/show_cart/" class="cart_name fl">我的購物車</a> <div class="goods_count fl">{{ cart_goods_count }}</div> <ul class="cart_goods_show"> ? ?{% for cart_goods in cart_goods_list %}<li><img src="/static/{{ cart_goods.goods_img }}" alt="商品圖片"><h4>{{ cart_goods.goods_name }}</h4><div>{{ cart_goods.goods_num }}</div></li>{% endfor %} ? </ul>下面的模板代碼主要用于輸出產品分類信息:
<ul class="subnav fl">{% for cag in categories %}<li><a href="/goods/?cag={{ cag.id }}&page=1" class="{{ cag.cag_css }}">{{ cag.cag_name }}</a></li>{% endfor %} </ul>遍歷輸出每個分類下的商品數據:
{% for cag in categories %}<div class="list_model"><div class="list_title clearfix"><h3 class="fl" id="model01">{{ cag.cag_name }}</h3><a href="/goods/?cag={{ cag.id }}&page=1" class="goods_more fr" id="fruit_more">查看更多 ></a></div> ?<div class="goods_con clearfix"><div class="goods_banner fl"><img src="/static/{{ cag.cag_img }}"></div><ul class="goods_list fl"> ?{% for goods in cag.goods_list %}<li><h4><a href="/detail/?id={{ goods.id }}">{{ goods.goods_name }}</a></h4><a href="/detail/?id={{ goods.id }}"><img src="/static/{{ goods.goods_img }}"></a><div class="prize">￥ {{ goods.goods_price }}</div></li>{% endfor %} ?</ul></div></div>{% endfor %}當點擊商品圖片或者名字時, 跳轉到:
/detail/?id={{ goods.id }}問號之后的內容為請求攜帶的參數, 鍵為 id, 值為商品ID.
總結
以上是生活随笔為你收集整理的【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【图神经网络】GNN从入门到精通
- 下一篇： 拆解大数据总线平台DBus的系统架构