1框架技術(shù)應(yīng)用崗位信息異步渲染任務(wù)4學(xué)習(xí)目標(biāo)【知識(shí)目標(biāo)】掌握生命周期鉤子的注冊(cè)及使用；熟悉不同生命周期鉤子的運(yùn)行順序；掌握json-server插件的使用方法；熟練掌握Axios的安裝及使用；掌握Axios攔截器的注冊(cè)及使用步驟。【技能目標(biāo)】能夠熟練注冊(cè)使用生命周期鉤子；能夠熟練使用json-server模擬服務(wù)端接口數(shù)據(jù)；能夠熟練掌握Axios異步請(qǐng)求數(shù)據(jù)方法?！舅刭|(zhì)目標(biāo)】培養(yǎng)認(rèn)真仔細(xì)的工作態(tài)度；樹(shù)立良好的邏輯思維能力。掌握Vue生命周期鉤子的注冊(cè)，使用及生命周期鉤子的運(yùn)行順序。理解Axios作用，并熟練掌握通過(guò)Axios異步請(qǐng)求數(shù)據(jù)的方法。項(xiàng)目背景本任務(wù)負(fù)責(zé)重構(gòu)“就業(yè)職通車(chē)”網(wǎng)站中崗位數(shù)據(jù)渲染模塊。通過(guò)學(xué)習(xí)生命周期與Axios實(shí)現(xiàn)在瀏覽器端打開(kāi)頁(yè)面時(shí)通過(guò)生命周期鉤子自動(dòng)調(diào)用Axios獲取json-server服務(wù)器端數(shù)據(jù)并渲染至頁(yè)面。任務(wù)規(guī)劃本任務(wù)要求使用生命周期與Axios庫(kù)，獲取json-server服務(wù)器端數(shù)據(jù)。任務(wù)4.1Vue生命周期認(rèn)識(shí)【任務(wù)陳述】每個(gè)Vue實(shí)例在創(chuàng)建時(shí)都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽(tīng)，編譯模板，掛載實(shí)例到DOM，以及在數(shù)據(jù)改變時(shí)更新DOM，我們稱(chēng)之為Vue實(shí)例的生命周期。在整個(gè)生命周期中，每個(gè)節(jié)點(diǎn)都會(huì)有一個(gè)生命周期鉤子函數(shù)自動(dòng)運(yùn)行，我們可以在此特定階段搭建相應(yīng)功能。整個(gè)生命周期如圖4-1所示。圖4-1生命周期圖示任務(wù)4.1Vue生命周期認(rèn)識(shí)【任務(wù)分析】本任務(wù)要求掌握Vue實(shí)例的生命周期鉤子運(yùn)行原理及注冊(cè)使用步驟。【任務(wù)實(shí)施】在任務(wù)4.2的步驟二中具體實(shí)現(xiàn)。【知識(shí)鏈接】4.1.1生命周期鉤子生命周期鉤子用來(lái)描述Vue實(shí)例從創(chuàng)建到銷(xiāo)毀的整個(gè)生命周期，具體如表4-1所示。生命周期鉤子組合式API中調(diào)用說(shuō)明beforeCreatesetup()組件實(shí)例初始化完成之后立即調(diào)用createdsetup()組件實(shí)例處理完所有與狀態(tài)相關(guān)的選項(xiàng)后調(diào)用beforeMountonBeforeMount()組件被掛載之前被調(diào)用mountedonMounted()組件掛載完成后執(zhí)行beforeUpdateonBeforeUpdate()組件因?yàn)轫憫?yīng)式狀態(tài)變更而更新DOM樹(shù)之前調(diào)用updatedonUpdated()組件因?yàn)轫憫?yīng)式狀態(tài)變更而更新DOM樹(shù)之后調(diào)用beforeUnmoutedonBeforeUnmount()組件實(shí)例被卸載之前調(diào)用unmountedonUnmounted()組件實(shí)例被卸載之后調(diào)用表4-1生命周期鉤子任務(wù)4.1Vue生命周期認(rèn)識(shí)4.1.2注冊(cè)生命周期鉤子組合式API中的生命周期鉤子的注冊(cè)分為兩個(gè)步驟：第一步驟：頁(yè)面導(dǎo)入生命周期鉤子函數(shù)；第二步驟：設(shè)置生命周期鉤子函數(shù)的參數(shù)，參數(shù)是一個(gè)回調(diào)函數(shù)，回調(diào)函數(shù)中書(shū)寫(xiě)在本鉤子執(zhí)行的代碼。頁(yè)面掛載【例4-1】頁(yè)面掛載生命周期鉤子案例。代碼如下：<template> <divref="el"></div> </template> <scriptsetup> import{ref,onMounted,onBeforeMount}from'vue’constel=ref()onBeforeMount(()=>{console.log(el.value);//undefined})onMounted(()=>{console.log(el.value);//<divdata-v-7a7a37b1></div>})</script>任務(wù)4.1Vue生命周期認(rèn)識(shí)4.1.2注冊(cè)生命周期鉤子響應(yīng)式狀態(tài)更新【例4-2】響應(yīng)式狀態(tài)更新生命周期鉤子案例。代碼如下：<template><div>數(shù)據(jù)展示：{{

