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

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

教學內容第一節(jié)

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

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

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

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

動態(tài)列表的展示數據，源于

shop.js

文件中的

news

屬性值。說明：數組

news

中的對象屬性

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

屬性則用于顯示動態(tài)列表中某項數據的詳細內容，因為該數據是由后臺文本編輯器創(chuàng)建，因此，它的內容中包含了各種

HTML5

元素和布局的樣式。列表數據源

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

在動態(tài)列表頁中，當用戶點擊某項列表時，便攜帶該項列表的Id號，跳轉至列表詳情頁，在列表詳情頁中，獲取轉入的Id號，并根據該Id號，獲取對應的詳情頁數據，再將該數據通過綁定組件的形式，顯示到頁面模板中。列表詳情頁功能

在示意圖中，由名為

RtDisplay的組件實現的功能。在代碼中，先獲取通過路由傳入的Id號，并根據該Id號獲取對應的數據記錄，并將記錄保存在變量curNews中，再將變量curNews中的detail屬性值綁定元素，從而實現對應Id號詳情的顯示效果。說明：在綁定并顯示含有HTML5元素內容的數據時，需要使用v-html指令的格式，因為這種格式綁定的內容，會將綁定的內容用HTML格式解析后再輸出。組件代碼

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

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

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