【Django】网上蛋糕项目商城-关键字搜索,商品详情功能

概念

上文中已经实现热销和新品的商品列表功能，本文篇幅中实现关键字搜索商品，将商品加入购物车，以及查看商品的详情信息等功能

关键字搜索实现步骤

在head.html头部页面中，鼠标移动至搜索图标会显示隐藏的搜索框进行输入关键信息搜索

在urls.py文件中定义接收该请求的地址

path('goods_search/',views.goods_search),

接着在views.py文件中定义goods_search函数，处理该请求

# 处理关键字搜索的请求
def goods_search(request):keyword=request.GET["keyword"]# 读取分页页码try:ym = request.GET["ym"]except:ym = 1# 根据关键字模糊查询所有相关商品goods=Goods.objects.filter(name__contains=keyword)# 将该分类的商品信息进行分页处理,每页显示8条记录pag = paginator.Paginator(goods, 8)# 根据当前页码获取当前分页信息pageInfo = pag.get_page(ym)# 获取当前页的商品列表信息goodsList = pageInfo.object_list# 获取总页码数yms = pag.page_rangereturn render(request,"goods_search.html",{"typeList": types, "keyword": keyword, "goodsList": goodsList, "page": pageInfo, "yms": yms})

将处理后的数据发送给goods_search.html页面显示

<!DOCTYPE html>
<html>
<head><title>首页</title>{% load static %}<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><style>#nav{width: 100%;height: 40px;margin-top: 20px;clear: left;}#nav a{text-decoration: none;margin: 3px;background-color: cadetblue;}#nav a:hover{background-color: #FF1719;}#nav a.c_page{background-color: #FF1719;}#nav a.up_page,#nav a.do_page{width: 70px;height: 30px;padding: 5px 10px;border-radius: 5px;color: white;display: inline-block;}#nav a.p_page{width: 30px;height: 30px;padding: 5px;border-radius: 5px;color: white;display: inline-block;}</style><script>//定义方法，用于处理分页导航栏的样式function a_style() {//通过class选择器获得分页导航栏对象var aElements=document.getElementsByClassName("p_page");for (var i = 0; i < aElements.length; i++) {var text=aElements.item(i).innerHTML;if (text<10){aElements.item(i).innerHTML="&nbsp;&nbsp;"+text+"&nbsp;&nbsp;";}}}</script>
</head>
<body>
{% include "header.html" with flag=8 typeList=typeList %}<div class="products"><div class="container"><h2> 搜索 ‘{{ keyword }}’的结果 </h2><div class="col-md-12 product-model-sec">{% for g in goodsList %}<div class="product-grid"><a href="/goods_detail?id={{ g.id }}"><div class="more-product"><span> </span></div><div class="product-img b-link-stripe b-animate-go  thickbox"><img src="{% static g.cover %}" class="img-responsive" alt="{{ g.name }}" width="240" height="240"><div class="b-wrapper"><h4 class="b-animate b-from-left  b-delay03"><button>查看详情</button></h4></div></div></a><div class="product-info simpleCart_shelfItem"><div class="product-info-cust prt_name"><h4>{{ g.name  }}</h4><span class="item_price">¥ {{ g.price  }}</span><input type="button" class="item_add items" value="加入购物车" onclick="buy({{ g.id }})"><div class="clearfix"> </div></div></div></div>{% endfor %}<div class="clearfix"> </div></div><div><!-- 显示页码导航栏 --><div id="nav" align="center"><!-- 上一页 --><!-- 判断当前页是否有上一页，如果有上一页则显示上一页的按钮，否则就不显示上一页 -->{% if page.has_previous %}<a href="/goods_search/?ym={{ page.previous_page_number }}&keyword={{ keyword }}" class="up_page">上一页</a>{% endif %}<!-- 页码 -->{% for ym in yms %}{% if page.number == ym %}<a href="/goods_search/?ym={{ ym }}&keyword={{ keyword }}" class="p_page c_page">{{ ym }}</a>{% else %}<a href="/goods_search/?ym={{ ym }}&keyword={{ keyword }}" class="p_page">{{ ym }}</a>{% endif %}{% endfor %}<!-- 下一页 -->{% if page.has_next %}<a href="/goods_search/?ym={{ page.next_page_number }}&keyword={{ keyword }}" class="do_page">下一页</a>{% endif %}</div></div></div>
</div>
{% include "footer.html" %}</body>
</html>