count}}<button@click="count++">更新</button></div></template><scriptsetup>import{ref,onBeforeUpdate,onUpdated}from'vue’;任務(wù)4.1Vue生命周期認(rèn)識(shí)constcount=ref(0)onBeforeUpdate(()=>{console.log('onBeforeUpdate',count.value); alert('更新中...')})onUpdated(()=>{ console.log('onUpdated',count.value);})</script>任務(wù)4.1Vue生命周期認(rèn)識(shí)4.1.2注冊(cè)生命周期鉤子【例4-2】案例執(zhí)行效果如圖4-2所示。圖4-2【例4-2】案例執(zhí)行效果圖(onBeforeUpdate階段)任務(wù)4.1Vue生命周期認(rèn)識(shí)4.1.2注冊(cè)生命周期鉤子響應(yīng)式狀態(tài)已經(jīng)變更，但還未重新渲染DOM，因此頁(yè)面顯示的count值仍為0，而控制臺(tái)輸出的響應(yīng)式狀態(tài)count值為1。單擊“確定”按鈕后，此時(shí)已重新渲染DOM，因此頁(yè)面顯示count值為1。OnUpdated鉤子執(zhí)行效果如圖4-3所示。圖4-3【例4-2】案例執(zhí)行效果圖(onUpdated階段)任務(wù)4.1Vue生命周期認(rèn)識(shí)4.1.2注冊(cè)生命周期鉤子實(shí)例銷(xiāo)毀在實(shí)例銷(xiāo)毀前的onUnmounted()鉤子中可以執(zhí)行手動(dòng)清理的功能，例如計(jì)時(shí)器、DOM事件監(jiān)聽(tīng)器或者與服務(wù)器的連接?！纠?-3】實(shí)例銷(xiāo)毀生命周期鉤子案例。代碼如下：<!—父組件代碼--><template> <button@click="flag=!flag">切換子組合Child</button> <childv-if="flag"></child></template><scriptsetup> importChildfrom'./Child.vue' import{ref}from'vue' constflag=ref(true)</script><!—子組件代碼--><template><div>child</div></template><scriptsetup>import{onMounted,onBeforeUnmount,onUnmounted}from'vue'lettimer onMounted(()=>{ timer=setInterval(()=>{ console.log(1); },1000) }) onBeforeUnmount(()=>{ console.log('BeforeUnmount'); }) onUnmounted(()=>{ console.log('onUnmounted'); clearInterval(timer) })</script>任務(wù)4.1Vue生命周期認(rèn)識(shí)4.1.2注冊(cè)生命周期鉤子效果如圖4-4、4-5、4-6所示。

