【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面
生活随笔
收集整理的這篇文章主要介紹了
【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
首先將我們的模板文件拷貝到 templates 目錄下, 將我們模板的靜態(tài)文件拷貝到 static 目錄下.
首頁(yè)頁(yè)面主要展示的數(shù)據(jù)包括:
產(chǎn)品的分類數(shù)據(jù)
每個(gè)分類的產(chǎn)品數(shù)據(jù)
購(gòu)物車商品數(shù)據(jù)
編寫(xiě)首頁(yè)視圖函數(shù) index, 代碼實(shí)現(xiàn)如下:
def index(request):"""首頁(yè)頁(yè)面""" ?# 查詢商品分類categories = GoodsCategory.objects.all()# 從每個(gè)分類中獲取四個(gè)商品for cag in categories:cag.goods_list = cag.goodsinfo_set.order_by('-id')[:4] ?# 讀取購(gòu)物車商品列表cart_goods_list = []# 商品總數(shù)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)# 累加購(gòu)物車商品總數(shù)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})獲得所有分類數(shù)據(jù), 該部分功能實(shí)現(xiàn)代碼如下:
然后根據(jù)分類獲取每個(gè)分類中的4條商品數(shù)據(jù).
購(gòu)物車數(shù)據(jù)展示. 由于購(gòu)物車數(shù)據(jù)我們存儲(chǔ)在 cookie 中, 所以我們這里遍歷 request.COOKIES 從中讀取所有商品信息.
其中代碼:
if goods_id == 'csrftoken':continue由于我們的 cookie 中除了商品數(shù)據(jù)之外, django 也會(huì)增加其他的 cookie 數(shù)據(jù), 我們通過(guò) if 判斷將非商品數(shù)據(jù)的 cookie 過(guò)濾掉.
index.html 模板主要代碼實(shí)現(xiàn)如下:
<!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>天天生鮮-首頁(yè)</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">歡迎來(lái)到天天生鮮!</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">我的購(gòu)物車</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="#">關(guān)于我們</a><span>|</span><a href="#">聯(lián)系我們</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情鏈接</a> </div><p>CopyRight ? 2016 北京天天生鮮信息技術(shù)有限公司 All Rights Reserved</p><p>電話：010-****888 ? 京ICP備*******8號(hào)</p></div> </body> </html>我們由 index 視圖函數(shù)傳遞給模板的數(shù)據(jù) categories 是一個(gè)結(jié)果集, 我們?cè)?index.html 模板中, 通過(guò)使用 Django 提供的模板語(yǔ)法, 來(lái)遍歷輸出. 模板中 for 的使用格式如下:
{% for ... in ... %} ? {% endfor %}輸出變量, 我們使用如下格式的語(yǔ)法:
{{ 變量名 }}下面模板代碼, 主要用戶遍歷輸出購(gòu)物車中的商品信息.
<a href="/cart/show_cart/" class="cart_name fl">我的購(gòu)物車</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>下面的模板代碼主要用于輸出產(chǎn)品分類信息:
<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>遍歷輸出每個(gè)分類下的商品數(shù)據(jù):
{% 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 %}當(dāng)點(diǎn)擊商品圖片或者名字時(shí), 跳轉(zhuǎn)到:
/detail/?id={{ goods.id }}問(wèn)號(hào)之后的內(nèi)容為請(qǐng)求攜帶的參數(shù), 鍵為 id, 值為商品ID.
總結(jié)
以上是生活随笔為你收集整理的【Django】基于PythonWeb的Django框架设计实现天天生鲜系统-7首页界面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 【图神经网络】GNN从入门到精通
- 下一篇： 关于非诚勿扰百度专场