vue3前端开发-小兔鲜项目-产品详情基础数据渲染

vue3前端开发-小兔鲜项目-产品详情基础数据渲染!这一次内容比较多,我们分开写。第一步先完成详情页面的基础数据的渲染。然后再去做一下右侧的热门产品的列表内容。


第一步,还是老规矩,先准备好接口函数。方便我们的页面组件拿到对应的产品信息数据。

import request from '@/utils/http'export const getDetail = (id) => {return request({url: '/goods',params: {id}})
}

这个位置还是在apis文件夹下面新建了一个detail.js


第二步,在组件内调用这个接口函数,自定义好对应的页面数据对象。开始绑定数据即可。

<script setup>
import {getDetail} from '@/apis/detail'
import {ref,onMounted} from 'vue'
import { useRoute } from 'vue-router';
const route = useRoute()
const goods = ref({})
const getGoods = async ()=>{const res = await getDetail(route.params.id)goods.value =res.result
}
onMounted(()=>getGoods())
</script>

代码比较简单,我们不再一一介绍了。大家都能看得懂。


第三步就是把这个数据对象渲染到页面组件内。

<template><div class="xtx-goods-page"><div class="container" v-if="goods.details"><div class="bread-container"><el-breadcrumb separator=">"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: `/category/${goods.categories[1].id}` }">{{goods.categories[1].name}}</el-breadcrumb-item><el-breadcrumb-item :to="{ path: `/category/sub/${goods.categories[0].id}` }">{{goods.categories[0].name}}</el-breadcrumb-item><el-breadcrumb-item>{{goods.name}}</el-breadcrumb-item></el-breadcrumb></div><!-- 商品信息 --><div class="info-container"><div><div class="goods-info"><div class="media"><!-- 图片预览区 --><!-- 统计数量 --><ul class="goods-sales"><li><p>销量人气</p><p> {{goods.salesCount}}+ </p><p><i class="iconfont icon-task-filling"></i>销量人气</p></li><li><p>商品评价</p><p>{{goods.commentCount}}+</p><p><i class="iconfont icon-comment-filling"></i>查看评价</p></li><li><p>收藏人气</p><p>{{goods.collectCount}}+</p><p><i class="iconfont icon-favorite-filling"></i>收藏商品</p></li><li><p>品牌信息</p><p>{{goods.brand.name}}+</p><p><i class="iconfont icon-dynamic-filling"></i>品牌主页</p></li></ul></div><div class="spec"><!-- 商品信息区 --><p class="g-name"> {{goods.name}} </p><p class="g-desc">{{ goods.desc }} </p><p class="g-price"><span>{{ goods.price }}</span><span> {{ goods.oldPrice }}</span></p><div class="g-service"><dl><dt>促销</dt><dd>12月好物放送,App领券购买直降120元</dd></dl><dl><dt>服务</dt><dd><span>无忧退货</span><span>快速退款</span><span>免费包邮</span><a href="javascript:;">了解详情</a></dd></dl></div><!-- sku组件 --><!-- 数据组件 --><!-- 按钮组件 --><div><el-button size="large" class="btn">加入购物车</el-button></div></div></div><div class="goods-footer"><div class="goods-article"><!-- 商品详情 --><div class="goods-tabs"><nav><a>商品详情</a></nav><div class="goods-detail"><!-- 属性 --><ul class="attrs"><li v-for="item in goods.details.properties" :key="item.value"><span class="dt">{{ item.name }}</span><span class="dd">{{item.value}}</span></li></ul><!-- 图片 --><img v-for="img in goods.details.pictures" v-img-lazy="img" :key="img"/></div></div></div><!-- 24热榜+专题推荐 --><div class="goods-aside"></div></div></div></div></div></div>
</template>

声明,这里,为了避免出现生命周期函数引起的故障,我们做了一个v-if的条件判定。当拿到了数据后,我们再让框架去渲染。否则是报错的,提示undefined.