圖4-4【例4-3】案例頁(yè)面初始效果圖圖4-5【例4-3】案例單擊按鈕效果圖圖4-6【例4-3】案例注釋“clearInterval(timer)”代碼行后的效果圖任務(wù)4.2 Axios庫(kù)的使用【任務(wù)陳述】本任務(wù)實(shí)現(xiàn)在“就業(yè)職通車(chē)”項(xiàng)目中最新崗位的本地?cái)?shù)據(jù)改寫(xiě)為mock數(shù)據(jù)，并通過(guò)Axios異步獲取數(shù)據(jù)并渲染至頁(yè)面中。同時(shí)將點(diǎn)贊數(shù)據(jù)通過(guò)Axios上傳至服務(wù)器端數(shù)據(jù)接口中并渲染。【任務(wù)分析】

分為六步驟完成本任務(wù)，如圖4-7所示。圖4-7任務(wù)實(shí)施流程圖任務(wù)4.2 Axios庫(kù)的使用步驟一.使用json-server搭建模擬服務(wù)器接口數(shù)據(jù)環(huán)境。Json-server是一個(gè)npm管理包，字面上解釋為一個(gè)在本地（前端）運(yùn)行，可以存儲(chǔ)json數(shù)據(jù)的服務(wù)器。通俗來(lái)說(shuō)，就是模擬服務(wù)端接口數(shù)據(jù)，一般用于前后端分離開(kāi)發(fā)時(shí)，前端可以不依賴(lài)后端API接口獲取數(shù)據(jù)，而在本地搭建JSON服務(wù)器環(huán)境，自行產(chǎn)生測(cè)試數(shù)據(jù)來(lái)測(cè)試前端開(kāi)發(fā)代碼。安裝json-server插件。在vscode編輯器中將項(xiàng)目的根目錄設(shè)為當(dāng)前目錄，并單擊鼠標(biāo)右鍵選擇“在集成終端中打開(kāi)”，在打開(kāi)的終端界面中輸入以下命令后，將json-server插件安裝至本項(xiàng)目的運(yùn)行依賴(lài)。任務(wù)4.2 Axios庫(kù)的使用npminstalljson-server--save創(chuàng)建data.json數(shù)據(jù)文件。在項(xiàng)目根目錄新建data.json文件，并在data.js中建立二級(jí)數(shù)據(jù)，一級(jí)數(shù)據(jù)為messageList、articleList、article，它們對(duì)應(yīng)著服務(wù)器端的文件路徑名。將App.vue中的本地?cái)?shù)據(jù)全部剪切放至對(duì)應(yīng)的data.json文件中。注意需要將數(shù)據(jù)的注釋全部刪除，并調(diào)整成json格式?！救蝿?wù)實(shí)施】data.json文件格式如下：{ "messageList":[{…},… ], ”articleList”:[{…},…], "article":[ {…},… ]}任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】設(shè)置mock數(shù)據(jù)。在終端中輸入命令：json-serverdata.json，將data.json數(shù)據(jù)放在模擬服務(wù)器端，地址默認(rèn)為http://localhost:3000，打開(kāi)http://localhost:3000/messageList可查看二級(jí)數(shù)據(jù)。當(dāng)出現(xiàn)如圖4-8所示的界面后，恭喜您，已經(jīng)成功搭建了服務(wù)器接口數(shù)據(jù)環(huán)境。圖4-8json-server運(yùn)行界面任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】設(shè)置快速啟動(dòng)json-server。為提高效率，可以對(duì)json-server設(shè)置快速啟動(dòng)命令，如圖4-9所示。打開(kāi)項(xiàng)目根目錄的package.json文件，在“script”處輸入如下代碼：”buildData”:”json-serverdata.json”，今后啟動(dòng)json-server命令只需要在終端輸入命令即可：npmrunbuildData。圖4-9快速啟動(dòng)json-server命令執(zhí)行效果任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】步驟二.通過(guò)Axios完成服務(wù)器數(shù)據(jù)的調(diào)用，并渲染到頁(yè)面。安裝Axios與vue-axios。在終端命令行處，輸入以下代碼，安裝Axios與vue-axios至項(xiàng)目的運(yùn)行依賴(lài)。npminstallaxiosvue-axios-–save導(dǎo)入Axios與vue-axios。在main.js文件中中導(dǎo)入axios和vue-axios，并進(jìn)行注冊(cè)。import{createApp}from'vue'importAppfrom'./App.vue'//導(dǎo)入Axios和vue-axiosimportaxiosfrom'axios'importVueAxiosfrom'vue-axios'constapp=createApp(App)任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】//注冊(cè)Axios和vue-axiosapp.use(VueAxios,Axios)app.mount('#app')//設(shè)計(jì)vue全局屬性app.config.globalProperties.$axios=axios定義獲取最新崗位數(shù)據(jù)方法getComments()。//頁(yè)面中使用Axios，每個(gè)頁(yè)面都需要設(shè)置constcurrentInstance=getCurrentInstance()const{$Axios}=currentInstance.appContext.config.globalProperties//獲取最新崗位數(shù)據(jù)functiongetComments(){ return$Axios.get("http://localhost:3000/messageList")}任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】調(diào)用getComments()方法獲取最新崗位數(shù)據(jù)。在Vue生命周期鉤子onBeforeMount()中調(diào)用getComments方法請(qǐng)求最新崗位數(shù)據(jù)。數(shù)據(jù)是越早獲取越方便后續(xù)的渲染，因此放在onBeforeMount()生命周期中進(jìn)行請(qǐng)求。onBeforeMount(()=>{getComments().then(result=>{ if(result.status==200){ messageList.content=result.data }})})刷新瀏覽器頁(yè)面，可以看到頁(yè)面中已經(jīng)成功請(qǐng)求到接口地址上的mock數(shù)據(jù)。任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】步驟三.完成崗位發(fā)布功能模塊。定義提交最新崗位數(shù)據(jù)方法postComments()。在App.vue中定義postComments方法，通過(guò)Axios的post方法將數(shù)據(jù)提交至服務(wù)器接口。//上傳崗位發(fā)布數(shù)據(jù)functionpostComments(data){ return$Axios.post("http://localhost:3000/messageList",data)}定義崗位發(fā)布方法submit()。在submit()中定義提交崗位發(fā)布的程序邏輯，messageInfo為需要上傳的新數(shù)據(jù)，使用postComments方法將messageInfo上傳至接口，再通過(guò)getComments方法請(qǐng)求更新后的全部數(shù)據(jù)，并在頁(yè)面中渲染。任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】//提交方法functionsubmit(){if(.trim()==""||message.email.trim()==""||message.content.trim()==""){ alert("信息輸入不全，請(qǐng)輸入完整信息！")return}//定義數(shù)據(jù)letmessageInfo={id:Date.now(),email:message.email,name:,content:message.content,scale:message.scale,support:0,//點(diǎn)贊數(shù)量has_sup:false,//點(diǎn)贊狀態(tài)unnamed:message.unnamed//匿名狀態(tài)}//上傳數(shù)據(jù)postComments(messageInfo).then(postResult=>{if(postResult.status==201){message.id=""message.email=""=""message.content=""message.scale=0message.support=0message.has_sup=falsemessage.unnamed=false//獲取mock接口更新的數(shù)據(jù)getComments().then(getResult=>{if(getResult.status==200){messageList.content=getResult.data}})})任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】步驟四.完成點(diǎn)贊功能模塊。定義上傳點(diǎn)贊數(shù)據(jù)方法postSupportState()。定義postSupportState方法，使用Axios中的put方法修改當(dāng)前id值的點(diǎn)贊數(shù)據(jù)。//上傳更新的點(diǎn)贊數(shù)據(jù)functionpostSupportState(newData){return$Axios.put("http://localhost:3000/messageList/"+newData.data.id,newData.data)}定義獲取點(diǎn)贊數(shù)據(jù)方法getSupportState()。使用Axios中的get方法獲取更新后的點(diǎn)贊數(shù)據(jù)。//獲取更新的點(diǎn)贊數(shù)據(jù)functiongetSupportState(id){return$Axios.get("http://localhost:3000/messageList/"+id)}任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】定義點(diǎn)贊功能模塊邏輯方法support()。點(diǎn)贊功能模塊的處理，封裝成support函數(shù)，強(qiáng)化邏輯思維。//點(diǎn)贊方法functionsupport(newData){

