【Django】網上蛋糕項目商城-首頁

概念

本文在上一文章搭建完數據庫，以及創建好項目之后，以及前端靜態文件后，對項目的首頁功能開發。

后端代碼編寫

這里我們使用pymysql模塊對數據庫進行操作，獲取數據。因此需要在dos窗口使用以下指令下載該庫文件

pip install pymysql

在views.py文件中創建方法，連接數據庫，并獲取首頁需要的數據

# Create your views here.
con = pymysql.connect(host="127.0.0.1", port=3306,user="root", password="admin",db="cookieshop", charset="utf8")
# 獲得游標
cursor = con.cursor()
def getGoodsList(type):# 根據類型查詢商品列表信息cursor.execute("select g.id,g.name,g.cover,g.price,t.name as typename from recommend r,goods g,type t where type=%s and r.goods_id=g.id and g.type_id=t.id",(type))newList=cursor.fetchall()ns=[]for new in newList:n={"id":new[0],"name":new[1],"cover":new[2],"price":new[3],"typename":new[4]}ns.append(n)return ns
def index(request):# 查詢所有蛋糕商品分類名稱cursor.execute("select * from type")types=cursor.fetchall()ts=[]for type in types:t=Type(type[0],type[1])ts.append(t)# 查詢推薦欄的商品信息cursor.execute("select g.id,g.name,g.cover,g.price  from recommend r,goods g where r.goods_id=g.id")scrolls=cursor.fetchall()ss=[]for scroll in scrolls:s={"id":scroll[0],"name":scroll[1],"cover":scroll[2],"price":scroll[3]}ss.append(s)newList=getGoodsList(3)hotList=getGoodsList(2)return render(request,"index.html",{"typeList":ts,"scroll":ss,"newList":newList,"hotList":hotList} )

在models.py文件中創建Type實體類

#商品分類表
class Type(object):def __init__(self,id,name):""":param id: 商品分類id:param name: 商品分類名稱"""self.id=idself.name=name

前端頁面搭建

在子項目中創建templates文件夾，在該文件夾下創建header.html,foot.html以及index.html作為首頁的前端內容

header.html

<div class="header"><div class="container"><nav class="navbar navbar-default" role="navigation"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><h1 class="navbar-brand"><a href="/index"></a></h1></div><!--navbar-header--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="/index"{% if flag == 1 %}class="active"{% endif %}>首頁</a></li><li class="dropdown"><a href="#" class="dropdown-toggle{% if flag == 2 %}active{% endif %}" data-toggle="dropdown">商品分類<b class="caret"></b></a><ul class="dropdown-menu multi-column columns-2"><li><div class="row"><div class="col-sm-12"><h4>商品分類</h4><ul class="multi-column-dropdown"><li><a class="list" href="/goods_list">全部系列</a></li>{% for t in  typeList%}<li><a class="list" href="/goods_list?typeid={{ t.id }}">{{t.name}}</a></li>{% endfor %}</ul></div></div></li></ul></li><li><a href="/goodsrecommend_list?type=2" {% if  flag == 3 and t == 2 %} class="active" {% endif %}>熱銷</a></li><li><a href="/goodsrecommend_list?type=3" {% if  flag == 3 and t == 3 %} class="active" {% endif %}>新品</a></li>{% if user %}<li><a href="/order_list" {% if  flag == 5 %} class="active" {% endif %}>我的訂單</a></li><li><a href="/user_center.jsp" {% if  flag == 4 %} class="active" {% endif %}>個人中心</a></li><li><a href="/user_logout" >退出</a></li>{% else %}<li><a href="/user_register.jsp" {% if  flag == 10 %} class="active" {% endif %}>注冊</a></li><li><a href="/user_login.jsp" {% if  flag == 9 %} class="active" {% endif %}>登錄</a></li>{% endif %}{% if user and user.isadmin %}<li><a href="/admin/index.jsp" target="_blank">后臺管理</a></li>{% endif %}</ul><!--/.navbar-collapse--></div><!--//navbar-header--></nav><div class="header-info"><div class="header-right search-box"><a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a><div class="search"><form class="navbar-form" action="/goods_search"><input type="text" class="form-control" name="keyword"><button type="submit" class="btn btn-default{% if flag == 7 %}active{% endif %}" aria-label="Left Align">搜索</button></form></div></div><div class="header-right cart"><a href="goods_cart.jsp"><span class="glyphicon glyphicon-shopping-cart{% if flag == 8 %}active{% endif %}" aria-hidden="true"><span class="card_num">{% if order %}{{ order.amount }}{% else %}0{% endif %}</span></span></a></div><div class="clearfix"> </div></div><div class="clearfix"> </div></div>
</div>

