項(xiàng)目七使用Vue框架開(kāi)發(fā)電商網(wǎng)站264265任務(wù)1搭建后臺(tái)接口環(huán)境任務(wù)2創(chuàng)建Vue項(xiàng)目與公共組件任務(wù)3開(kāi)發(fā)首頁(yè)頁(yè)面任務(wù)4開(kāi)發(fā)“商品列表”頁(yè)面任務(wù)5開(kāi)發(fā)“商品詳情”頁(yè)面任務(wù)6開(kāi)發(fā)“購(gòu)物車”頁(yè)面搭建后臺(tái)接口環(huán)境

任務(wù)12661.?了解PHP和MySQL的基礎(chǔ)知識(shí)。2.?了解常用HTTP請(qǐng)求方法。3.?能搭建PHP+MySQL開(kāi)發(fā)環(huán)境。4.?能進(jìn)行后臺(tái)接口測(cè)試。267本任務(wù)主要內(nèi)容是使用后臺(tái)測(cè)試接口PHP代碼與MySQL數(shù)據(jù)庫(kù)腳本文件，在開(kāi)發(fā)環(huán)境中搭建后臺(tái)接口環(huán)境，為電商網(wǎng)站提供后臺(tái)數(shù)據(jù)接口。268一、頁(yè)面超文本預(yù)處理器（PHP）頁(yè)面超文本預(yù)處理器（PageHypertextPreprocessor，PHP）是在服務(wù)器端執(zhí)行的腳本語(yǔ)言，適用于Web開(kāi)發(fā)并可嵌入HTML。PHP語(yǔ)法學(xué)習(xí)了C語(yǔ)言，吸納了Java和Perl等多種語(yǔ)言的特色，發(fā)展出自己的特色語(yǔ)法，并根據(jù)其他語(yǔ)言的長(zhǎng)項(xiàng)持續(xù)改進(jìn)和提升自己。隨著PHP-CLI相關(guān)組件的快速發(fā)展和完善，PHP已經(jīng)可以應(yīng)用于TCP/UDP服務(wù)、高性能Web、WebSocket服務(wù)、物聯(lián)網(wǎng)、實(shí)時(shí)通信、游戲和微服務(wù)等非Web領(lǐng)域的系統(tǒng)研發(fā)。2691.PHP文件PHP文件的默認(rèn)文件擴(kuò)展名是“.php”，文件內(nèi)容包含文本、HTML、JavaScript代碼和PHP代碼。PHP代碼在服務(wù)器上執(zhí)行，其結(jié)果以純HTML形式返回給瀏覽器。2.PHP的功能PHP可以生成動(dòng)態(tài)頁(yè)面內(nèi)容，且不局限于輸出HTML，還可以輸出圖像、PDF文件，以及XHTML和XML等文本內(nèi)容。在數(shù)據(jù)交互方面，PHP可以加密數(shù)據(jù)、根據(jù)規(guī)則限制用戶訪問(wèn)網(wǎng)站頁(yè)面、收集表單數(shù)據(jù)，以及發(fā)送和接收Cookies；在文件操作方面，PHP可以創(chuàng)建、打開(kāi)、讀取、寫(xiě)入和關(guān)閉服務(wù)器上的文件；在數(shù)據(jù)庫(kù)操作方面，PHP可以對(duì)數(shù)據(jù)庫(kù)進(jìn)行查詢、添加、刪除和修改等一系列操作。2703.PHP的優(yōu)點(diǎn)PHP是免費(fèi)的、開(kāi)源的，且跨平臺(tái)性強(qiáng)。它是運(yùn)行在服務(wù)器端的腳本語(yǔ)言，可以在不同的平臺(tái)上運(yùn)行，且PHP與目前絕大部分市面上的服務(wù)器相兼容。同時(shí)，相對(duì)其他的后端語(yǔ)言，PHP消耗的系統(tǒng)資源明顯較少。271二、Apache軟件PHP作為服務(wù)器端腳本語(yǔ)言，需要在服務(wù)器環(huán)境中運(yùn)行。ApacheHTTPServer（簡(jiǎn)稱Apache）是一個(gè)開(kāi)源Web服務(wù)器，它支持多種操作系統(tǒng)，并且以其跨平臺(tái)兼容性和安全性而聞名，快速、可靠，可通過(guò)簡(jiǎn)單的API擴(kuò)展將多種解釋器編譯進(jìn)去。272三、MySQL數(shù)據(jù)庫(kù)管理系統(tǒng)MySQL