//數(shù)據(jù)傳遞給接口 postSupportState(newData).then(postResult=>{ if(postResult.status==200){ getSupportState(newData.data.id).then(getResult=>{ if(getResult.status==200){ messageList.content[newData.index]=getResult.data } }) } })}任務(wù)4.2 Axios庫(kù)的使用【任務(wù)實(shí)施】步驟五.使用攔截器自動(dòng)添加日期。設(shè)置請(qǐng)求攔截器。在main.js文件中使用Axios請(qǐng)求攔截器為新發(fā)表的崗位信息自動(dòng)添加time屬性，用于記錄該崗位的發(fā)布日期。//設(shè)置請(qǐng)求攔截器erceptors.request.use(function(config){

//攔截成功 if(config.data){ config.data.time=Date.now() } returnconfig},function(err){

//攔截失敗 console.error(err)})app.mount('#app')任務(wù)4.2 Axios庫(kù)的使用<scriptsetup>//解析時(shí)間戳functionparserTime(time){if(!time){return}letdate=newDate(time);letY=date.getFullYear()+'年’;letM=(date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1)+'月’;letD=date.getDate()+'日’;returnY+M+D}</script><template><divclass="message_sup">

<!--渲染時(shí)間--> <small>{{parserTime(item.time)}}</small> ……</div></template>調(diào)用parserTime()方法。保存后在頁(yè)面中重新增加崗位信息后日期字段才會(huì)顯示出來(lái)，舊有信息通過(guò)點(diǎn)贊方式顯示日期?！救蝿?wù)實(shí)施】定義調(diào)整日期格式方法parserTime()。time屬性獲取到的值是時(shí)間戳，需要進(jìn)行處理后才能正確渲染在模板中。在App.vue組件中編制parserTime方法，用來(lái)獲取正確的時(shí)間格式。任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】4.2.1mock數(shù)據(jù)mock數(shù)據(jù)指的是虛假數(shù)據(jù)，前端開(kāi)發(fā)人員可以mock假數(shù)據(jù)來(lái)模擬開(kāi)發(fā)，這樣的好處在前后端并行開(kāi)發(fā)時(shí)，前端人員不用等后端人員開(kāi)發(fā)完API，只要定義好接口文檔就可以開(kāi)始工作，互不影響，只有最后的聯(lián)調(diào)階段前后端才進(jìn)行真實(shí)數(shù)據(jù)交互。借助mock數(shù)據(jù)，不會(huì)出現(xiàn)一個(gè)團(tuán)隊(duì)等待另一個(gè)團(tuán)隊(duì)的情況，提高開(kāi)發(fā)效率，利于整個(gè)產(chǎn)品質(zhì)量及進(jìn)度的保證。4.2.2vue-axios插件Vue-axios是將Axios基于Vue.js進(jìn)行輕度封裝，便于在Vue.js中開(kāi)發(fā)使用。4.2.3AxiosAxios是一個(gè)基于promise的網(wǎng)絡(luò)請(qǐng)求庫(kù)，作用于node.js和瀏覽器中。在服務(wù)器端使用原生node.js的http模塊，而在瀏覽器端則使用XMLHttpRequest。因此Axios本質(zhì)上是對(duì)原生XHR的封閉，只不過(guò)它是promise的實(shí)現(xiàn)版本，符合最新的ES規(guī)范。任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】Axios特性從瀏覽器創(chuàng)建

