【VUE】微商城（八）----商品列表，商品详情页

已于 2022-06-15 14:24:46 修改
阅读量9.8k 收藏 54
点赞数 9
分类专栏： VUE微商城 文章标签： 开发语言 vue.js 前端框架 前端 vue
于 2022-04-11 23:20:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013301892/article/details/124076940
版权
本文介绍了如何在Vue.js微商城项目中实现商品列表的展示，包括从分类页跳转、商品加载更多功能，以及商品详情页的创建，包括接收商品ID、布局设计和预览图轮播。同时，文章还详细讲解了封装并使用购买数量组件的过程，以提升用户体验。
摘要由CSDN通过智能技术生成

微商城源码

微商城后端接口项目以及部署说明包含API接口说明文档

1、分类页跳转商品列表

        1）、在pages文件夹下创建一个goods文件夹，并且在goods文件夹创建一个GoodsListView.vue 

        2）、打开router文件夹下的index.js配置GoodsListView.vue路由 

         3）、进入CategoryView.vue修改二级分类中的a标签为 router-link并添加 to属性跳转到商品列表页

         4)、通过路由传参的方式传递分类编号

了解本专栏 订阅专栏 解锁全文 超级会员免费看
攻城狮·建哥
关注
  • 9
    点赞
  • 踩
  • 54
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
Vue3+TS 结合ant design实现简单列表页和详情页
weixin_48914380的博客
02-06 4426
Vue+Ts实现列表页详情页，ant design+tailwindcss实现简单列表页详情页。详情页新增、修改、查看如何实现。
Vue 微商城项目（一）
weixin_49014227的博客
07-05 6873
简介 这是一系列关于如何用Vue编写微商城的项目文档一，适合初学者与已学完Vue基础的读者。教程与vue3.x、vue-cli4，vant-ui等框架，简单易懂。 涉及知识点 vue项目创建 vue基础知识 组件封装，如导航栏、商品卡片等 vuex、axios、vue-router的基本使用 flex布局 第三方框架的使用 设置标题 设置页面头部标题，方便告诉用户当前显示的是哪一个页面。编辑src\router.js文件，示例代码如下。 routes: [ { path: '/...
基于Vue.js微商城项目
08-18
项目采用Vue框架搭建的微商城项目，实现了登录、商品列表的展现、商品详情、商品购买的功能。
vue3实现商城系统详情页（前端实现）
最新发布
m0_72618563的博客
07-08 1382
pc端商品详情页如何实现？这篇文章或许能给你一个参考
vue中如何实现列表的详情页获取及渲染
浮生离梦的博客
04-09 9515
一、页面跳转方式 在页面中有两种跳转方式，第一种跳转方式是 使用 a 标签的形式进行跳转，也称之为标签跳转。第二种跳转方式是使用 window.location.href 的形式进行跳转，也称之为编程式跳转。 在vue页面中，实现列表页跳转到详情页，也就有两种方式。第一种是标签式跳转，通过router-link的形式进行跳转。第二种是编程式跳转，通过 this.$router.push的形式进行...
电商平台项目 Vue day7 详情页开发
kin的博客
12-27 1315
电商平台项目 Vue day7 详情页开发
Vue实现项目中的商品列表，商品详情等功能
guotianxiu1234的博客
08-01 2849
es6 学习资料：http://es6.ruanyifeng.com/ 学习目标 掌握npm的使用 课程重点内容 npm的使用 一、npm 在安装npm前先要安装Node的环境，安装的过程如下 https://www.runoob.com/nodejs/nodejs-install-setup.html 1、npm 的两层含义 NPM 是一个 第三方模块的托管网站，指的就是https://ww...
vue商品分类列表页面_商城微信小程序（二）——完成分类页面及商品列表页
weixin_35545135的博客
01-14 1859
 分类页面预览图：分类页面主要代码index.js// pages/category/index.js import { request } from "../../request/index.js" Page({ /** * 页面的初始数据 */ data: { //左侧菜单数据 leftMenuList: [], //右侧的商品数据 ...
基于vue20的微商城
08-10
在微商城项目中，vue-router可以轻松地实现页面间的跳转，如商品列表页、商品详情页、购物车页等。它支持命名路由、动态路由参数和嵌套路由，使得构建复杂的路由结构变得简单。 3. vue-resource：这是一个用于处理...
vue-微商城前后端 html web前端章节作业
12-29
通过以上知识点的学习和实践，开发者可以熟练掌握利用Vue.js构建微商城前端的技能，实现高效且具有良好用户体验的前端应用。在这个过程中，不断迭代优化，理解前端最佳实践，提高个人技术水平。
vue-shop源码适用于nodejs 14.8.0版本
06-13
Vue Shop 源码是基于 Vue.js 框架构建的微商城项目，它特别针对 Node.js 14.8.0 版本进行了优化。Vue.js 是一个轻量级的前端JavaScript框架，以其组件化、易用性和高性能著称。在本项目中，Vue 被用来创建用户界面，...
基于vue+vue-router+vuex+element-ui+axios，参考小米商城，实现的电商项目，仿小米商城源代码
03-23
本项目前后端分离，前端基于`Vue`+`Vue-router`+`Vuex`+`Element-ui`+`Axios`，参考小米商城实现。后端基于`Node.js(Koa框架)`+`Mysql`实现。 前端包含了11个页面：首页、登录、注册、全部商品、商品详情页、关于...
vue制作的简易商城
11-19
共有三个页面，首页、商品 详情页、购物车。 首页有轮播图和商品，点击商品进入商品详情页。 在商品详情页可以添加商品进入购物车，已经存在购物车的商品不可以重复添加。 购物车中可以删除已经添加的商品，改变商品...
Vue2电商前台项目——完成Detail详情页模块业务
weixin_56498069的博客
09-13 432
Vue项目——Detail模块（配置路由规则+滚动行为、获取详情页数据并展示、放大镜展示、轮播图、产品熟悉展示、放大镜实现、购买产品个数的加减操作）
Vue电商项目--详情页面--产品售卖属性
薛定谔的猫
05-28 1990
这里说到一点，就是滚动条的问题，当我们处于浏览器最低端，滚动条也处于最低端。当点击商品图片的时候，跳转到详情页面，在路由跳转的时候需要带上产品的ID给详情页面。当前计算出的categoryView属性值至少是一个空对象，假的报错就不会有了。而我们之前就已经封装好了skuInfo的数据，现在只要捞过来放在页面上就可以了。这里我们定义一个事件，传俩个值，第一个是点击售卖的属性。第二个是售卖属性的数组。就是上面的部分，我们点击自身，让他高亮。当前这个项目：连续的页码数-----5（暗含条件，分页器至少五页）
Vue电商项目--详情页面完成
薛定谔的猫
06-01 2975
这是因为.skuImageList[0]写死了索引，它只能为第一张，我们应该定义的变量来保存索引，保障这是活的索引。但我们还要加入购物车成功与失败的判断，成功进行路由的跳转，失败就提示信息。这里要注意服务器写入数据成功，并没有返回其他的数据，只返回code=200,表示这次操作成功。就是把官网的复制下来，删除一些，我们不需要的内容。然后发现了错误，404，查看一下应该是服务器接口的问题，果然加了/api导致错误。注意的一点就是我们要使用try……就是在路由跳转的时候还需要将产品的信息带给下一级的路由组件。
Vue2项目实战：尚品汇（三）商品详情界面、加入购物车成功界面、购物车界面
DogEgg_001的博客
10-09 4233
用户在搜索页点击商品图片就会跳转到商品详情页，商品信息根据商品id向服务器请求数据动态展示出。
vue3 之 商城项目—详情页
Jasmin博客
02-09 2672
1️⃣获取到当前的鼠标在盒子内的相对位置（useMouseInElement）,控制滑块跟随鼠标移动（left/top）思路：维护一个数组图片列表，鼠标划入小图记录当前小图下标值，通过下标值在数组中取对应图片，显示到大图位置。2️⃣实现放大效果，大图的宽高是小图的两倍，大图的移动方向和滑块移动方向相反，且数值为2倍。3️⃣鼠标移入盒子（isOutside），滑块和大图才显示（v-show）3️⃣鼠标移入控制滑块和大图显示隐藏。1️⃣左侧滑块跟随鼠标移动。2️⃣右侧大图放大效果实现。
vue3项目实战-第五章-商品详情页（商品热榜区/图片预览/全局组件统一注册）
m0_62300955的博客
03-13 1561
商品热榜区/图片预览/全局组件统一注册
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

攻城狮·建哥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值