AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

如何通过点击商品的信息（图片或者文字）跳转到更加详细的商品信息介绍（前后端分离之Vue实现）

2024-08-16 42
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 该博客文章介绍了如何在Vue 2框架下实现前后端分离的商品信息展示和详情页跳转，包括排序筛选、详情展示、加入购物车和分享功能。

以下只是做简单的演示、大致实现的效果。页面效果需要进一步优化。目的是提供思路

视频效果：

首页商品跳转

1、需求

  • 1、首页的的商品来自接口数据
  • 2、在首页点击某一个商品跳转到更加详细的商品介绍页面（可以购买、加入购物车、查看商品评价信息等）
  • 3、在商品详情页面刷新页面、返回首页

2、首页

这里只是简单的布局、没有优化、目的是实现商品的页面跳转

在这里插入图片描述

3、跳转后的商品信息界面

这里的布局可以自定义、怎样好看怎样布局

在这里插入图片描述
在这里插入图片描述

4、数据来自后端接口

4.1 后台管理商品信息

在这里插入图片描述

4.2 接口数据

在这里插入图片描述

5、后语

原来如此简单就可以实现、学到了、学无止境。。。。。。

6、资源地址

篇幅有限：更加详细的代码说明（包含源代码、具体实现过程）
https://download.csdn.net/download/weixin_43304253/86911275

文章标签：
JavaScript
关键词：
跳转VUE.js
商品VUE.js
点击VUE.js
点击跳转VUE.js
点击商品VUE.js
热爱技术的小郑
目录
相关文章
mao29955
|
1天前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项，它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别，可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中，要根据具体情况灵活选择使用，以满足不同的需求。
mao29955
5 2
大树营养快线
|
1天前
|
JavaScript 搜索推荐 UED
vue的自定义指令
【10月更文挑战第14天】Vue 自定义指令为我们提供了一种强大的工具，使我们能够更灵活地控制和扩展 Vue 应用的行为。通过合理地使用自定义指令，可以提高开发效率，增强应用的功能和用户体验。
大树营养快线
7 1
刘大猫.
|
19小时前
|
JavaScript 前端开发 Java
vue2知识点：Vue封装的过度与动画
vue2知识点：Vue封装的过度与动画
刘大猫.
7 0
大树营养快线
|
1天前
|
JavaScript UED
在 Vue 中使用自定义指令
【10月更文挑战第14天】通过合理地使用自定义指令，可以为 Vue 应用带来更多的灵活性和扩展性，提高开发效率和用户体验。
大树营养快线
7 0
刘大猫.
|
2天前
|
缓存 JavaScript 前端开发
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
《基础篇第4章：vue2基础》：使用vue脚手架创建项目
刘大猫.
10 3
chnjames
|
4天前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南：in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令，但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似，但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异，你将能够编写更加高效、简洁的 Vue.js 代码，灵活应对各种数据结构的遍历需求。
chnjames
40 6
dufadayang
|
2天前
|
JavaScript
vue生命周期钩子函数的执行顺序是怎样的？
【10月更文挑战第14天】
dufadayang
6 2
大树营养快线
|
4天前
|
缓存 JavaScript 前端开发
Vue 中动态导入的注意事项
【10月更文挑战第12天】 在 Vue 项目中，动态导入是一种常用的按需加载模块的技术，可以提升应用性能和效率。本文详细探讨了动态导入的基本原理及注意事项，包括模块路径的正确性、依赖关系、加载时机、错误处理、缓存问题和兼容性等，并通过具体案例分析和解决方案，帮助开发者更好地应用动态导入技术。
大树营养快线
8 2
大树营养快线
|
4天前
|
JavaScript API
vue 批量自动引入并注册组件或路由等等
【10月更文挑战第12天】 vue 批量自动引入并注册组件或路由等等
大树营养快线
17 2
邹荣乐
|
5天前
|
JavaScript 算法 前端开发
深入剖析Vue中v-for的使用及index作为key的弊端
深入剖析Vue中v-for的使用及index作为key的弊端
邹荣乐
13 2

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    使用vue-demi来开发一个vue2和vue3组件
  • 3
    OSS对象存储后端实现+Vue实现图片上传【基于若依管理系统开发】
  • 4
    docker nginx 部署 vue项目
  • 5
    vue3 使用第三方插件问题 bundler to alias “vue“ to “vue/dist/vue.esm-bundler.js
  • 6
    浅尝Vue最新状态管理工具Pinia(实战使用Pinia管理登录状态)
  • 7
    VUE element-ui之table表格前端自动过滤（筛选），不调用数据接口筛选表格，方法
  • 8
    vue2 el-select 改造成下拉树，支持数据回显
  • 9
    解决 vue-router 报错：Navigation cancelled from “/...“ to “/...“ with a new navigation
  • 10
    手撸vue3核心源码——响应式原理(ref)
  • 1
    搞懂Vue一篇文章就够了
    37
  • 2
    Vue3的 组件事件
    52
  • 3
    Vue 异步组件
    31
  • 4
    Vue自定义指令的三个方法
    31
  • 5
    vue3组件之间传值通讯
    48
  • 6
    vue引入vuex
    53
  • 7
    vue怎么自定义底部导航
    58
  • 8
    vue3引入element-plus完整步骤
    646
  • 9
    vue3引入vant完整步骤
    410
  • 10
    vue3实现文字垂直滚动
    176

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 收银台的场景化界面实践
    • 下一篇
    AI助理直击要害，从繁复中提炼精华——使用CDN加速访问OSS存储的图片