foot.html

<div class="footer"><div class="container"><div class="text-center"></div></div>
</div>

index.html

<!DOCTYPE html>
<html>
<head>{% load static %}<title>首頁</title><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link type="text/css" rel="stylesheet" href="{% static 'css/bootstrap.css' %}"><link type="text/css" rel="stylesheet" href="{% static 'css/style.css' %}"><script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script><script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script><script type="text/javascript" src="{% static 'layer/layer.js' %}"></script><script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</head>
<body>
<!--header-->
{% include "header.html" with flag=1 typeList=typeList %}
<!--banner--><div class="banner"><div class="container"><div id="carousel-example-generic" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators" id="olnum">{% for g in scroll %}{% if forloop.first %}<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>{% else %}<li data-target="#carousel-example-generic" data-slide-to="{{ forloop.counter0 }}"></li>{% endif %}{% endfor %}</ol><!-- Wrapper for slides --><div class="carousel-inner" role="listbox" id="lunbotu" style="width: 1242px; height: 432px;">{% for g in scroll %}{% if forloop.first %}<div class="item active"><h2 class="hdng"><a href="/goods_detail?id={{ g.id }}">{{ g.name }}</a><span></span></h2><p>今日精選推薦</p><a class="banner_a" href="javascript:;" onclick="buy({{ g.id }})">立刻購買</a><div class="banner-text"><a href="/goods_detail?id={{ g.id }}"><img src="{% static  g.cover %}" alt="{{ g.name }}" width="350" height="350"></a></div></div>{% else %}<div class="item"><h2 class="hdng"><a href="/goods_detail?id={{ g.id }}">{{ g.name }}</a><span></span></h2><p>今日精選推薦</p><a class="banner_a" href="javascript:;" onclick="buy({{ g.id }})">立刻購買</a><div class="banner-text"><a href="/goods_detail?id={{ g.id }}"><img src="{% static  g.cover %}" alt="{{ g.name }}" width="350" height="350"></a></div></div>{% endif %}{% endfor %}</div></div></div>
</div><!--//banner--><div class="subscribe2"></div><!--gallery-->
<div class="gallery"><div class="container"><div class="alert alert-danger">熱銷推薦</div><div class="gallery-grids">{% for g in hotList %}<div class="col-md-4 gallery-grid glry-two"><a href="/goods_detail?id={{ g.id }}"><img src="{% static  g.cover %}" class="img-responsive" alt="{{ g.name }}" width="350" height="350"/></a><div class="gallery-info galrr-info-two"><p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span><a href="/goods_detail?id={{ g.id }}">查看詳情</a></p><a class="shop" href="javascript:;" onclick="buy({{ g.id }})">立刻購買</a><div class="clearfix"></div></div><div class="galy-info"><p>{{ g.typeName }} > {{ g.name }}</p><div class="galry"><div class="prices"><h5 class="item_price">￥ {{ g.price }}</h5></div><div class="clearfix"></div></div></div></div>{% endfor %}</div><div class="clearfix"></div><div class="alert alert-info">新品推薦</div><div class="gallery-grids">{% for g in newList %}<div class="col-md-3 gallery-grid "><a href="/goods_detail?id={{ g.id }}"><img src="{% static  g.cover %}" class="img-responsive" alt="{{ g.name }}"/></a><div class="gallery-info"><p><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span><a href="/goods_detail?id={{ g.id }}">查看詳情</a></p><a class="shop" href="javascript:;" onclick="buy({{ g.id }})">立刻購買</a><div class="clearfix"></div></div><div class="galy-info"><p>{{ g.typeName }} > {{ g.name }}</p><div class="galry"><div class="prices"><h5 class="item_price">￥ {{ g.price }}</h5></div><div class="clearfix"></div></div></div></div>{% endfor %}</div></div>
</div>
<!--//gallery--><!--subscribe-->
<div class="subscribe"></div>
<!--//subscribe-->
<!--footer-->
{% include "footer.html" %}
</body>
</html>

在主項目的urls.py文件中定義請求地址，用于瀏覽器訪問views.py文件

?path('',vc.index),

?在PyCharm的內置dos窗口中輸入以下指令啟動服務器

python manage.py runserver

瀏覽器中訪問該地址

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/36818.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/36818.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/36818.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

springboot3搭建WebSocket服務

springboot3搭建WebSocket服務

springboot3搭建WebSocket服務 文章目錄 springboot3搭建WebSocket服務前言一、創建SpringBoot工程二、pom.xml中引入依賴1.引入庫2. application.yml配置 三、主啟動類四、WebSocket配置類五、編寫WebSocket服務類六、編寫測試頁面總結 前言 本文詳細介紹了如何在SpringBoot項…
閱讀更多...
新型發電系統——光伏行業推動能源轉型

