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

news/2024/7/10 1:16:53 标签: vue, SpringBoot

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

视频效果:

首页商品跳转

1、需求

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

2、首页

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

在这里插入图片描述

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

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

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

4、数据来自后端接口

4.1 后台管理商品信息

在这里插入图片描述

4.2 接口数据

在这里插入图片描述

5、后语

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

6、资源地址

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


http://www.niftyadmin.cn/n/3685.html

相关文章

2022下半年软件设计师上午真题题目+答案 (新鲜出炉、持续更新)

辛苦整理麻烦点赞关注哈~ 看的人多会继续更新~ 以下关于R1SC(精简指令集计算机)特点的叙述中,错误的是(B)。 (1)A.对存储器操作进行限制,使控制简单化 B.指令种类多,…

基于555定时器的LED电子骰子设计

目录 零、前言 一、电路总体原理图 1.1所用仿真平台及电子元件 1.2整体原理图 二、主要元件及其工作原理介绍 2.1 555定时器 2.2 4017逻辑单元 三、现象展示 四、尾声 零、前言 自从研究生开学以来就一直在学各种算法,从来没有碰硬件的东西,今…

【3D目标检测】KITTI数据集介绍

目录概述数据集下载激光雷达数据(data_ object_velodyne)图像数据(data_ object_image_ 2)标注数据(data_ object_label 2)标定校准数据(data_ object_calib)概述 KITTI数据集很大&…

033——常见数据结构

常见数据结构 1. 数据结构概述、栈、队列 1.1数据结构概述 数据结构是计算机底层存储、组织数据的方式。是指数据相互之间是以什么方式排列在一起的。 通常情况下,精心选择的数据结构可以带来更高的运行或者存储效率 1.2栈数据结构的执行特点 后进先出,…

python 基于PHP+MySQL的装修网站的设计与实现

至今为止,越来越多企业公司都已经实现了线上推广,提高了企业的运营工作效率,为装修公司设计一款强大的智能装修网,集企业信息展示和信息管理于一体,结合企业与外部的在线交流功能,主要用于大力宣传企业服务、企业产品等信息,让更多的人了解,提高企业的知名度 1:系统…

Qt Creater相关

Qt Creater相关 Designer相关 关于控件 在设计器中点击右下角的这个🔧图标,选择颜色组,可以调出颜色分块视图,能够按照控件的类的继承关系显示属性。 手动修改过的属性会以粗体展示 关于布局 点击这个屏幕上方的这个按钮可以打…

Spring全局异常处理

Spring全局异常处理 1. 概述 在 Java Web 系统开发中,不管是 Controller 层、Service 层还是 Dao 层,都有可能抛出异常。如果在每个方法中加上各种 try catch 的异常处理代码,那样会使代码非常繁琐。在Spring中,我们可以将所有类…

前端开发核心知识进阶 —— 宏任务和微任务

前端开发核心知识进阶 —— 宏任务和微任务 首先看一段关于Promise的代码 console.log(start here)new Promise((resolve,reject) > {console.log(first promise constructor)resolve() }).then(() > {console.log(first promise then)return new Promise((resolve,reje…