Vue.js 超詳細(xì)入門與項(xiàng)目實(shí)戰(zhàn)（微課視頻版）課件 第16章 商城動(dòng)態(tài)頁開發(fā)

第16章商城動(dòng)態(tài)頁開發(fā)課件V1.0

教學(xué)內(nèi)容第一節(jié)

動(dòng)態(tài)列表頁功能第二節(jié)列表詳情頁功能第三節(jié)

點(diǎn)贊與收藏功能知識(shí)目標(biāo)教學(xué)目標(biāo)理解和掌握路由傳參的方法和使用過程掌握pinia中定義狀態(tài)變量和方法的過程掌握在組件中使用pinia定義的變量和方法知識(shí)點(diǎn)預(yù)覽#節(jié)知識(shí)點(diǎn)難點(diǎn)重點(diǎn)應(yīng)用16C16-01動(dòng)態(tài)列表頁功能1、頁面效果

2、列表數(shù)據(jù)源3、列表制作C16-02列表詳情頁功能1、頁面效果2、組件代碼C16-03Vant表單組件1、頁面效果2、組件代碼3、全局狀態(tài)與方法

商城動(dòng)態(tài)也是商城開發(fā)中的一項(xiàng)重要功能，動(dòng)態(tài)內(nèi)容可以是商品信息，也可以是促銷文章，通常以列表的形式展示，點(diǎn)擊列表中標(biāo)題后查看詳情頁。動(dòng)態(tài)列表頁功能

動(dòng)態(tài)列表的展示數(shù)據(jù)，源于

shop.js

文件中的

news

屬性值。說明：數(shù)組

news

中的對(duì)象屬性

src，用于顯示列表中的縮略圖片，detail

屬性則用于顯示動(dòng)態(tài)列表中某項(xiàng)數(shù)據(jù)的詳細(xì)內(nèi)容，因?yàn)樵摂?shù)據(jù)是由后臺(tái)文本編輯器創(chuàng)建，因此，它的內(nèi)容中包含了各種

HTML5

元素和布局的樣式。列表數(shù)據(jù)源

在src/components目錄下，新建一個(gè)名稱為news的文件夾，該文件夾保存所有與商城動(dòng)態(tài)有關(guān)的組件，目錄結(jié)構(gòu)如圖所示。在示意圖中，RtList是商城動(dòng)態(tài)的列表組件，在組件中，獲取列表數(shù)據(jù)，并通過遍歷的方式展示在van-grid組件中。在代碼中，通過van-grid組件展示列表，column-num屬性設(shè)置列表只顯示一列，再遍歷van-grid-item組件，綁定各行中顯示的數(shù)據(jù)，當(dāng)點(diǎn)擊某一行時(shí)，觸發(fā)綁定的click事件函數(shù)onNavTo，在該函數(shù)中，獲取并攜帶傳入的動(dòng)態(tài)Id值，跳轉(zhuǎn)到動(dòng)態(tài)詳細(xì)頁中。列表制作

在動(dòng)態(tài)列表頁中，當(dāng)用戶點(diǎn)擊某項(xiàng)列表時(shí)，便攜帶該項(xiàng)列表的Id號(hào)，跳轉(zhuǎn)至列表詳情頁，在列表詳情頁中，獲取轉(zhuǎn)入的Id號(hào)，并根據(jù)該Id號(hào)，獲取對(duì)應(yīng)的詳情頁數(shù)據(jù)，再將該數(shù)據(jù)通過綁定組件的形式，顯示到頁面模板中。列表詳情頁功能

在示意圖中，由名為

RtDisplay的組件實(shí)現(xiàn)的功能。在代碼中，先獲取通過路由傳入的Id號(hào)，并根據(jù)該Id號(hào)獲取對(duì)應(yīng)的數(shù)據(jù)記錄，并將記錄保存在變量curNews中，再將變量curNews中的detail屬性值綁定元素，從而實(shí)現(xiàn)對(duì)應(yīng)Id號(hào)詳情的顯示效果。說明：在綁定并顯示含有HTML5元素內(nèi)容的數(shù)據(jù)時(shí)，需要使用v-html指令的格式，因?yàn)檫@種格式綁定的內(nèi)容，會(huì)將綁定的內(nèi)容用HTML格式解析后再輸出。組件代碼

在列表詳情頁的底部，添加了兩個(gè)按鈕，一個(gè)用于點(diǎn)贊功能，另一個(gè)用于收藏功能，兩個(gè)按鈕單擊后的數(shù)據(jù)和狀態(tài)變化，全部通過pinia狀態(tài)工具進(jìn)行保存。點(diǎn)贊與收藏功能在示意圖中，由名為

RtAction的組件實(shí)現(xiàn)詳細(xì)頁底部點(diǎn)贊和收藏的功能。在代碼中，當(dāng)點(diǎn)擊“點(diǎn)贊”按鈕時(shí)，觸發(fā)pinia中定義的方法add_like_act，在該方法中，將會(huì)向數(shù)據(jù)集合中增加一條對(duì)應(yīng)Id號(hào)的記錄，同時(shí)，再通過retNewsLikes函數(shù)檢測(cè)該條記錄是否增加成功，如果成功，則改變按鈕的icon圖標(biāo)。當(dāng)擊“收藏”按鈕時(shí)，觸發(fā)pinia中定義的方法add_collect_act，它的功能邏輯與點(diǎn)擊“點(diǎn)贊”按鈕基本相似，僅僅是執(zhí)行了不同的方法，這兩個(gè)方法都是在pinia中定義的。組件代碼

為了全局性管理組件的狀態(tài)和數(shù)據(jù)，本項(xiàng)目中安裝了pinia工具，安裝成功后，在src目錄下創(chuàng)建了一個(gè)名稱為store子文件夾，并在該文件夾下，創(chuàng)建了一個(gè)index.js的文件，用于實(shí)例化pinia對(duì)象，并緩存定義的狀態(tài)變量。在代碼的加粗部分中，先在state函數(shù)中，返回兩個(gè)全局的狀態(tài)數(shù)組變量，一個(gè)名為collects，另一個(gè)名為likes，前者用于保存收藏記錄，后者用于保存點(diǎn)贊記錄。為了能操作這兩個(gè)變量，在actions對(duì)象中，定義了兩個(gè)相應(yīng)的方法。最后，在persist對(duì)象中，通過strategies數(shù)組配置需要緩存的狀態(tài)變量，其中，