是最流行的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)之一，屬于Oracle旗下產(chǎn)品。它將數(shù)據(jù)保存在不同的表中，而不是將所有數(shù)據(jù)放在一個(gè)大倉(cāng)庫(kù)內(nèi)，處理速度快、靈活性強(qiáng)。MySQL所使用的SQL是用于訪問(wèn)數(shù)據(jù)庫(kù)的最常用標(biāo)準(zhǔn)化語(yǔ)言。273四、超文本傳輸協(xié)議（HTTP）請(qǐng)求超文本傳輸協(xié)議（HyperTextTransferProtocol，HTTP）是一套計(jì)算機(jī)通過(guò)網(wǎng)絡(luò)進(jìn)行通信的規(guī)則。客戶端（如Web瀏覽器）向服務(wù)器提交HTTP請(qǐng)求，服務(wù)器向客戶端返回響應(yīng)，這就構(gòu)成了一套包含請(qǐng)求和應(yīng)答的HTTP連接。274HTTP中的8種常用HTTP請(qǐng)求方法見(jiàn)下表。2758種常用HTTP請(qǐng)求方法創(chuàng)建Vue項(xiàng)目與公共組件任務(wù)22761.?了解Vuex狀態(tài)管理。2.?能根據(jù)項(xiàng)目需求配置Vue?CLI插件。3.?能熟練創(chuàng)建并使用組件。277本任務(wù)主要內(nèi)容是按照項(xiàng)目設(shè)計(jì)需求創(chuàng)建Vue項(xiàng)目，使用VueRouter進(jìn)行頁(yè)面路由管理，并使用Vuex進(jìn)行頁(yè)面間數(shù)據(jù)交互狀態(tài)管理。278一、Vuex簡(jiǎn)介Vuex

是一個(gè)專為Vue.js應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式和庫(kù)。它采用集中式存儲(chǔ)的方式管理應(yīng)用的所有組件狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)變化的可預(yù)測(cè)性。當(dāng)應(yīng)用遇到多個(gè)組件共享狀態(tài)時(shí)，易破壞單向數(shù)據(jù)流的簡(jiǎn)潔性。因此，Vuex將組件的共享狀態(tài)抽取出來(lái)，以一個(gè)全局單例模式進(jìn)行管理，在此模式下，任何組件都能獲取狀態(tài)或觸發(fā)行為。它通過(guò)定義和隔離狀態(tài)管理中的各種概念并以強(qiáng)制規(guī)則維持視圖和狀態(tài)間的獨(dú)立性實(shí)現(xiàn)代碼的結(jié)構(gòu)化，讓?xiě)?yīng)用更易維護(hù)。279二、Vuex核心概念1.StateState

提供全局唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)統(tǒng)一在VuexStore的State中存儲(chǔ)。Vuex通過(guò)Vue的插件系統(tǒng)將Store實(shí)例從根組件中“注入”到所有的子組件中。2802.GetterVuex允許開(kāi)發(fā)人員在Store中定義Getter（Store的計(jì)算屬性）。Getter會(huì)被暴露為store.getters對(duì)象，可使用屬性的形式訪問(wèn)這些值。3.Mutation更改Vuex中Store狀態(tài)的唯一方法是提交

Mutation（Mutation須是同步函數(shù)）。開(kāi)發(fā)人員不能直接調(diào)用Mutation處理函數(shù)。若要喚醒Mutation處理函數(shù)，需要以相應(yīng)的類型調(diào)用mit()方法。2814.ActionAction類似于Mutation，不同之處在于Action可以包含異步操作。5.Module由于使用單一狀態(tài)樹(shù)時(shí)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象中，所以當(dāng)應(yīng)用較為復(fù)雜時(shí)，Store對(duì)象可能變得較為“臃腫”。為了解決此問(wèn)題，Vuex允許將Store分割成模塊（Module）。