新型發電系統——光伏行業推動能源轉型

一、發展背景 “十四五”期間&#xff0c;隨著“雙碳”目標提出及逐步落實&#xff0c;本就呈現出較好發展勢頭的分布式光伏發展有望大幅提速。就“十四五”光伏發展規劃&#xff0c;國家發改委能源研究所可再生能源發展中心副主任陶冶表示&#xff0c;“雙碳”目標意味著國家…
閱讀更多...
Java面試題：比較Maven和Gradle的構建生命周期和依賴管理

Java面試題：比較Maven和Gradle的構建生命周期和依賴管理

Maven和Gradle是兩個流行的構建工具&#xff0c;各自有不同的構建生命周期和依賴管理機制。以下是它們的比較&#xff1a; 構建生命周期 Maven Maven有一個固定的生命周期&#xff0c;由一系列階段&#xff08;phases&#xff09;組成&#xff0c;每個階段代表一個構建步驟。…
閱讀更多...
ubuntu更改ssh默認端口22

ubuntu更改ssh默認端口22

編輯 /etc/ssh/sshd_config&#xff0c;把Port前的#去掉&#xff0c;端口號改成8022&#xff0c;重啟ssh。 // 1. 修改配置 sudo vi /etc/ssh/sshd_config// 2. 重啟 ssh sudo systemctl restart ssh//【不想確認可跳過此步驟】 3. 查看 ssh 監聽端口 sudo lsof -i:22 // 無…
閱讀更多...
MySQL改密

MySQL改密

這里寫目錄標題 更改登錄密碼&#xff1a;有權限賬號能登錄mysql中&#xff1a;有權限賬號不能登錄mysql中&#xff1a;mysql5.6版本命令mysql5.7版本命令修改密碼8.0版本改完后&#xff1a; mysql登錄不上了本機安裝了5.6后&#xff0c;又安裝了mysql8.0 更改登錄密碼&#xf…
閱讀更多...
QT QVariant 類和 C++ 的 union有什么區別

QT QVariant 類和 C++ 的 union有什么區別

QVariant 類和 C 的 union&#xff08;共用體&#xff09;在概念、用途和實現上有所不同。以下是對它們的區別和使用的簡要概述&#xff1a; QVariantQT 如何儲存多種數據類型&#xff08;QVariant &#xff09;-CSDN博客 概念&#xff1a;QVariant 是 Qt 框架中的一個類&…
閱讀更多...
易查分小程序丨查詢開始和截止時間如何設置？

易查分小程序丨查詢開始和截止時間如何設置？

老師在發布查詢時&#xff0c;希望讓學生家長在指定的時間段才能查詢&#xff0c;應該如何實現&#xff1f; 通過查詢時段功能&#xff0c;老師可以自主設置查詢開始和截止時間&#xff0c;下面就來教給大家如何使用吧&#xff01; 設置查詢時段演示效果 &#x1f4cc;使用教程…
閱讀更多...
ASP.NETMVC-簡單例子-數據庫查詢+razor使用+項目發布

ASP.NETMVC-簡單例子-數據庫查詢+razor使用+項目發布

環境&#xff1a; win10&#xff0c;SQL Server 2008 R2 參考&#xff1a; asp.net mvc框架之EF的使用 - black娃 - 博客園 https://www.cnblogs.com/fjiqiang/p/11131365.html 目錄 數據庫查詢要求思路操作 razor使用項目發布要求實現 數據庫查詢 要求 從服務器的數據庫中查…
閱讀更多...
干貨分享 | 學會這7個工具方法，數字化轉型規劃不是難題

干貨分享 | 學會這7個工具方法，數字化轉型規劃不是難題

提到數字化轉型&#xff0c;首要做的便是分析企業現有的業務流程和價值流&#xff0c;發現企業利潤來源的關鍵點&#xff0c;進而有針對性的數字化轉型。要實現傳統業務向數字化業務的轉變&#xff0c;制定出高效、靈活的業務流程優化策略顯得至關重要&#xff0c;這樣才能找到…
閱讀更多...
簡化數據提取：Excel-Extractor 使用指南

簡化數據提取：Excel-Extractor 使用指南

前言 在當今數據驅動的世界中&#xff0c;從復雜的 Excel 文件中提取和分析數據是許多業務和研究工作的基本需求。為了簡化這一過程&#xff0c;Excel-Extractor 項目應運而生。本文將為你介紹 Excel-Extractor 的功能和如何在你的項目中使用它。 什么是 Excel-Extractor&…
閱讀更多...
【C#】制作圖集

