开发者社区> 熊猫ewall> 正文

22、商品列表页

简介: 前言:本章主要是商品列表页的一个基本布局讲解。(具体效果请下滑到底部) Github:https://github.com/Ewall1106/mall(请选择分支chapter22) 1、新建goodList.
+关注继续查看

前言:本章主要是商品列表页的一个基本布局讲解。(具体效果请下滑到底部)
Github:https://github.com/Ewall1106/mall(请选择分支chapter22)

1、新建goodList.vue页面

(1)新建文件 > 然后编写vue页面的一个基本结构

img_f9fab14097c71f79c003eb351abebbe5.png
新建goodList.vue

(2)然后我们就去router中注册goodList路由

img_8f23490fa33618986a61f725c409131e.png
router路由.png

2、编写商品列表页

(1)头部标题

  • 头部跟classify.vue页面的头部栏大同小异,所以你也可以抽离成一个组件;其次,对于title名的话应该是由路传参带过来的、是动态的,所以我们用模板语法包起来。
img_dd1fa70e6b97422df2dfe28b3efb9b36.png
获取上级页面传过来的路由参数
  • ok,现在我们回过头返回到classify.vue分类页面添加路由跳转函数并在参数中携带title
img_cb6808f76e392e834fa339fbd507e737.png
classify.vue中添加点击事件
img_4579ad5652196cb1989a7464e791cae9.png
click事件
  • 这样,我们从上一级点击进来的名字就赋到商品列表的title了:
img_58b97d138aacbfca91c6e8923b042e08.png
头部标题

对这部分路由传参还不熟的可参考v-router之什么是编程式路由

(2)筛选工具栏

img_f56778b69fa7c70137dc1c9315823484.png
筛选工具栏

(3)商品列表
对于商品列表我们可以把里面的单个商品item用封装成一个组件从而实现复用。

  • components文件夹下新建goodItem.vue组件
img_3c75c1f9ea695748a84f628855caf737.png
新建goodItem.vue组件
  • 引入组件并完善商品列表页面样式,这就是我们商品列表页的一个基本呈现:
img_2e37193299746f76c2ad36102e46e550.png
基本效果

3、小结

主要是一个html+css的基本布局,下一章渲染下把mock数据到页面,然后着重讲下父子组件之间的传值。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
购物车增减商品数量2-修改商品小计parents34
购物车增减商品数量2-修改商品小计parents34
34 0
SEO聚合页和专题页的区别
我们在优化网站时接触聚合和专题页面,对搜索引擎来说,相关的聚合和专题页面的质量很高,所以合理利用这两个页面可以配置很多关键词,今天就seo中的聚合页面和专题页面的不同进行说明。
215 0
18、【 商品管理模块开发】——前台商品详情、列表、搜索、动态排序功能开发
1、接口编写: 在portal包下新建ProductController类: image.png image.png 1、前台查询商品详情接口: *Controller: //前台查询商品详情接口 @RequestMapping("detail.
1007 0
21、【购物车模块】——全选、全反选、单选、单反选、查询购物车商品数量功能开发
1、接口开发: 1、全选接口开发: *Controller: //全选 @RequestMapping("select_all.do") @ResponseBody public ServerResponse selectAl...
1674 0
24、商品列表页之数据渲染和传值
前言:本章算是上一章《vue父子组件之间的传值》知识点在项目中的一个实际运用。 Github:https://github.com/Ewall1106/mall(请选择分支chapter24) 1、商品列表页基本数据结构及mock 在mock文件夹下新建goodsList.js用于存储商品数据 添加json基本数据结构 mock数据基本结构 2、axios请求mock数据 import引入axios; axios请求本地mock数据; 打印并查看。
1158 0
Android开发小技巧之商品属性筛选与商品筛选
前言 一周一篇文章,果真是不太容易。顺便吐槽一下上周也就是9月5号的文章,几天之内就耗完了我1.4G的空间流量,吓得我都抽搐了。 这个次为大家带来的是一个完整的商品属性筛选与商品筛选。
675 0
为dedecms文章列表页标题增加序号,第二页开始才显示第x页
  想必大伙建站都会写文章,随着时间的推移,你的智慧结晶会越来越多,一般的建站程序早帮你想好了,把这些文章做成一个列表,比如dedecms栏目列表,便于观众浏览,但有个问题就是dedecms文章列表页标题没有序号,如果是默认的话,第N页的标题和第一页的标题一模一样,对se相当不友好,它会认为你的网站重复页面太多,可能会对你的网站区别对待,那就太委屈了。
899 0
+关注
熊猫ewall
技术高手并无佛光普照,只是一群优秀的手艺人 技术博文:https://www.jianshu.com/u/9d946428f053
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载
相关实验场景
更多