Vue框架應(yīng)用實(shí)戰(zhàn)項(xiàng)目式教程 課件 任務(wù)4 崗位信息異步渲染

1框架技術(shù)應(yīng)用崗位信息異步渲染任務(wù)4學(xué)習(xí)目標(biāo)【知識目標(biāo)】掌握生命周期鉤子的注冊及使用；熟悉不同生命周期鉤子的運(yùn)行順序；掌握json-server插件的使用方法；熟練掌握Axios的安裝及使用；掌握Axios攔截器的注冊及使用步驟?！炯寄苣繕?biāo)】能夠熟練注冊使用生命周期鉤子；能夠熟練使用json-server模擬服務(wù)端接口數(shù)據(jù)；能夠熟練掌握Axios異步請求數(shù)據(jù)方法?！舅刭|(zhì)目標(biāo)】培養(yǎng)認(rèn)真仔細(xì)的工作態(tài)度；樹立良好的邏輯思維能力。掌握Vue生命周期鉤子的注冊，使用及生命周期鉤子的運(yùn)行順序。理解Axios作用，并熟練掌握通過Axios異步請求數(shù)據(jù)的方法。項(xiàng)目背景本任務(wù)負(fù)責(zé)重構(gòu)“就業(yè)職通車”網(wǎng)站中崗位數(shù)據(jù)渲染模塊。通過學(xué)習(xí)生命周期與Axios實(shí)現(xiàn)在瀏覽器端打開頁面時通過生命周期鉤子自動調(diào)用Axios獲取json-server服務(wù)器端數(shù)據(jù)并渲染至頁面。任務(wù)規(guī)劃本任務(wù)要求使用生命周期與Axios庫，獲取json-server服務(wù)器端數(shù)據(jù)。任務(wù)4.1Vue生命周期認(rèn)識【任務(wù)陳述】每個Vue實(shí)例在創(chuàng)建時都需要經(jīng)歷一系列的初始化步驟，比如設(shè)置好數(shù)據(jù)偵聽，編譯模板，掛載實(shí)例到DOM，以及在數(shù)據(jù)改變時更新DOM，我們稱之為Vue實(shí)例的生命周期。在整個生命周期中，每個節(jié)點(diǎn)都會有一個生命周期鉤子函數(shù)自動運(yùn)行，我們可以在此特定階段搭建相應(yīng)功能。整個生命周期如圖4-1所示。圖4-1生命周期圖示任務(wù)4.1Vue生命周期認(rèn)識【任務(wù)分析】本任務(wù)要求掌握Vue實(shí)例的生命周期鉤子運(yùn)行原理及注冊使用步驟。【任務(wù)實(shí)施】在任務(wù)4.2的步驟二中具體實(shí)現(xiàn)?！局R鏈接】4.1.1生命周期鉤子生命周期鉤子用來描述Vue實(shí)例從創(chuàng)建到銷毀的整個生命周期，具體如表4-1所示。生命周期鉤子組合式API中調(diào)用說明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樹之前調(diào)用updatedonUpdated()組件因?yàn)轫憫?yīng)式狀態(tài)變更而更新DOM樹之后調(diào)用beforeUnmoutedonBeforeUnmount()組件實(shí)例被卸載之前調(diào)用unmountedonUnmounted()組件實(shí)例被卸載之后調(diào)用表4-1生命周期鉤子任務(wù)4.1Vue生命周期認(rèn)識4.1.2注冊生命周期鉤子組合式API中的生命周期鉤子的注冊分為兩個步驟：第一步驟：頁面導(dǎo)入生命周期鉤子函數(shù)；第二步驟：設(shè)置生命周期鉤子函數(shù)的參數(shù)，參數(shù)是一個回調(diào)函數(shù)，回調(diào)函數(shù)中書寫在本鉤子執(zhí)行的代碼。頁面掛載【例4-1】頁面掛載生命周期鉤子案例。代碼如下：<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)識4.1.2注冊生命周期鉤子響應(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)識constcount=ref(0)onBeforeUpdate(()=>{console.log('onBeforeUpdate',count.value); alert('更新中...')})onUpdated(()=>{ console.log('onUpdated',count.value);})</script>任務(wù)4.1Vue生命周期認(rèn)識4.1.2注冊生命周期鉤子【例4-2】案例執(zhí)行效果如圖4-2所示。圖4-2【例4-2】案例執(zhí)行效果圖(onBeforeUpdate階段)任務(wù)4.1Vue生命周期認(rèn)識4.1.2注冊生命周期鉤子響應(yīng)式狀態(tài)已經(jīng)變更，但還未重新渲染DOM，因此頁面顯示的count值仍為0，而控制臺輸出的響應(yīng)式狀態(tài)count值為1。單擊“確定”按鈕后，此時已重新渲染DOM，因此頁面顯示count值為1。OnUpdated鉤子執(zhí)行效果如圖4-3所示。圖4-3【例4-2】案例執(zhí)行效果圖(onUpdated階段)任務(wù)4.1Vue生命周期認(rèn)識4.1.2注冊生命周期鉤子實(shí)例銷毀在實(shí)例銷毀前的onUnmounted()鉤子中可以執(zhí)行手動清理的功能，例如計(jì)時器、DOM事件監(jiān)聽器或者與服務(wù)器的連接?！纠?-3】實(shí)例銷毀生命周期鉤子案例。代碼如下：<!—父組件代碼--><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)識4.1.2注冊生命周期鉤子效果如圖4-4、4-5、4-6所示。

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

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

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

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

http

請求。支持

Promise

API。攔截請求和響應(yīng)。轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)。取消請求。自動轉(zhuǎn)換JSON數(shù)據(jù)?？蛻舳酥С址烙鵛SRF。Axios基本用法Axios主要的作用是向服務(wù)器發(fā)起HTTP請求，根據(jù)HTTP標(biāo)準(zhǔn)，HTTP請求可以使用多種請求方法。為了方便起見，已經(jī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]])注意，在使用別名方法時，

url、method、data

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

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

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

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