商品详情实现步骤

查看商品详情的功能在以上各篇文章中都需要涉及，首页中的轮播图商品，热销，新品，商品分类以及商品关键字搜索，甚至后面的购物车功能中都需要查看商品的详情信息，因此这个模块很重要。

那么我们不管从哪个功能上查看的商品，如果需要查看该商品详情信息，那么必须向服务器发送请求并将该商品编号发送给服务器

 在urls.py文件中定义该请求地址

path('goods_detail/',views.goods_detail),

在views.py中定义goods_detail函数处理该请求

# 处理商品详情的请求
def goods_detail(request):# 获取当前要查看的商品idid=request.GET["id"]# 根据商品id查询商品详细信息gs=Goods.objects.filter(id=id)# 将实体类对象转换成字典进行遍历for g in gs.values():t = Type.objects.get(id=g["type_id"])g["typename"] = t.nameg["typeid"]=t.idreturn render(request,"goods_detail.html",{"g":gs[0],"typeList": types})

在goods_detail.html页面上展示商品详情

<!DOCTYPE html>
<html>
<head><title>商品详情</title>{% load static %}<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' %}"><link type="text/css" rel="stylesheet" href="{% static 'css/flexslider.css' %}"><script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script><script type="text/javascript" src="{% static 'js/jquery.flexslider.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><script>$(function() {$('.flexslider').flexslider({animation: "slide",controlNav: "thumbnails"});});</script>
</head>
<body>{% include "header.html" with typeList=typeList %}<div class="single"><div class="container"><div class="single-grids">				<div class="col-md-4 single-grid">		<div class="flexslider"><ul class="slides"><li data-thumb="{% static g.cover %}"><div class="thumb-image"> <img src="{% static g.cover %}" data-imagezoom="true" class="img-responsive"> </div></li><li data-thumb="{% static g.image1 %}"><div class="thumb-image"> <img src="{% static g.image1 %}" data-imagezoom="true" class="img-responsive"> </div></li><li data-thumb="{% static g.image2 %}"><div class="thumb-image"> <img src="{% static g.image2 %}" data-imagezoom="true" class="img-responsive"> </div></li> </ul></div></div>	<div class="col-md-4 single-grid simpleCart_shelfItem">		<h3>{{ g.name }}</h3><div class="tag"><p>分类 : <a href="goods_list?typeid=${g.type.id}">{{ g.typename }}</a></p></div><p>{{ g.intro }}</p><div class="galry"><div class="prices"><h5 class="item_price">¥ {{ g.price }}</h5></div><div class="clearfix"></div></div><div class="btn_form"><a href="javascript:;" class="add-cart item_add" onclick="buy({{ g.id }})">加入购物车</a></div></div><div class="col-md-4 single-grid1"><!-- <h2>商品分类</h2> --><ul><li><a  href="/goods_list">全部系列</a></li>{% for t in typeList %}<li><a href="/goods_list?typeid={{ t.id }}">{{ t.name }}</a></li>{% endfor %}</ul></div><div class="clearfix"> </div></div></div></div>{% include "footer.html" %}
</body>
</html>

所有商品列表页面中，都能点击商品进行该查看商品详情信息页面，这里不再一一讲解。  

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

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

相关文章

吉利银河L6(官方小订送的3M) 对比 威固vk70+ks15

吉利银河L6(官方小订送的3M) 对比 威固vk70+ks15

吉利送的号称价值2000的3M效果 撕膜重贴 威固vk70ks15 之后的效果 // 忘记测反射的热量了 可以验证金属膜是反射热而不是吸热 金属膜 手机GPS还能用吗 亲测 能用 太阳能总阻隔率 3M貌似20%出头 威固前档55% 侧后挡高一点不超过60% 夏天真实太阳发热能量 即阻隔率55%到60% …
阅读更多...
使用Visual Studio Code记笔记

使用Visual Studio Code记笔记

因为学习需要&#xff0c;记笔记是很有必要的&#xff0c;平常发CSDN&#xff08;都让CSDN是很棒的哈&#xff09;&#xff0c;后来使用VS Code的时候发现了很多插件&#xff0c;觉得做笔记还是相对不错的&#xff0c;主要用到的还是Markdown 主要设计的插件包括&#xff1a; …
阅读更多...
PL/SQL入门到实践