每個(gè)模塊擁有自己的State、Getter、Mutation和Action，

甚至是嵌套子模塊。282開(kāi)發(fā)首頁(yè)頁(yè)面任務(wù)32831.?了解Vue組件生命周期。2.?能使用Axios請(qǐng)求服務(wù)器數(shù)據(jù)。3.?能使用Proxy解決跨域問(wèn)題。4.?能使用Props向子組件傳值。284本任務(wù)主要內(nèi)容是按照如圖所示的首頁(yè)設(shè)計(jì)效果進(jìn)行開(kāi)發(fā)，首頁(yè)內(nèi)容包括上方版塊、“熱門商品”版塊、中部廣告Banner版塊、“資訊”版塊與頁(yè)腳版塊。其中，上方版塊的布局包括頁(yè)頭組件布局，頁(yè)面中的“熱門商品”版塊與“資訊”版塊將根據(jù)后臺(tái)服務(wù)器接口返回的數(shù)據(jù)動(dòng)態(tài)渲染。285首頁(yè)的設(shè)計(jì)效果一、Vue組件生命周期1.Vue組件生命周期介紹每個(gè)Vue組件實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，如設(shè)置數(shù)據(jù)偵聽(tīng)、編譯模板，將DOM掛載到實(shí)例，在數(shù)據(jù)改變時(shí)更新DOM等。在此過(guò)程中，它也會(huì)運(yùn)行被稱為生命周期鉤子的函數(shù)，讓開(kāi)發(fā)人員有機(jī)會(huì)在特定階段運(yùn)行自己的代碼。Vue組件生命周期的整體過(guò)程如圖所示。286287Vue組件生命周期的整體過(guò)程2.生命周期鉤子生命周期鉤子屬于組合式API，各生命周期鉤子的說(shuō)明如下。（1）onMounted()：在組件掛載完成后執(zhí)行。組件在其所有同步子組件都已經(jīng)被掛載后，或其自身的DOM樹(shù)已經(jīng)創(chuàng)建完成并插入了父容器后，被視為已掛載。（2）onUpdated()：組件在因?yàn)轫憫?yīng)式狀態(tài)變更而更新其DOM樹(shù)之后調(diào)用。父組件的更新鉤子將在其子組件的更新鉤子之后調(diào)用。注意不要在updated鉤子中更改組件的狀態(tài)，否則可能會(huì)導(dǎo)致無(wú)限更新循環(huán)。288（3）onUnmounted()：在組件實(shí)例被卸載之后調(diào)用。開(kāi)發(fā)人員可以在此鉤子中進(jìn)行必要的手動(dòng)清理，如計(jì)時(shí)器、DOM事件監(jiān)聽(tīng)器或與服務(wù)器的連接等。（4）onBeforeMount()：在組件被掛載之前調(diào)用。（5）onBeforeUpdate()：在組件即將更新之前調(diào)用。（6）onBeforeUnmount()：在組件實(shí)例被卸載之前調(diào)用。289二、Axios網(wǎng)絡(luò)請(qǐng)求1.Axios介紹Axios