【C#】制作圖集

如題目&#xff0c;用好幾個圖片拼在一個大圖里&#xff0c;博主是用于Unity游戲開發使用的&#xff0c;話不多說&#xff0c;上代碼&#xff01; using System; using System.Collections.Generic; using System.Drawing; using System.Drawing.Imaging;namespace EffectsPac…
閱讀更多...
Spring Boot中的安全性配置詳解

Spring Boot中的安全性配置詳解

Spring Boot中的安全性配置詳解 大家好&#xff0c;我是免費搭建查券返利機器人省錢賺傭金就用微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01;今天我們將深入探討如何在Spring Boot應用中實現全面的安全性配置&#xff0c;保…
閱讀更多...
LED裸眼3D顯示屏：開啟視覺新體驗

LED裸眼3D顯示屏：開啟視覺新體驗

隨著科技的不斷進步&#xff0c;LED顯示屏作為一種新型的顯示技術&#xff0c;已經被廣泛應用于各個領域。而其中&#xff0c;LED裸眼3D顯示屏更是因其獨特的技術原理和令人震撼的視覺效果&#xff0c;成為了業界關注的焦點。 裸眼3D顯示屏是一種前沿的顯示技術&#xff0c;它…
閱讀更多...
centos系統中neo4j數據庫和python環境部署

centos系統中neo4j數據庫和python環境部署

最近因為項目需要&#xff0c;到了一個純局域網環境中進行知識圖譜構建。對于小規模數據&#xff0c;neo4j社區版能夠滿足基本的建模和查詢需要&#xff08;大規模數據需要商業版&#xff0c;或是選用其他開源分布式圖數據庫如nebula等&#xff09;。本文主要介紹圖數據庫和pyt…
閱讀更多...
黃金架構編譯部署

黃金架構編譯部署

LNMP黃金架構部署 行走的CD: LNMP的解析過程:提到 LNMP的解析過程&#xff0c;我們應需要了解一個概念 CGI&#xff0c; CGI 就是指一個通用網關接口&#xff0c;用于 HTTP 服務器和其他應用服務器通訊的一個工具&#xff0c;在這 HTTP 服務器一般咱們就是指的是 Nginx、 Apac…
閱讀更多...
Java | Leetcode Java題解之第201題數字范圍按位與

Java | Leetcode Java題解之第201題數字范圍按位與

題目&#xff1a; 題解&#xff1a; class Solution {public int rangeBitwiseAnd(int m, int n) {while (m < n) {// 抹去最右邊的 1n n & (n - 1);}return n;} }
閱讀更多...
獲取當前操作系統的名稱platform.system()

獲取當前操作系統的名稱platform.system()

【小白從小學Python、C、Java】 【考研初試復試畢業設計】 【Python基礎AI數據分析】 獲取當前操作系統的名稱 platform.system() [太陽]選擇題 在Python中&#xff0c;platform.system() 函數被用來獲取什么信息&#xff1f; import platform print("【執行】platform.s…
閱讀更多...
如何在Java中實現自定義數據結構

如何在Java中實現自定義數據結構

如何在Java中實現自定義數據結構 大家好&#xff0c;我是免費搭建查券返利機器人省錢賺傭金就用微賺淘客系統3.0的小編&#xff0c;也是冬天不穿秋褲&#xff0c;天冷也要風度的程序猿&#xff01;今天我將為大家介紹如何在Java中實現自定義數據結構。盡管Java提供了豐富的內置…
閱讀更多...
05 threeJs基礎---陣列立方體和相機適配體驗立方體

05 threeJs基礎---陣列立方體和相機適配體驗立方體

1.增加相機視角fov 注&#xff1a; 范圍更大&#xff0c;意味著可以看到渲染范圍更大&#xff0c;遠小近大的視覺效果更明顯 fov:眼球張開的角度&#xff0c;0時相當于閉眼。aspect:可視區域橫縱比。near:眼睛能看到的最近垂直距離。far&#xff1a;眼睛能看到的最遠垂直距離。…
閱讀更多...
Python中的@property裝飾器：深入理解與應用

Python中的@property裝飾器：深入理解與應用

Python中的property裝飾器&#xff1a;深入理解與應用 在Python中&#xff0c;property裝飾器是一個強大的工具&#xff0c;它允許我們將方法作為屬性來訪問&#xff0c;使得代碼更加簡潔、清晰&#xff0c;并提供了更好的封裝性。本文將深入探討property裝飾器的工作原理、應…
閱讀更多...
最新文章

Copyright @ 2022~2023