PL/SQL入门到实践

一、什么是PL/SQL PL/SQL是Procedural Language/Structured Query Language的缩写。PL/SQL是一种过程化编程语言&#xff0c;运行于服务器端的编程语言。PL/SQL是对SQL语言的扩展。PL/SQL结合了SQL语句和过程性编程语言的特性&#xff0c;可以用于编写存储过程、触发器、函数等…
阅读更多...
Hallo：分级音频驱动视觉合成肖像动画

Hallo：分级音频驱动视觉合成肖像动画

团队&#xff1a;百度&#xff08;王井东大佬&#xff09;&#xff0c;复旦&#xff0c;瑞士ETH&#xff0c;南大 文章目录 概要介绍相关工作整体架构流程技术名词解释层次音频驱动的视觉合成训练和推理训练实验设置讨论社会风险和缓解措施小结 概要 肖像图像动画领域&#x…
阅读更多...
如何修改PDF文档的作者名称？

如何修改PDF文档的作者名称？

要修改一个 PDF 文档的作者名称&#xff0c;你可以按照以下步骤进行操作&#xff1a; 1. **使用 Adobe Acrobat**&#xff08;如果有&#xff09;&#xff1a; - Adobe Acrobat 是一个功能强大的 PDF 编辑工具&#xff0c;支持修改文档属性信息&#xff0c;包括作者名称。打开…
阅读更多...
一个用于自动复制文本的小工具：Auto_Copy

一个用于自动复制文本的小工具：Auto_Copy

自动复制工具 这是一个在 Windows 上用于自动复制选中文本到剪贴板的小工具。该工具还允许通过右键单击粘贴剪贴板内容。 灵感来源： 在使用Mobaxterm时，我注意到其软件中具备选中即自动复制和右键直接粘贴的功能。但是，这种选中自动复制的功能仅在软件内部有效。由于这一功能…
阅读更多...
什么是无头浏览器？

什么是无头浏览器？

简而言之&#xff0c;无头浏览器是没有图形用户界面 &#xff08;GUI&#xff09; 的 Web 浏览器。GUI 包括用户与之交互的数字元素&#xff0c;例如按钮、图标和窗口。但是&#xff0c;关于无头浏览器&#xff0c;您需要了解的还有很多。 在本文中&#xff0c;您将了解什么是…
阅读更多...
Go语言环境安装 第一个Go程序

Go语言环境安装 第一个Go程序

Go下载地址 哪个能用用哪个。 https://go.dev/ https://golang.google.cn/&#xff08;Golang官网的官方镜像&#xff09; Windows 使用.msi安装包安装 下载msi文件 安装 双击运行go1.22.4.windows-amd64.msi Next 勾选I accept the terms in the License Agreement&…
阅读更多...
Webpack: 持久化缓存大幅提升构建性能

Webpack: 持久化缓存大幅提升构建性能

概述 缓存是一种应用非常广泛性能优化技术&#xff0c;在计算机领域几乎无处不在&#xff0c;例如&#xff1a;操作系统层面 CPU 高速缓存、磁盘缓存&#xff0c;网路世界中的 DNS 缓存、HTTP 缓存&#xff0c;以及业务应用中的数据库缓存、分布式缓存等等。 那自然而然的&am…
阅读更多...
路径规划 | 基于蜣螂优化算法的栅格地图机器人路径规划（Matlab）

路径规划 | 基于蜣螂优化算法的栅格地图机器人路径规划（Matlab）

目录 效果一览基本介绍程序设计参考文献 效果一览 基本介绍 路径规划 | 基于蜣螂优化算法的栅格地图机器人路径规划&#xff08;Matlab&#xff09; 1.利用蜣螂算法DBO优化栅格地图机器人路径规划&#xff0c;效果如图所示&#xff0c;包括迭代曲线图、栅格地图等等&#xff5e…
阅读更多...
VScode配置

VScode配置

1.设置鼠标悬停提示 1.1 问题描述 打开vscode&#xff0c;按住ctrl鼠标左键不能跳转定义&#xff08;右键没有go to definition&#xff09; 1.2 解决办法 打开设置界面&#xff1a;文件->首选项->设置在搜索框中搜索intelli Sense Engine &#xff08;需要先安装C/C…
阅读更多...
【Python】已解决：ModuleNotFoundError: No module named ‘sklearn‘