是一個(gè)基于Promise異步請(qǐng)求的HTTP庫(kù)，它可以用在瀏覽器和“node.js”中。Axios本質(zhì)上是對(duì)原生XMLHTTPRequest（簡(jiǎn)稱XHR）的封裝，只不過(guò)它是Promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。2902.Axios請(qǐng)求（1）GET請(qǐng)求執(zhí)行GET請(qǐng)求的具體代碼如下。291（2）POST請(qǐng)求執(zhí)行POST請(qǐng)求的具體代碼如下。2923.AxiosAPI可以通過(guò)向Axios傳遞相關(guān)配置來(lái)創(chuàng)建請(qǐng)求，具體代碼如下。293三、跨域請(qǐng)求1.跨域請(qǐng)求介紹同源策略（SameOriginPolicy）是一種約定，它是瀏覽器最核心、最基本的安全功能。出于安全考慮，瀏覽器限制從JavaScript腳本發(fā)起的跨域HTTP請(qǐng)求?？缬蛘?qǐng)求（Cross-OriginRequest）是指當(dāng)前發(fā)起請(qǐng)求的域與該請(qǐng)求指向的資源所在的域不同，包括兩者的協(xié)議、域名和端口號(hào)中任意一個(gè)存在不同，則視為跨域。只有兩者的協(xié)議、域名和端口號(hào)均相同時(shí)才是同域。2942.跨域問(wèn)題解決方案（1）后端解決跨域方案一：CORS（Cross-OriginResourceSharing，跨域資源共享）是一種由W3C標(biāo)準(zhǔn)化的跨域解決方案，它可以讓服務(wù)器支持跨域請(qǐng)求，并在響應(yīng)頭中添加相關(guān)信息。方案二：JSONP（JSONwithPadding）是一種利用<script>標(biāo)簽實(shí)現(xiàn)跨域請(qǐng)求的方法。它在PHP后端中通過(guò)動(dòng)態(tài)生成一個(gè)JavaScript函數(shù)調(diào)用，并返回給前端，實(shí)現(xiàn)跨域請(qǐng)求。295（2）前端解決跨域方案：Proxy（代理）是指當(dāng)前端瀏覽器發(fā)出連接請(qǐng)求后，將原本應(yīng)該直接發(fā)送至后臺(tái)服務(wù)器的請(qǐng)求發(fā)送至代理服務(wù)器中，由代理服務(wù)器將請(qǐng)求傳送給后臺(tái)服務(wù)器，并接收后臺(tái)服務(wù)器返回的數(shù)據(jù)，再將數(shù)據(jù)返回給前端瀏覽器，即以代理服務(wù)作為網(wǎng)絡(luò)通信的中轉(zhuǎn)站。296開(kāi)發(fā)“商品列表”頁(yè)面任務(wù)42971.?能進(jìn)行動(dòng)態(tài)樣式綁定。2.?能進(jìn)行條件渲染。3.?能使用Vue?Router編程式導(dǎo)航。298本任務(wù)主要內(nèi)容是按照如圖所示的“商品列表”頁(yè)面設(shè)計(jì)效果進(jìn)行開(kāi)發(fā)，頁(yè)面內(nèi)容包括頁(yè)頭、頁(yè)腳、“商品分類”和“商品列表”等版塊。其中，頁(yè)頭組件可直接引入并使用默認(rèn)樣式，頁(yè)腳組件已在“App.vue”文件中統(tǒng)一引入。“商品分類”版塊中列出3個(gè)不同的商品分類鏈接，并默認(rèn)選中“男式腕表”分類，在選中分類后，將向后臺(tái)服務(wù)器接口請(qǐng)求數(shù)據(jù)，并根據(jù)返回的數(shù)據(jù)動(dòng)態(tài)渲染“商品列表”版塊。299300“商品列表”頁(yè)面的設(shè)計(jì)效果一、動(dòng)態(tài)樣式綁定數(shù)據(jù)綁定的一個(gè)常見(jiàn)需求場(chǎng)景是操縱元素的CSSclass列表和內(nèi)聯(lián)樣式。因?yàn)閏lass和style都是元素的屬性，所以可以和其他屬性一樣使用v-bind指令將它們和動(dòng)態(tài)字符串綁定。但是，在處理比較復(fù)雜的綁定時(shí)，通過(guò)拼接生成字符串很麻煩且易出錯(cuò)。因此，Vue專門為class和style的v-bind用法提供了特殊的功能增強(qiáng)，相關(guān)表達(dá)式的值除了字符串外，也可以是對(duì)象或數(shù)組。3011.綁定對(duì)象通過(guò)向:class（v-bind:class的縮寫(xiě)）傳遞一個(gè)對(duì)象來(lái)動(dòng)態(tài)切換class，示例代碼如下。在上述代碼中，active是否存在取決于數(shù)據(jù)屬性isActive的值的真假。302可以在對(duì)象中寫(xiě)入多個(gè)字段來(lái)操作多個(gè)class。此外，:class指令也可以和一般的class屬性共存。示例代碼如下。303經(jīng)過(guò)渲染后，最終的結(jié)果如下。當(dāng)isActive或hasError改變時(shí)，class列表會(huì)隨之更新。綁定的對(duì)象也可以為一個(gè)Object，示例代碼如下。3042.綁定數(shù)組通過(guò)為:class綁定一個(gè)數(shù)組來(lái)渲染多個(gè)CSSclass，示例代碼如下。305渲染的結(jié)果如下。若需要在數(shù)組中有條件地渲染某個(gè)class，則可以使用三元表達(dá)式，示例代碼如下。errorClass會(huì)一直存在，但activeClass只會(huì)在isActive的值為真時(shí)才存在。然而，在有多個(gè)依賴條件的class的情況下，代碼有些冗長(zhǎng)。因此，可以在數(shù)組中嵌套對(duì)象，示例代碼如下。306二、條件渲染1.v-if指令v-if指令用于有條件性地渲染一塊內(nèi)容，這塊內(nèi)容只會(huì)在指令的表達(dá)式返回真值時(shí)才會(huì)被渲染，示例代碼如下。3072.v-else指令使用v-else指令會(huì)為v-if指令添加一個(gè)else區(qū)塊，示例代碼如下。在上述代碼中，當(dāng)變量awesome為真值時(shí)，顯示第一個(gè)h1的內(nèi)容，否則顯示第二個(gè)h1的內(nèi)容。一個(gè)v-else元素必須跟在一個(gè)v-if元素或v-else-if元素后面，否則它將不會(huì)被識(shí)別。3083.v-else-if指令顧名思義，v-else-if指令是為v-if指令添加一個(gè)else-if區(qū)塊，它可以被連續(xù)多次使用，示例代碼如下。3094.<template>上的v-if指令v-if指令必須依附于某個(gè)元素，在需要切換的元素不止一個(gè)的情況下，可以在一個(gè)<template>元素上使用v-if指令，這是一個(gè)不可見(jiàn)的包裝器元素，最后渲染的結(jié)果并不會(huì)包含這個(gè)<template>元素，示例代碼如下。v-else指令和v-else-if指令也可以在<template>上使用。3105.v-show指令另一個(gè)可以用于按條件顯示一個(gè)元素的是