XMLHttpRequests。從node.js創(chuàng)建

http

請(qǐng)求。支持

Promise

API。攔截請(qǐng)求和響應(yīng)。轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)。取消請(qǐng)求。自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)?？蛻?hù)端支持防御XSRF。Axios基本用法Axios主要的作用是向服務(wù)器發(fā)起HTTP請(qǐng)求，根據(jù)HTTP標(biāo)準(zhǔn)，HTTP請(qǐng)求可以使用多種請(qǐng)求方法。為了方便起見(jiàn)，已經(jīng)為所有支持的請(qǐng)求方法提供了別名。Axios.request(config)Axios.get(url[,config])Axios.delete(url[,config])Axios.head(url[,config])Axios.options(url[,config])Axios.post(url[,data[,config]])Axios.put(url[,data[,config]])Axios.patch(url[,data[,config]])注意，在使用別名方法時(shí)，

url、method、data

這些屬性都不必在配置中指定。任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】發(fā)起GET請(qǐng)求發(fā)起一個(gè)GET請(qǐng)求，從指定的資源請(qǐng)求數(shù)據(jù)。語(yǔ)法規(guī)則如下：//向給定ID的用戶(hù)發(fā)起請(qǐng)求axios.get(url) .then(function(response){

//處理成功情況 console.log(response); }) .catch(function(error){