一切正常。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/48153.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

掌握互联网路由选择协议:从基础入门到实战

文章目录 路由选择协议的基本概念路由选择算法的分类分层次的路由选择协议路由信息协议&#xff08;RIP&#xff09;内部网关协议&#xff1a;OSPF外部网关协议&#xff1a;BGP互联网中的实际应用总结 互联网的路由选择协议是网络通信的核心&#xff0c;它决定了数据包如何在网…

Sentinel初步了解

概念 Sentinel面向分布式、多语言异构化服务框架的流量治理组件。 相关文档https://github.com/alibaba/Sentinel/wiki/ 服务雪崩 多个微服务之间调用的时候&#xff0c;假设微服务A调用微服务B和微服务C,微服务B和微服务C又调用其它的微服务&#xff0c;这就是所谓的“扇出…

【YashanDB知识库】yac修改参数后关闭数据库hang住

【标题】yac修改参数后关闭数据库hang住 【问题分类】性能优化 【关键词】YashanDB, yac, shutdown hang 【问题描述】修改yac参数后执行shutdown immediate&#xff0c;数据库hang住。 【问题原因分析】 Shutdown操作时&#xff0c;线程在获取gInstance->trigger->s…

Spring Boot 接口访问频率限制的实现详解

目录 概述为什么需要接口访问频率限制常见的实现方式 基于过滤器的实现基于拦截器的实现基于第三方库Bucket4j的实现 实际代码示例 基于过滤器实现Rate Limiting基于拦截器实现Rate Limiting使用Bucket4j实现Rate Limiting 最佳实践 选择合适的限流算法优化性能记录日志和监控…

Manticore Search(es轻量级替代)

概念&#xff1a; Manticore Search 是一个使用 C 开发的高性能搜索引擎&#xff0c;创建于 2017 年&#xff0c;其前身是 Sphinx Search 。Manticore Search 充分利用了 Sphinx&#xff0c;显着改进了它的功能&#xff0c;修复了数百个错误&#xff0c;几乎完全重写了代码并保…

MySQL第四次作业

1.修改student表中年龄字段属性&#xff0c;数据类型由int改变为smallint 2.为course表中cno课程学号设置索引&#xff0c;并查看索引 &#xff08;3&#xff09;为SC表建立按学号(sno)和课程号(cno)组合的升序的主键索引&#xff0c;索引名为SC_INDEX &#xff08;4&#xff0…

PHP框架详解-symfony

一、介绍 Symfony是一个用于构建Web应用程序的PHP框架。它是一个开源框架,由Fabien Potencier于2005年创建。 Symfony框架具有许多特性和优势,以下是一些重要的特性: 可重复使用的组件:Symfony框架基于一系列可重复使用的组件,这些组件可以独立于框架使用,并且可以被其…

mysql对数据库的增删改

目录 DML语句&#xff1a; 增加数据&#xff08;insert语句&#xff09; 增加数据&#xff08;insert into select&#xff09; 修改数据&#xff08;update语句&#xff09; 【where 子句条件】 删除数据&#xff08;delete语句&#xff09; 删除数据&#xff08;trunca…

Spring, Spring Boot 和Spring MVC的关系以及区别

一、Spring 简单来说, Spring 是一个开发应用框架&#xff0c;主打轻量级、一站式、模块化&#xff0c;其目的是用于简化企业级应用程序开发。 Spring 的主要功能&#xff1a;管理对象&#xff0c;以及对象之间的依赖关系&#xff0c;面向切面编程&#xff0c;数据库事务管理, …

NO.1 Hadoop概述

1.1 Hadoop是什么 1.2 Hadoop优势 1.3 Hadoop组成 1.3.1 HDFS架构概述 1.3.2 YARN架构概述 1.3.3 MapReduce架构概述 1.3.4 HDFS、YARN、MapReduce三者关系 1.4 大数据技术生态体系 1.5 推荐系统框架图

数据结构C++——优先队列

