Django之爱鲜蜂项目开发 day03 (二)
在框架上搭好基本的页面
2. cart页面
2.1 数据筛选功能
对商品分类进行筛选
关于页面左边的商品分类,可以看一下数据库中的表
点击左边栏的按键时,根据这个id,传到后台数据库,获取相关的商品
所以,当点击左边的按钮时,刷新当前页面,页面上要传一个参数到后台,根据商品分类的 typeid 把数据从后台传过来,(这里其实又是一个url的反向解析)
app下的url.py文件,把path修改一下
页面上其他内容也要修改
base_main.html页面需要加一个参数,给个默认值,热销榜的typeid为 104749
去写一下视图函数
页面刷新的时候会闪一下,是因为加载样式的原因,可以把这条base.html文件里的js样式移一下,让它先加载这个js样式
然后去判断一下,把typeid传过来,
在market.html页面上判断一下
这时候点击相应的商品分类,右边的数据就出现对应的物品,且橙色条也跟着改变
实现对右边栏的数据进行特定的筛选和排序
当我们点击相应的按键,出现相应的内容
分类筛选
写一下视图函数
把 childtype_list 传到页面上,因为它是一个列表,循环这个列表,取到每一个的第一个就是分类的名称
可以看一下浏览器上网页的效果
然后要实现的是点击这里的每一个分类,分别展示对应的数据,这个超链接的跳转,还是在本页面
typeid是父分类的id (商品分类) , childtype.1 是子分类的id (类型分类) ,这时候报红,是需要在urls.py文件修改一下 path,需要加入对应的参数
然后去views.py文件修改一下视图函数
base_main.html文件也需要加一个参数,可以给一个默认的0,就是还没有点击分类
然后看一下页面,分类的跳转功能就实现了
全部类型这一模块此时css样式是显示的,默认情况下这一块要隐藏,点击按键时展示
写一个js样式
然后在market.html页面去引入这个js文件
给这个分类加上id
鼠标点击的超链接,也加一个id
但这里还有个小问题,鼠标点击其余空白地方时,分类栏应当缩回去,修改一些js样式
然后 全部类型 的箭头,点击时应有向上向下
再修改一下js样式
去market.html页面加’一个id
这个默认箭头时,列出分类,可修改js完善
排序筛选
写一下market.html页面,前面的 ‘0’ 是childtype_id (全部类型),后面的 ‘0’ 是sorttype_id (综合排序)
在urls.py文件上修改path,加上一个参数
views.py文件下的视图函数也加一个参数
然后在base_main.html页面,market.html页面都先添加默认参数0 (默认综合排序)
然后写一下在views.py文件下的视图函数
写一下market.html页面,加上id样式,
然后写一下js样式,这里不多做解释
可以运行一下,查看浏览器,闪购这个页面的基本页面就完成了
文件链接
链接:https://pan.baidu.com/s/1dTCpvYi_SYePzKQ8WUEA1g
提取码:znhi
Django之爱鲜蜂项目开发 day03 (二)相关推荐
- Django之爱鲜蜂项目开发 day01 (二)
现在先将底部专栏写好,搭好基本的框架 1. 将网上下载的静态文件导入 咳咳,我们这里主要是写后端的内容,前端的就敷衍一下,每一步都会有一些相应的解析,但不做详解 img文件夹这里放的是是底部专栏的一些 ...
- Django之爱鲜蜂项目开发 day03 (一)
在框架上搭好基本的页面 2. cart页面 1.页面 首先来了解一下这个页面的功能,大家可以联想一下淘宝和其他购物app,首先进入这个页面,默认是跳到热销榜的内容,然后可以根据类型去排序,点击相应的按 ...
- Django之爱鲜蜂项目开发 day05(二)
在框架上搭好基本的页面 4. 购物车页面 4.3 购物车cart页面 4.3.1 cart视图函数及页面 根据css样式写一下cart.html页面 展示一下 4.3.2 实现购物车商品的增减 通过 ...
- Django之爱鲜蜂项目开发 day02 (二)
在框架上搭好基本的页面 1. home页面 1.2 轮播图 导航 必买 商店 home页面除了轮播图,还有导航,必买,商店等模块 通过首页数据.txt文件,可以发现,这些数据都具有相同的属性,所以,他 ...
- Django之爱鲜蜂项目开发 day06(二)
2订单模块 2.1表的关联 一个用户可以有多个订单 1:n 一个订单中可以有多个商品 一个商品可以在多个订单中 订单----商品 m:n 2.2建立模型 做一下数据迁移 然后可以查看一下,数据库中多了 ...
- Django之爱鲜蜂项目开发 day01 (一)
1. 软件开发的一般流程 需求分析及确认: 由需求分析工程师与客户确认甚至挖掘需求.输出需求说明文档. 概要设计及详细设计: 开发对需求进行概要设计,包括系统的基本处理流程,组织结构.模块划分.接口设 ...
- Django之爱鲜蜂项目开发 day06(一)
1支付流程 当购物车商品筛选完毕点击结算按键时,跳转到支付宝支付流程 1.1支付宝支付时序流程图 1.2 沙箱模拟 这里支付并不是支付宝真正的交易,而是使用沙箱模拟交易,一般开发的时候,都是可以先去沙 ...
- Django之爱鲜蜂项目开发 day02 (一)
在框架上搭好基本的页面 1. home页面 1.1插入轮播图 前面也说过,这个项目中很多的前端内容都是写好的,只是作为引用.前端的 css, js 框架很多都是引用bootstrap网站上的,可进入此 ...
- Django之爱鲜蜂项目开发 day04
在框架上搭好基本的页面 3. 我的页面 3.1 mine页面 页面上的图标都是bootstrap网站上的图标 https://v3.bootcss.com/components/ 根据图标名称,css ...
最新文章
- leetcode 组合总和
- C语言:画一个爱心 送女票
- python函数调用位置_python函数定义,调用,传参,位置参数及关键字参数,返回值
- php 日历 代码,PHP 简单日历实现代码
- Apache伪静态学习
- 开源干货!.NET Core + Vue.js通用动态权限(RBAC)管理系统框架[DncZeus]开源
- 网络短视频内容审核趋严!短视频不得未经授权剪辑影视剧
- scrapy setting
- Android打开App2SD
- 创建数组-直接法/增量法 namelengthmax isvarname iskeyword
- 关于/r与/n以及 /r/n 的区别总结
- Etherpad配置及管理功能
- 华为交换机S3700基本配置
- Java中文汉字转汉语拼音
- DevOps八荣八耻了解下,哈哈~
- Use Eager execution or decorate this function with @tf.function.
- opencv根据摄像头名称打开摄像头(附源码)
- 智慧城市的背后是大数据的深度挖掘和利用
- 基于IMS的VoLTE业务
- Ajax和Json使用入门
热门文章
- matlab如何读取二维数组,Matlab从csv文件中读取多个二维数组
- 越是看起来不起眼的小生意利润越大
- 深海迷航创造模式火箭怎么飞_深海迷航火箭怎么发射说什么没关 | 手游网游页游攻略大全...
- 【绝招:怎么永久关闭linux防火墙】
- 全能视频转换工具:OmniConverter全能转换器 for Mac
- Arduino ATmega328P
- Linux中sysstat服务,Linux如何使用sysstat中的命令
- 微波射频学习笔记15-------了解1/4波长天线
- Dictionary Learning详解(附带K-SVD算法)
- 基于单片机的自动追日系统设计_一种太阳能光伏支架自动追日系统的制作方法...