【Django】网上蛋糕项目商城-首页

概念

本文在上一文章搭建完数据库,以及创建好项目之后,以及前端静态文件后,对项目的首页功能开发。

后端代码编写

在views.py文件中创建方法,连接数据库,并获取首页需要的数据

def getGoodsList(type):# 获取所有横幅滚动商品idres = Recommend.objects.filter(type=type)goodsIds = []for r in res:goodsIds.append(r.goods_id)# 根据推荐栏的商品信息goods = Goods.objects.filter(id__in=tuple(goodsIds))if type !=1:# 将实体类对象转换成字典进行遍历for g in goods.values():t = Type.objects.get(id=g["type_id"]).nameg["typename"] = treturn goods
# 处理首页的请求
def index(request):# 获取所有商品分类信息global typestypes=Type.objects.all()# 根据推荐栏的商品scrolls=getGoodsList(1)# 获取新品newList=getGoodsList(3)# 获取热品hotList=getGoodsList(2)return render(request,"index.html",{"typeList":types,"scroll":scrolls,"newList":newList,"hotList":hotList})

前端页面搭建

在子项目中创建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="/"></a></h1></div><!--navbar-header--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li><a href="/"{% 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('',views.index),

 在PyCharm的内置dos窗口中输入以下指令启动服务器

python manage.py runserver

浏览器中访问该地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/368680.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python学生信息管理系统(完整代码)

引言&#xff1a;&#xff08;假装不是一个大学生课设&#xff09;在现代教育管理中&#xff0c;学生管理系统显得尤为重要。这种系统能够帮助教育机构有效地管理学生资料、成绩、出勤以及其他教育相关活动&#xff0c;从而提高管理效率并减少人为错误。通过使用Python&#xf…

Winform使用HttpClient调用WebApi的基本用法

Winform程序调用WebApi的方式有很多&#xff0c;本文学习并记录采用HttpClient调用基于GET、POST请求的WebApi的基本方式。WebApi使用之前编写的检索环境检测数据的接口&#xff0c;如下图所示。 调用基于GET请求的无参数WebApi 创建HttpClient实例后调用GetStringAsync函数获…

什么是单例模式?

前言&#x1f440;~ 上一章我们介绍了多线程下引发的安全问题&#xff0c;今天接着讲解多线程的内容&#xff0c;同样很重要&#xff0c;请细品 单例模式 饿汉模式 懒汉模式 饿汉模式和懒汉模式的区别 再遇线程不安全问题 指令重排序问题 如果各位对文章的内容感兴趣的话…

学习笔记(linux高级编程)11

进程间通信 》信号通信 应用&#xff1a;异步通信。 中断&#xff0c;&#xff0c; 1~64&#xff1b;32应用编程。 如何响应&#xff1a; Term Default action is to terminate the process. Ign Default action is to ignore the signal. wait Core Default action is …

ffmpeg将多个yuv文件编码为MP4视频文件

一、编码方案 在视频录制时&#xff0c;每一帧保存为一个yuv文件&#xff0c;便于纠错和修改。在编码为MP4文件时&#xff0c;我的方案是将所有yuv文件先转码为单个MP4文件&#xff0c;然后使用ffmpeg的concat功能拼接为完整的视频。 二、shell脚本 #!/bin/bash# 检查参数数量…

【Arduino】ESP8266开发环境配置(图文)

ESP8266与ESP32开发很类似&#xff0c;相当于是低配版本的ESP32&#xff0c;其同样具有无线网络连接能力&#xff0c;功能强大&#xff0c;而且价格比ESP32更具有优势。接下来我们就来设置一下ESP8266的开发环境。 使用Arduino开发平台软件&#xff0c;选择首选项进行设置。 h…

【C++】 ——【模板初阶】——基础详解

目录 1. 泛型编程 1.1 泛型编程的概念 1.2 泛型编程的历史与发展 1.3 泛型编程的优势 1.4 泛型编程的挑战 2. 函数模板 2.1 函数模板概念 2.2 函数模板格式 2.3 函数模板的原理 2.4 函数模板的实例化 2.5 模板参数的匹配原则 2.6 函数模板的特化 2.7 函数模板的使…

事务底层与高可用原理

1.事务底层与高可用原理 事务的基础知识 mysql的事务分为显式事务和隐式事务 默认的事务是隐式事务 显式事务由我们自己控制事务的开启&#xff0c;提交&#xff0c;回滚等操作 show variables like autocommit; 事务基本语法 事务开始 1、begin 2、START TRANSACTION&…

MySQL数据恢复(适用于误删后马上发现)

首先解释一下标题&#xff0c;之所以适用于误删后马上发现是因为太久了之后时间和当时操作的数据表可能会记不清楚&#xff0c;不是因为日志丢失 1.首先确保自己的数据库开启了binlog&#xff08;我的是默认开启的我没有配置过&#xff09; 根据这篇博客查看自己的配置和自己…

AI墓地:738个倒闭AI项目的启示

近年来&#xff0c;人工智能技术迅猛发展&#xff0c;然而&#xff0c;不少AI项目却在市场上悄然消失。根据AI工具聚合网站“DANG”的统计&#xff0c;截至2024年6月&#xff0c;共有738个AI项目停运或停止维护。本文将探讨这些AI项目失败的原因&#xff0c;并分析当前AI初创企…

前端跨域问题--解析与实战

引言 在现代网络应用中&#xff0c;跨域问题是一个常见的挑战。由于浏览器的同源策略&#xff0c;限制了从不同源&#xff08;域名、协议或端口&#xff09;进行资源共享&#xff0c;这就造成了跨域访问的限制。跨域资源共享&#xff08;CORS&#xff09;是一种技术&#xff0…

九、函数的声明和定义

函数声明&#xff1a; 1. 告诉编译器有一个函数叫什么&#xff0c;参数是什么&#xff0c;返回类型是什么。但是具体是不是存在&#xff0c;函数 声明决定不了。 2. 函数的声明一般出现在函数的使用之前。要满足先声明后使用。 3. 函数的声明一般要放在头文件中的。 定义的函…

育才兴业,助力数字产业蓬勃发展

成都树莓集团通过校企合作、建设人才项目转化中心、推动一线多园战略以及提供全方位服务等举措&#xff0c;积极培养数字产业人才&#xff0c;为行业发展提供了有力支持。 一、校企合作&#xff0c;打造人才培养高地 树莓集团深知企业协同育人的重要性&#xff0c;积极与高校建…

某DingTalk企典 - Token

⚠️前言⚠️ 本文仅用于学术交流。 学习探讨逆向知识&#xff0c;欢迎私信共享学习心得。 如有侵权&#xff0c;联系博主删除。 请勿商用&#xff0c;否则后果自负。 网址 aHR0cHM6Ly9kaW5ndGFsay5jb20vcWlkaWFuLw 浅聊一下 没毛病&#xff0c;就这字段&#xff0c;有效期…

java考试题20道

选择题 编译Java源代码文件的命令是javac javac命令是将Java源代码文件进行编译得到字节码文件(.class文件) java命令是在JVM上运行得到的字节码文件 下面是一个示例&#xff1a; javac test.java -------> test.class java test ------> 运行test.class文件下列那…

#LinuxC高级 笔记二

makefile gcc gdb makefile 1. 分文件编程 1.1 源文件&#xff1a;.c结尾的文件 包含main函数的.c 包含子函数的.c 1.2 头文件&#xff1a;.h结尾的文件 头文件、宏定义、typedef 、结构体、共用体、枚举、函数声明 include引用时“”和<>的区别&#xff1a; <>去系…

复合机器人:手脚眼脑的完美结合

在现代工业制造的舞台上&#xff0c;复合机器人如同一位精密而高效的工匠&#xff0c;以其独特的手脚眼脑&#xff0c;正深刻改变着传统的生产方式。这些机器人不仅仅是机械臂的简单延伸&#xff0c;它们汇聚了先进的机械结构、智能的感知系统、精密的控制技术和灵活的思维能力…

【CSAPP】-linklab实验

目录 实验目的与要求 实验原理与内容 实验步骤 实验设备与软件环境 实验过程与结果&#xff08;可贴图&#xff09; 实验总结 实验目的与要求 1.了解链接的基本概念和链接过程所要完成的任务。 2.理解ELF目标代码和目标代码文件的基本概念和基本构成 3.了解ELF可重定位目…

安全和加密常识(6)Base64编码方式

文章目录 什么是 Base64编码原理编解码示例应用什么是 Base64 Base64 是一种用于将二进制数据编码为仅包含64种ASCII字符的文本格式的编码方法,注意,它不是加密算法。它设计的目的主要是使二进制数据能够通过只支持文本的传输层(如电子邮件)进行传输。Base64常用于在需要处…

Python | 基于支持向量机(SVM)的图像分类案例

支持向量机&#xff08;SVM&#xff09;是一种监督机器学习算法&#xff0c;可用于分类和回归任务。在本文中&#xff0c;我们将重点关注使用SVM进行图像分类。 当计算机处理图像时&#xff0c;它将其视为二维像素阵列。数组的大小对应于图像的分辨率&#xff0c;例如&#xf…