v-show指令，示例代碼如下。v-show指令與v-if指令的不同之處在于：v-show指令會(huì)在DOM渲染中保留該元素，僅切換該元素上名為display的CSS屬性。v-show指令不支持在<template>元素上使用，也不能和v-else指令搭配使用。3116.v-if指令與v-show指令的區(qū)別v-if指令是“真實(shí)地”按條件渲染，它確保了在切換時(shí)，條件區(qū)塊內(nèi)的事件監(jiān)聽(tīng)器和子組件都會(huì)被銷毀和重建。v-if指令是惰性的，如果在初次渲染時(shí)條件值為false，則不會(huì)做任何事。條件區(qū)塊只有當(dāng)條件首次變?yōu)閠rue時(shí)才會(huì)被渲染。相比之下，v-show指令簡(jiǎn)單得多，無(wú)論元素初始條件如何，它始終會(huì)被渲染，只有CSSdisplay屬性會(huì)被切換?？偟膩?lái)說(shuō)，v-if指令有更高的切換開(kāi)銷，而v-show指令有更高的初始渲染開(kāi)銷。因此，如果需要頻繁切換，則使用v-show指令較好；如果在運(yùn)行時(shí)綁定條件很少改變，則使用v-if指令會(huì)更合適。312三、VueRouter編程式導(dǎo)航1.導(dǎo)航到指定的URL想要導(dǎo)航到指定的URL，可以使用router.push()方法。該方法會(huì)向history棧添加一個(gè)新記錄，當(dāng)用戶單擊瀏覽器后退按鈕時(shí)，會(huì)回到之前的URL。當(dāng)單擊<router-link>時(shí)，內(nèi)部會(huì)調(diào)用此方法，所以單擊<router-link:to="...">相當(dāng)于調(diào)用router.push()，其對(duì)應(yīng)關(guān)系見(jiàn)下表。313router.push(?)方法的對(duì)應(yīng)關(guān)系router.push()方法的參數(shù)可以是一個(gè)字符串路徑，或一個(gè)描述地址的對(duì)象，示例代碼如下。3142.替換當(dāng)前位置router.replace()方法的作用類似于router.push()方法，唯一不同的是，它在導(dǎo)航時(shí)不會(huì)向history棧添加新記錄，而是取代了當(dāng)前的條目，其對(duì)應(yīng)關(guān)系見(jiàn)下表。315router.replace(?)方法的對(duì)應(yīng)關(guān)系也可以直接在傳遞給router.push()方法的routeLocation中增加屬性replace:true，示例代碼如下。3163.橫跨歷史router.go()方法采用一個(gè)整數(shù)作為參數(shù)，表示在history棧中前進(jìn)或后退多少步，類似于window.history.go(n)，示例代碼如下。317開(kāi)發(fā)“商品詳情”頁(yè)面任務(wù)53181.?能獲取路由對(duì)象Route的屬性。2.?能使用Vuex進(jìn)行狀態(tài)管理。3.?能使用v-if語(yǔ)句進(jìn)行條件渲染。4.?能使用Vue計(jì)算屬性。5.?能使用LocalStorage存取數(shù)據(jù)。319本任務(wù)主要內(nèi)容是按照如圖所示的“商品詳情”頁(yè)面設(shè)計(jì)效果進(jìn)行開(kāi)發(fā)，頁(yè)面內(nèi)容包括頁(yè)頭、頁(yè)腳、“商品參數(shù)”和“商品說(shuō)明”等版塊。其中，頁(yè)頭組件可直接引入并使用默認(rèn)樣式，頁(yè)腳組件已在“App.vue”文件中統(tǒng)一引入。320“商品詳情”頁(yè)面的設(shè)計(jì)效果頁(yè)面需要獲取URL中傳入的商品id參數(shù)，以此向服務(wù)器請(qǐng)求指定id的商品詳細(xì)數(shù)據(jù)，并動(dòng)態(tài)渲染在頁(yè)面組件中。當(dāng)用戶單擊“加入購(gòu)物車”按鈕時(shí)，Vuex將更新本地保存的“購(gòu)物車”數(shù)據(jù)，然后跳轉(zhuǎn)到“購(gòu)物車”頁(yè)面。321322一、路由對(duì)象（Route）1.Route與Router的區(qū)別Route與Router的區(qū)別如下。（1）路由對(duì)象（Route）表示從當(dāng)前激活的路由中解析得到的信息，包括當(dāng)前的路徑、參數(shù)、query對(duì)象，以及URL匹配到的路由記錄（RouteRecords）等。路由對(duì)象是不可變的，每次成功地導(dǎo)航后都會(huì)產(chǎn)生一個(gè)新的路由對(duì)象。（2）Router是全局路由的實(shí)例，可用來(lái)操作路由，包括路由的跳轉(zhuǎn)、替換等。2.Route屬性（1）path：表示當(dāng)前路由的路徑，解析結(jié)果為絕對(duì)路徑，如/about。（2）params：包含動(dòng)態(tài)片段和全匹配片段的對(duì)象，如果沒(méi)有路由參數(shù)則是一個(gè)空對(duì)象。（3）query：表示URL查詢參數(shù)的對(duì)象。（4）hash：表示當(dāng)前路由的hash值（帶#），如果沒(méi)有hash值則為空字符串。323（5）fullPath：表示完成解析后的URL，包含查詢參數(shù)和hash的完整路徑。（6）matched：包含當(dāng)前路由的所有嵌套路徑片段的路由記錄的數(shù)組。（7）name：表示當(dāng)前路由的名稱。（8）redirectedFrom：若存在重定向，則表示重定向來(lái)源的路由的名稱。（9）meta：包含路由元信息，如過(guò)渡名稱、路由訪問(wèn)權(quán)限設(shè)置等。這些配置可在meta屬性中實(shí)現(xiàn)，且可在路由地址和導(dǎo)航守衛(wèi)上被訪問(wèn)。324二、本地緩存（LocalStorage）LocalStorage