【Python】已解决：ModuleNotFoundError: No module named ‘sklearn‘

文章目录 一、分析问题背景二、可能出错的原因三、错误代码示例四、正确代码示例五、注意事项 已解决&#xff1a;ModuleNotFoundError: No module named ‘sklearn‘ 一、分析问题背景 在进行机器学习项目时&#xff0c;Scikit-Learn&#xff08;简称sklearn&#xff09;是一…
阅读更多...
Linux多进程和多线程(二)-进程间通信-管道用法

Linux多进程和多线程(二)-进程间通信-管道用法

进程间通信 关于多进程的通信管道无名管道(匿名管道)创建无名管道示例:创建子进程,父进程通过管道向子进程发送消息无名管道(匿名管道) 的特点 有名管道(命名管道) 创建有名管道需要调⽤ mkfifo() 函数示例:创建两个没有关联关系的进程,通过有名管道通信 注意: 缺点优点 关于判…
阅读更多...
Linux多进程和多线程(一)-进程的概念和创建

Linux多进程和多线程(一)-进程的概念和创建

进程 进程的概念进程的特点如下进程和程序的区别LINUX进程管理 getpid()getppid() 进程的地址空间虚拟地址和物理地址进程状态管理进程相关命令 ps toppstreekill 进程的创建 并发和并行fork() 父子进程执行不同的任务创建多个进程 进程的退出 exit()和_exit() exit()函数让当…
阅读更多...
七日世界Once Human跳ping、延迟高、丢包怎么办？

七日世界Once Human跳ping、延迟高、丢包怎么办？

七日世界是一款开放世界为轴点的生存射击游戏&#xff0c;玩家将进入一个荒诞、荒芜的末日世界&#xff0c;在这里与好友一起对抗可怖的怪物和神秘物质星尘的入侵&#xff0c;给这个星球留下最后的希望&#xff0c;共筑一片安全的领地。不过有部分玩家在游玩七日世界的时候&…
阅读更多...
昇思MindSpore学习笔记7--函数式自动微分

昇思MindSpore学习笔记7--函数式自动微分

摘要&#xff1a; 介绍了昇思MindSpore神经网络训练反向传播算法中函数式自动微分的使用方法和步骤。包括构造计算函数和神经网络、grad获得微分函数&#xff0c;以及如何处理停止渐变、获取辅助数据等内容。 一、概念要点 神经网络训练主要使用反向传播算法&#xff1a; 准备…
阅读更多...
从AICore到TensorCore：华为910B与NVIDIA A100全面分析

从AICore到TensorCore：华为910B与NVIDIA A100全面分析

华为NPU 910B与NVIDIA GPU A100性能对比&#xff0c;从AICore到TensorCore&#xff0c;展现各自计算核心优势。 AI 2.0浪潮汹涌而来&#xff0c;若仍将其与区块链等量齐观&#xff0c;视作炒作泡沫&#xff0c;则将错失新时代的巨大机遇。现在&#xff0c;就是把握AI时代的关键…
阅读更多...
RAG 基本流程及处理技巧 with LangChain

RAG 基本流程及处理技巧 with LangChain

LLM 主要存在两个问题&#xff1a;幻想和缺乏领域知识。领域知识缺乏的原因是因为训练 LLM 本身的知识更新慢&#xff0c;对特定领域的知识也没有太细致的输入。 RAG 主要是解决 LLM 缺乏领域知识的问题。底层的逻辑是&#xff1a;把 LLM 作为逻辑推理引擎&#xff0c;而不是信…
阅读更多...
机器学习--概念理解

机器学习--概念理解

知识点 一、机器学习概述 人工智能 机器学习 深度学习 学习的范围&#xff1a;模式识别、数据挖掘、统计学习、计算机视觉、语音识别、自然语言处理 可以解决的问题&#xff1a;给定数据的预测问题 二、机器学习的类型 监督学习 分类 回归 无监督学习 聚类 降维 强化…
阅读更多...
恢复的实现技术-日志和数据转储

恢复的实现技术-日志和数据转储

一、引言 在系统正常运行的情况下&#xff0c;事务处理的恢复机制应采取某些技术措施为恢复做好相应的准备&#xff0c;保证在系统发生故障后&#xff0c;能将数据库从一个不一致的错误状态恢复到一个一致性状态 恢复技术主要包括 生成一个数据库日志&#xff0c;来记录系统中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023