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