//處理錯(cuò)誤情況 console.log(error); }) .then(function(){

//總是會(huì)執(zhí)行 });任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】發(fā)起POST請(qǐng)求發(fā)起一個(gè)POST請(qǐng)求，向指定的資源提交數(shù)據(jù)并處理請(qǐng)求，數(shù)據(jù)包含在請(qǐng)求體中，語(yǔ)法規(guī)則如下：axios.post(url,data) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });發(fā)起PUT請(qǐng)求發(fā)起一個(gè)PUT請(qǐng)求，從客戶(hù)端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔內(nèi)容，語(yǔ)法規(guī)則如下：axios.put(url,data) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); });任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】Axios請(qǐng)求攔截器Axios攔截器的作用是在每次的請(qǐng)求或響應(yīng)被then或catch處理前攔截它們并自動(dòng)被觸發(fā)，分為請(qǐng)求攔截器和響應(yīng)攔截器。示意圖如圖4-10所示。圖4-10攔截器示意圖請(qǐng)求攔截器通過(guò)Aerceptors.request.use()配置請(qǐng)求攔截器，語(yǔ)法格式如下：//添加請(qǐng)求攔截器erceptors.request.use(function(config){//在發(fā)送請(qǐng)求之前做些什么returnconfig;},function(error){//對(duì)請(qǐng)求錯(cuò)誤做些什么returnPromise.reject(error);});任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】請(qǐng)求攔截器通過(guò)Aerceptors.request.use()配置請(qǐng)求攔截器，語(yǔ)法格式如下： //添加請(qǐng)求攔截器 erceptors.request.use(function(config){ //在發(fā)送請(qǐng)求之前做些什么 returnconfig; },function(error){ //對(duì)請(qǐng)求錯(cuò)誤做些什么 returnPromise.reject(error); });任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】【例4-4】請(qǐng)求攔截器案例。給表單提交的數(shù)據(jù)自動(dòng)添加birthday字段，代碼如下：//請(qǐng)求攔截器$erceptors.request.use(config=>{config.data.birthday='today'returnconfig},err=>console.log(err))$axios.post('http://localhost:3000/messageList',{id:Date.now(),email:"ala@d",效果如圖4-11所示。圖4-11【例4-4】請(qǐng)求攔截器案例執(zhí)行效果圖任務(wù)4.2 Axios庫(kù)的使用【知識(shí)鏈接】name:"111111",content:"111111111111111111",scale:0,support:0