文章目录 一、定义二、ADT三、优先队列的描述3.1 线性表3.2 堆3.2.1 最大堆的ADT3.2.2 最大堆的插入3.2.3 最大堆的删除3.2.4 最大堆的初始化3.3 左高树 LT3.3.1 高度优先左高树HBLT3.3.2 重量优先左高树WBLT3.3.3 最大HBLT的插入3.3.4 最大HBLT的删除3.3.5 合并两棵最大HBLT3.…

【Linux】yum的认识与简单配置

今天来初步认识一下yum——Linux下软件包管理器。 既然说到Linux下软件包管理器&#xff0c;那我们不妨来先谈论一下什么是软件包的概念。 1. 什么是软件包&#xff1f; 软件的下载需要源代码编译链接之后生成可执行文件进行运行。无论是Windows系统下还是Linux系统下&#x…

QT总结——图标显示坑

最近写代码遇到一个神仙大坑&#xff0c;我都怀疑我软件是不是坏了&#xff0c;这里记录一下。 写qt工程的时候我们一般会设置图标&#xff0c;这个图标是窗体的图标同时也是任务栏的图标&#xff0c;但是我发现生成的exe没有图标&#xff0c;这个时候就想着给他加一个图标&…

AI学习记录 - 激活函数的作用

试验&#xff0c;通过在线性公式加入激活函数&#xff0c;可以拟合复杂的情况&#xff08;使用react实现&#xff0c;原创&#xff09; 结论:1、线性函数的叠加&#xff0c;无论叠加多少次&#xff0c;都是线性的 如下图 示例代码 线性代码&#xff0c;使用ykxb的方式&…

【BUG】已解决:ValueError: All arrays must be of the same length

ValueError: All arrays must be of the same length 目录 ValueError: All arrays must be of the same length 【常见模块错误】 【解决方案】 问题原因 解决方法 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&…

Python爬虫实战案例(爬取图片)

爬取图片的信息 爬取图片与爬取文本内容相似&#xff0c;只是需要加上图片的url&#xff0c;并且在查找图片位置的时候需要带上图片的属性。 这里选取了一个4K高清的壁纸网站&#xff08;彼岸壁纸https://pic.netbian.com&#xff09;进行爬取。 具体步骤如下&#xff1a; …

[Python][Python入门]详细讲解

目录 0.铺垫1.常量和表达式2.变量3.变量的类型1.整数2.浮点数3.字符串4.布尔 4.动态类型特性5.注释∞.积累 0.铺垫 Python中&#xff0c;一个语句写完了之后&#xff0c;可以加上分号&#xff0c;也可以不加 通常情况下都是不加的&#xff0c;如果加了&#xff0c;也不算错如果…

Ubuntu-文件管理器中鼠标右键添加文本文件

文件管理器中鼠标右键添加文本文件 一、概述二、步骤 一、概述 Ubuntu在文管右键发现没有创建文本文件的菜单&#xff0c; 期望如下所示&#xff0c;这样的操作非常简单 二、步骤 找到模板文件夹 在模板文件夹&#xff0c;创建自己想要的文件就好啦 这个也是支持放文件夹去…

【C++】学习笔记——哈希_1

文章目录 十八、哈希1. unordered系列关联式容器2. 底层结构哈希函数哈希冲突 未完待续 十八、哈希 1. unordered系列关联式容器 在C11中&#xff0c;STL又提供了4个unordered系列的关联式容器&#xff0c;这四个容器与红黑树结构的关联式容器使用方式基本类似&#xff0c;只…

Linux云计算 |【第二阶段】AUTOMATION-DAY1

主要内容&#xff1a; 版本控制&#xff08;集中式、分布式&#xff09;、Git基础&#xff08;服务端、客户端部署&#xff0c;基础命令操作、文档版本管理&#xff09;、Git进阶&#xff08;数据恢复、分支、冲突管理&#xff09; 一、版本控制概念 版本控制是一种记录文件变…