如何理解Vue前后端數(shù)據(jù)交互與顯示
將后端所計算的數(shù)據(jù)呈現(xiàn)在前端頁面的相應(yīng)位置并根據(jù)用戶點擊操作改變相應(yīng)的數(shù)據(jù)和界面，再傳值給后端。該技術(shù)是Web開發(fā)必備，是前后端交互的紐帶。難點在于獲取后端數(shù)據(jù)并且防止數(shù)據(jù)聯(lián)動。
二、技術(shù)詳述1. 從接口獲取后端數(shù)據(jù)(1) 仔細查看后端所傳數(shù)據(jù)的類型。主要是區(qū)分?jǐn)?shù)組和單個數(shù)據(jù)。查看后端的請求方式，區(qū)分post或者get。
(2) 首先，在data中return一個xxxData:[]數(shù)組或一個變量xxxData:<類型>來接收后端傳來的數(shù)據(jù)。
(3) 在方法中定義一個請求函數(shù)，比如我們這里函數(shù)名定義為update。請求函數(shù)中最主要的為請求語句通過api獲取后端數(shù)據(jù)。
{params:this.xxx}中填寫的是所攜帶的參數(shù)。
當(dāng)get時，params作為一個關(guān)鍵字，總領(lǐng)所有攜帶參數(shù)的傳遞，例如傳遞參數(shù)的名字為id，值為data中已聲明的值myId，那么在get請求語句中可以寫成：
update(){ this.$http.get(baseURL+`api/條件`,{params:{id:this.myId}}).then(function(res){this.memberData = res.body; });},
當(dāng)post時，可以不加params關(guān)鍵字。直接寫成：
update(){ this.$http.get(baseURL+`api/條件`,{id:this.myId}).then(function(res){this.memberData = res.body; });},
返回的參數(shù)在then之后的匿名函數(shù)里。
這里baseURL是項目的路徑，如果項目部署在服務(wù)器上面一般格式為www.XXX.com/項目名，之后的api是后端封裝的api接口。
api/條件這個條件中往往會出現(xiàn)前端定義的變量，在傳值時若將其直接寫入便會成為接口地址的一部分。要想讓其代表它內(nèi)在的值，則使用${}取值。例如：
console.info(`大家好，我叫${name}，今年${age}歲了`)// 等價于console.info(’大家好，我叫’ + name + ’，今年’ + age + ’歲了’)
(4) 此時這個請求操作是沒有調(diào)用，是默認(rèn)執(zhí)行的，所以要在mounted里面實時執(zhí)行。
整體代碼呈現(xiàn)例如：
<script> export default {data(){ memberData[],//等待存放后端數(shù)據(jù)的接收數(shù)組},mounted(){ this.update();//在html加載完成后進行，相當(dāng)于在頁面上同步顯示后端數(shù)據(jù)},methods:{ update(){ this.$http.get(`/api/project/${this.$store.state.project.id}`, { project_id:this.$store.state.project.id, }).then(doc => { var code = doc.data.status; var msg = doc.data.msg; if (code == 0){//請求成功，可以根據(jù)不同的狀態(tài)碼返回值做出相應(yīng)的動作this.memberData = doc.data.data.member//本數(shù)組存入后端數(shù) } }) },}, };</script>
在以上例子中，doc接收返回的參數(shù)，以doc.data開頭獲取。其中后端傳送的數(shù)據(jù)又具有data結(jié)構(gòu)，所以又再次.data，深入再次獲取其中的member數(shù)據(jù)。
注意：在我剛開始學(xué)習(xí)獲取數(shù)據(jù)的時候，將請求URL錯用單引號（’）引用。這里是使用反單引號（`）。
在使用vue編程中，組件里面綁定的事件如果有傳入事件名稱字符串/字符串參數(shù)，這個時候光用單雙引號會出現(xiàn)string is undefined，這個時候我們就需要用到反單引號。
對比后端項目文檔：
前端向后端傳值和之前提到的攜帶參數(shù)的概念一樣，是同樣的方法。但是不同點在于這是以前端向后端傳參為主的交互，所以攜帶參數(shù)很多的情況下，容易造成代碼過長，閱讀書寫繁瑣的問題。這就可以建立中間變量結(jié)構(gòu)，統(tǒng)一傳值，這時攜帶參數(shù)只需要填寫一個。例如：
var obj = {//將所有攜帶參數(shù)放在一起 project_id:this.$store.state.project.id, id:this.id, finish:checked, name:this.flowName}this.$http.post(`/api/project/${this.$store.state.project.id}/task/update`, obj)//直接傳值的合集 .then(doc => { var code = doc.data.status; var msg = doc.data.msg;if (code == 0){this.update()//更新后端數(shù)據(jù)后自動刷新前端，隨著更改外觀} else{this.$alert(msg,’false’)}});3. 顯示獲取到的數(shù)據(jù)
相對于獲取數(shù)據(jù)而言，顯示數(shù)據(jù)就顯得簡單許多了。
首先后端傳來的數(shù)據(jù)肯定是很多層結(jié)構(gòu)或者是一個集合，所以在用一個大數(shù)組接受后臺數(shù)據(jù)的同時，在data return中要聲明幾個自己需要顯示的具體的變量，后臺數(shù)據(jù)要分清楚存入前端變量中才能被前端所使用。將數(shù)組中的數(shù)據(jù)再次分離。例如：
getTaskData:function(){this.$http.get(`/api/project/${this.$store.state.project.id}/task/info?id=${this.messageId}`,//根據(jù)后端提供的URL，其中?后跟參數(shù)要注意寫法${}{params:{project_id:this.$store.state.project.id,task_id:this.messageId}}).then(doc=>{ if(doc.data.data){//當(dāng)有數(shù)據(jù)傳來時才可獲取。若是為空，則在傳來的data下再次.xxx尋找結(jié)構(gòu)中的子變量則會出錯。this.taskData=doc.data.data;//所謂的整體大數(shù)組，包含了所有傳來的數(shù)據(jù)this.defaultChecked=this.taskData.finish;//細分傳來的數(shù)據(jù)結(jié)構(gòu)并放入已聲明過的變量this.taskRemarks=this.taskData.remarks; } elsethis.taskData=null; }).catch(err=>{//處理錯誤的寫法 this.$alert('未知錯誤', 'false'); //服務(wù)器還沒搭起來 })},
在第一次接觸接收數(shù)據(jù)時我就有個疑問，一直不知道類似于這樣的“子數(shù)據(jù)”怎么獲取：
獲得了具體的數(shù)據(jù)之后，想要顯示在html里。一般來說，將變量或者其代表的信息顯示在網(wǎng)頁上大多是插入在html標(biāo)簽中，變量作為屬性值就要使用v-bind來實現(xiàn)。v-bind就是用于綁定數(shù)據(jù)和元素屬性的。例如：
<a href='http://m.b3g6.com/bcjs/myHome.com' rel='external nofollow' >OK</a>
想要實時更新href屬性值則需要綁定自定義的變量上去，而在雙引號中的變量都會被當(dāng)作字符串。這時我們需要用v-bind實現(xiàn)。綁定之后，對應(yīng)的值要去vue的數(shù)據(jù)里面找。當(dāng)我們在控制臺改變url時，對應(yīng)也會變化。相同的，我們還可以綁定圖片src屬性、class屬性。
//這里url是在data中return的自定義變量，存儲鏈接字符串//url:'MyHome.com',<a v-bind:href='http://m.b3g6.com/bcjs/url' rel='external nofollow' rel='external nofollow' >OK</a>//簡寫為（我簡記為在需要變量名作為屬性的時候，在屬性前加冒號）<a :href='http://m.b3g6.com/bcjs/url' rel='external nofollow' rel='external nofollow' >OK</a>
我在剛開始想實時變化頁面顯示數(shù)據(jù)的時候，即根據(jù)后端傳來的數(shù)據(jù)更改頁面顯示標(biāo)簽屬性的時候，錯誤使用dom控制元素顯示。因為之前沒有接觸過Vue，所以我對于界面元素的更改的意識停留在 “document.getElementById(’xxx’).<屬性>=xxx” 的階段，這樣做起來代碼很繁瑣，效率也低，增加了代碼的耦合性。
4. 防止數(shù)據(jù)聯(lián)動在任務(wù)面板的模塊，為要根據(jù)不同的點擊顯示不同的任務(wù)詳情就要傳遞每個任務(wù)唯一的id。而在顯示詳情后有更改信息的功能，在這隨意的更改可能會影響其他任務(wù)的信息，造成信息錯亂。主要原因是剛開始我們監(jiān)聽了所有組件的更改，例如這段代碼在更改任務(wù)緊急程度的時候調(diào)用：
onFlowPri(pri){this.taskpriority = prithis.$http .post(`/api/project/${this.$store.state.project.id}/task/update`, {//當(dāng)緊急程度一變化的時候就向后端傳輸數(shù)據(jù)，僅一項變化，更改的卻是全部數(shù)據(jù)，這時傳輸其他舊數(shù)據(jù)就會遇到問題project_id:this.$store.state.project.id,id:this.id,remarks:this.flowMarks,name:this.flowName,finish:this.finish,priority:pri,}) .then(doc => { var code = doc.data.status; var msg = doc.data.msg;if (code == 0){this.update()}else{this.$alert(msg,’false’)} });},
而在用戶是否保存不得而知的時候太早的傳輸更改數(shù)據(jù)，積極的監(jiān)聽會造成錯誤。增加了代碼的繁瑣程度。尤其是和用戶交互的數(shù)據(jù)足夠多的時，會造成混亂。好的方式應(yīng)在用戶選擇確認(rèn)保存后再將整體表格中要求填寫的數(shù)據(jù)移交給后端，這樣一次性的傳輸保證了數(shù)據(jù)的準(zhǔn)確性。
問題描述：在用戶改變某些功能性質(zhì)時，界面所表現(xiàn)出來的數(shù)據(jù)或者組件不能實時變化，即需要用戶手動刷新整個頁面。
解決方法：首先界面的加載是要靠mounted方法中定義的獲取后臺數(shù)據(jù)的方法（在這里一般將該方法命名為update）顯示。作為鉤子函數(shù)，它向后端請求，拿回數(shù)據(jù)，配合路由器鉤子做一些事情。主要是依靠api拿數(shù)據(jù) ，在mounted和改變的時候直接調(diào)用update就可以。即在用戶點擊事件發(fā)生之后在相應(yīng)事件的位置調(diào)用update重新從后臺獲取新數(shù)據(jù)。
問題描述：后端傳入前端的是一個數(shù)組，前端接收到自己的數(shù)組之后，二次使用push新的元素進入時報錯。
問題表面看起來很簡單找出原因，是因為我所push的數(shù)組不被承認(rèn)為數(shù)組。但是我反復(fù)檢查過確實在data中接收數(shù)據(jù)類型被聲明為數(shù)組。這個報錯也找不到具體的位置，它報錯全是從runtime運行時緩存讀的，一個源文件都沒映射到。是個玄學(xué)問題。
解決方法：選定項目。就是這么簡單。我們的產(chǎn)品是要通過選擇項目來向后臺傳送數(shù)據(jù)的，即項目ID。所以在報錯信息不明確的時候要嘗試發(fā)現(xiàn)有無信息沒讀到的問題。
3. 傳值顯示值（針對時間）問題描述：前后端數(shù)據(jù)交互中比較繞的問題就是時間作為DateTime類型傳值的時候的數(shù)據(jù)類型轉(zhuǎn)換。以及在使用時間選擇器的時候?qū)⒔M件中的時間顯示為所傳值的時間。
如圖設(shè)置時間位置所顯示的時間是錯誤的，而控制臺輸出的是從后臺傳入的正確時間。即時間無法實時在時間選擇框中顯示。
從設(shè)置時間等時間選擇框中更改時間并把其傳入到后端時，會有類型不匹配的問題。即String和DateTime的轉(zhuǎn)換。
解決方法：在時間選擇器的屬性中加入:value屬性并以moment約束要顯示的時間變量例如：
:value='[moment(taskDetails.t_begin), moment(taskDetails.t_end)]'
時間格式化組件moment的使用：需要在script中導(dǎo)入組件，并在methods中聲明moment。
<script>import moment from ’moment’</script>
若要將時間數(shù)據(jù)傳回后端的話需要將String類型的數(shù)據(jù)轉(zhuǎn)換，即需要聲明定義一個toDateTime函數(shù)：
function toDateTime(time) {var date = new Date(time);var Y = date.getFullYear() + ’-’;var M = (date.getMonth()+1 < 10 ? ’0’+(date.getMonth()+1) : date.getMonth()+1) + ’-’;var D = (date.getDate() < 10 ? ’0’+date.getDate() : date.getDate()) + ’ ’;var h = (date.getHours() < 10 ? ’0’+date.getHours() : date.getHours()) + ’:’;var m = (date.getMinutes() < 10 ? ’0’+date.getMinutes() : date.getMinutes()) + ’:’;var s = (date.getSeconds() < 10 ? ’0’+date.getSeconds() : date.getSeconds());strDate = Y+M+D+h+m+s;return strDate;}
在傳值的時候直接規(guī)范化。
四、總結(jié)1.Vue中數(shù)值傳送是比較簡單的部分，主要是準(zhǔn)備好等待接收的變量，保證數(shù)據(jù)成功被載入，數(shù)據(jù)的類型問題也要注意，要仔細核對后端寄來的數(shù)據(jù)。Vue的前后端交互都是有較簡單實用的模板來實現(xiàn)的，所以很好掌握。
2.顯示數(shù)據(jù)的時候要參透不同組件的展示方式，有的利用item循環(huán)展示，有的直接引用，更多是用v-bind來實現(xiàn)變量影響顯示。
3.本次項目開發(fā)中，任務(wù)面板的開發(fā)和代碼的編寫是很復(fù)雜的，容易混淆，因為有多個彈出窗口以及面板，上面用戶所填寫的內(nèi)容還有從后臺接收所顯示的內(nèi)容都是不同的，它們之間的數(shù)據(jù)聯(lián)動是很可怕的，稍不注意就容易一個新面板數(shù)據(jù)的填寫覆蓋掉以前已顯示的舊數(shù)據(jù)。尤其對于表單一類需要用戶參與填寫的組件來說，需要實時監(jiān)控每個可能交互的子組件，但是千萬要注意不一定是每個子組件都需要有及時的反饋，不然產(chǎn)生的不必要的關(guān)聯(lián)動作有可能會影響到最后信息的存儲。尤其是帶有取消的表單，即需要一鍵歸零，過早的產(chǎn)生相應(yīng)動作會適得其反。
以上就是如何理解Vue前后端數(shù)據(jù)交互與顯示的詳細內(nèi)容，更多關(guān)于Vue前后端數(shù)據(jù)交互與顯示的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
網(wǎng)公網(wǎng)安備