vue3前端開(kāi)發(fā)-小兔鮮項(xiàng)目-產(chǎn)品詳情基礎(chǔ)數(shù)據(jù)渲染！這一次內(nèi)容比較多，我們分開(kāi)寫(xiě)。第一步先完成詳情頁(yè)面的基礎(chǔ)數(shù)據(jù)的渲染。然后再去做一下右側(cè)的熱門(mén)產(chǎn)品的列表內(nèi)容。

---

第一步，還是老規(guī)矩，先準(zhǔn)備好接口函數(shù)。方便我們的頁(yè)面組件拿到對(duì)應(yīng)的產(chǎn)品信息數(shù)據(jù)。

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

這個(gè)位置還是在apis文件夾下面新建了一個(gè)detail.js

---

第二步，在組件內(nèi)調(diào)用這個(gè)接口函數(shù)，自定義好對(duì)應(yīng)的頁(yè)面數(shù)據(jù)對(duì)象。開(kāi)始綁定數(shù)據(jù)即可。

<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>

代碼比較簡(jiǎn)單，我們不再一一介紹了。大家都能看得懂。

---

第三步就是把這個(gè)數(shù)據(jù)對(duì)象渲染到頁(yè)面組件內(nèi)。

<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: '/' }">首頁(yè)</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"><!-- 圖片預(yù)覽區(qū) --><!-- 統(tǒng)計(jì)數(shù)量 --><ul class="goods-sales"><li><p>銷(xiāo)量人氣</p><p> {{goods.salesCount}}+ </p><p><i class="iconfont icon-task-filling"></i>銷(xiāo)量人氣</p></li><li><p>商品評(píng)價(jià)</p><p>{{goods.commentCount}}+</p><p><i class="iconfont icon-comment-filling"></i>查看評(píng)價(jià)</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>品牌主頁(yè)</p></li></ul></div><div class="spec"><!-- 商品信息區(qū) --><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>促銷(xiāo)</dt><dd>12月好物放送,App領(lǐng)券購(gòu)買(mǎi)直降120元</dd></dl><dl><dt>服務(wù)</dt><dd><span>無(wú)憂(yōu)退貨</span><span>快速退款</span><span>免費(fèi)包郵</span><a href="javascript:;">了解詳情</a></dd></dl></div><!-- sku組件 --><!-- 數(shù)據(jù)組件 --><!-- 按鈕組件 --><div><el-button size="large" class="btn">加入購(gòu)物車(chē)</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熱榜+專(zhuān)題推薦 --><div class="goods-aside"></div></div></div></div></div></div>
</template>

聲明，這里，為了避免出現(xiàn)生命周期函數(shù)引起的故障，我們做了一個(gè)v-if的條件判定。當(dāng)拿到了數(shù)據(jù)后，我們?cè)僮尶蚣苋ヤ秩尽７駝t是報(bào)錯(cuò)的，提示undefined.

---

一切正常。