是Web瀏覽器的一種存儲(chǔ)機(jī)制，它使用字符串鍵值對(duì)（key/value）存儲(chǔ)數(shù)據(jù)。LocalStorage的數(shù)據(jù)可以被長(zhǎng)期保留，即使頁(yè)面刷新或關(guān)閉后，LocalStorage存儲(chǔ)在瀏覽器中的數(shù)據(jù)也會(huì)一直存在，除非手動(dòng)清除LocalStorage的本地緩存。LocalStorage還提供了對(duì)緩存數(shù)據(jù)的各種基礎(chǔ)操作函數(shù)。3251.存儲(chǔ)數(shù)據(jù)LocalStorage使用setItem()函數(shù)實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)。setItem()函數(shù)接受兩個(gè)參數(shù)，分別為key和value，示例代碼如下。上述代碼將值為Tom@的字符串保存在鍵為useremail的本地緩存中。由于LocalStorage使用字符串鍵值對(duì)存儲(chǔ)數(shù)據(jù)，若想要在本地緩存中保存一個(gè)對(duì)象，則可以使用JSON.stringify()方法將數(shù)據(jù)轉(zhuǎn)換成字符串后再存儲(chǔ)。3262.獲取數(shù)據(jù)若想要獲取LocalStorage本地緩存中指定的值，可以使用getItem()函數(shù)獲取指定鍵的值。取出保存的用戶郵箱地址的示例代碼如下。使用getItem()函數(shù)獲取鍵為useremail的緩存數(shù)據(jù)，將返回對(duì)應(yīng)的值Tom@。3.刪除指定緩存使用removeItem()函數(shù)可以刪除本地緩存中對(duì)應(yīng)的數(shù)據(jù)。調(diào)用此函數(shù)時(shí)需要傳入指定的鍵，示例代碼如下。3274.清除所有緩存清除所有本地緩存的函數(shù)為clear()，此函數(shù)不需要傳入?yún)?shù)，因?yàn)樗鼤?huì)將本地緩存中的所有數(shù)據(jù)都刪除，示例代碼如下。5.查看緩存中所有的鍵可以使用key()函數(shù)來(lái)遍歷本地緩存中所有的鍵，或通過(guò)索引獲取鍵的名稱，示例代碼如下。328開(kāi)發(fā)“購(gòu)物車”頁(yè)面任務(wù)63291.?能使用Vuex進(jìn)行狀態(tài)管理。2.?能使用Vue計(jì)算屬性computed。3.?能使用router.replace(?)方法進(jìn)行路由替換。4.?能使用Axios?POST提交數(shù)據(jù)。330本任務(wù)主要內(nèi)容是按照如圖所示的“購(gòu)物車”頁(yè)面設(shè)計(jì)效果進(jìn)行開(kāi)發(fā)，頁(yè)面內(nèi)容包括頁(yè)頭、頁(yè)腳、“購(gòu)物車列表”“價(jià)格統(tǒng)計(jì)”和“功能按鈕”版塊。其中，頁(yè)頭組件可直接引入并使用默認(rèn)樣式，頁(yè)腳組件已在“App.vue”文件中統(tǒng)一引入。331“購(gòu)物車”頁(yè)面的設(shè)計(jì)效果頁(yè)面從Vuex中獲取用戶已經(jīng)加入“購(gòu)物車”的商品數(shù)據(jù)，使用v-for語(yǔ)句動(dòng)態(tài)生成列表顯示，并自動(dòng)計(jì)算商品總價(jià)。用戶可在列表行中單擊商品的刪除圖標(biāo)將商品移除，移除商品后將自