Vue前后端數(shù)據(jù)交互與顯示的示例分析

小編給大家分享一下Vue前后端數(shù)據(jù)交互與顯示的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、技術(shù)概述

將后端所計(jì)算的數(shù)據(jù)呈現(xiàn)在前端頁(yè)面的相應(yīng)位置并根據(jù)用戶(hù)點(diǎn)擊操作改變相應(yīng)的數(shù)據(jù)和界面，再傳值給后端。該技術(shù)是Web開(kāi)發(fā)必備，是前后端交互的紐帶。難點(diǎn)在于獲取后端數(shù)據(jù)并且防止數(shù)據(jù)聯(lián)動(dòng)。

二、技術(shù)詳述

1. 從接口獲取后端數(shù)據(jù)

(1) 仔細(xì)查看后端所傳數(shù)據(jù)的類(lèi)型。主要是區(qū)分?jǐn)?shù)組和單個(gè)數(shù)據(jù)。查看后端的請(qǐng)求方式，區(qū)分post或者get。

(2) 首先，在data中return一個(gè)xxxData:[]數(shù)組或一個(gè)變量xxxData:<類(lèi)型>來(lái)接收后端傳來(lái)的數(shù)據(jù)。

(3) 在方法中定義一個(gè)請(qǐng)求函數(shù)，比如我們這里函數(shù)名定義為update。請(qǐng)求函數(shù)中最主要的為請(qǐng)求語(yǔ)句通過(guò)api獲取后端數(shù)據(jù)。

{params:this.xxx}中填寫(xiě)的是所攜帶的參數(shù)。

當(dāng)get時(shí)，params作為一個(gè)關(guān)鍵字，總領(lǐng)所有攜帶參數(shù)的傳遞，例如傳遞參數(shù)的名字為id，值為data中已聲明的值myId，那么在get請(qǐng)求語(yǔ)句中可以寫(xiě)成：

update(){
      this.$http.get(baseURL+`api/條件`,{params:{id:this.myId}}).then(function(res){
        this.memberData = res.body;
     });
},

當(dāng)post時(shí)，可以不加params關(guān)鍵字。直接寫(xiě)成：

update(){
      this.$http.get(baseURL+`api/條件`,{id:this.myId}).then(function(res){
        this.memberData = res.body;
     });
},

返回的參數(shù)在then之后的匿名函數(shù)里。

這里baseURL是項(xiàng)目的路徑，如果項(xiàng)目部署在服務(wù)器上面一般格式為www.XXX.com/項(xiàng)目名，之后的api是后端封裝的api接口。

api/條件這個(gè)條件中往往會(huì)出現(xiàn)前端定義的變量，在傳值時(shí)若將其直接寫(xiě)入便會(huì)成為接口地址的一部分。要想讓其代表它內(nèi)在的值，則使用${}取值。例如：

console.info(`大家好，我叫${name}，今年${age}歲了`)
// 等價(jià)于
console.info('大家好，我叫' + name + '，今年' + age + '歲了')

(4) 此時(shí)這個(gè)請(qǐng)求操作是沒(méi)有調(diào)用，是默認(rèn)執(zhí)行的，所以要在mounted里面實(shí)時(shí)執(zhí)行。

整體代碼呈現(xiàn)例如：

<script>
    export default {
        data(){
            memberData[],//等待存放后端數(shù)據(jù)的接收數(shù)組
        },
        mounted(){
            this.update();//在html加載完成后進(jìn)行，相當(dāng)于在頁(yè)面上同步顯示后端數(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){//請(qǐng)求成功，可以根據(jù)不同的狀態(tài)碼返回值做出相應(yīng)的動(dòng)作
                        this.memberData = doc.data.data.member//本數(shù)組存入后端數(shù)
                      }			
                  })
            },
        },
    };
</script>

在以上例子中，doc接收返回的參數(shù)，以doc.data開(kāi)頭獲取。其中后端傳送的數(shù)據(jù)又具有data結(jié)構(gòu)，所以又再次.data，深入再次獲取其中的member數(shù)據(jù)。

注意：在我剛開(kāi)始學(xué)習(xí)獲取數(shù)據(jù)的時(shí)候，將請(qǐng)求URL錯(cuò)用單引號(hào)（'）引用。這里是使用反單引號(hào)（`）。

在使用vue編程中，組件里面綁定的事件如果有傳入事件名稱(chēng)字符串/字符串參數(shù)，這個(gè)時(shí)候光用單雙引號(hào)會(huì)出現(xiàn)string is undefined，這個(gè)時(shí)候我們就需要用到反單引號(hào)。

對(duì)比后端項(xiàng)目文檔：

2. 前端向后端傳值的交互

前端向后端傳值和之前提到的攜帶參數(shù)的概念一樣，是同樣的方法。但是不同點(diǎn)在于這是以前端向后端傳參為主的交互，所以攜帶參數(shù)很多的情況下，容易造成代碼過(guò)長(zhǎng)，閱讀書(shū)寫(xiě)繁瑣的問(wèn)題。這就可以建立中間變量結(jié)構(gòu)，統(tǒng)一傳值，這時(shí)攜帶參數(shù)只需要填寫(xiě)一個(gè)。例如：

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ù)后自動(dòng)刷新前端，隨著更改外觀
			}
    		else{
					this.$alert(msg,'false')
			}
	});

3. 顯示獲取到的數(shù)據(jù)

相對(duì)于獲取數(shù)據(jù)而言，顯示數(shù)據(jù)就顯得簡(jiǎn)單許多了。

首先后端傳來(lái)的數(shù)據(jù)肯定是很多層結(jié)構(gòu)或者是一個(gè)集合，所以在用一個(gè)大數(shù)組接受后臺(tái)數(shù)據(jù)的同時(shí)，在data return中要聲明幾個(gè)自己需要顯示的具體的變量，后臺(tái)數(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ù)要注意寫(xiě)法${}
        {params:{project_id:this.$store.state.project.id,task_id:this.messageId}})
        .then(doc=>{
            if(doc.data.data){//當(dāng)有數(shù)據(jù)傳來(lái)時(shí)才可獲取。若是為空，則在傳來(lái)的data下再次.xxx尋找結(jié)構(gòu)中的子變量則會(huì)出錯(cuò)。
                this.taskData=doc.data.data;//所謂的整體大數(shù)組，包含了所有傳來(lái)的數(shù)據(jù)
                this.defaultChecked=this.taskData.finish;//細(xì)分傳來(lái)的數(shù)據(jù)結(jié)構(gòu)并放入已聲明過(guò)的變量
                this.taskRemarks=this.taskData.remarks;   
            }                  
            else
                this.taskData=null;
            }).catch(err=>{//處理錯(cuò)誤的寫(xiě)法
           		this.$alert("未知錯(cuò)誤", "false");  //服務(wù)器還沒(méi)搭起來(lái)
  		 })                
},

在第一次接觸接收數(shù)據(jù)時(shí)我就有個(gè)疑問(wèn)，一直不知道類(lèi)似于這樣的“子數(shù)據(jù)”怎么獲取：

獲得了具體的數(shù)據(jù)之后，想要顯示在html里。一般來(lái)說(shuō)，將變量或者其代表的信息顯示在網(wǎng)頁(yè)上大多是插入在html標(biāo)簽中，變量作為屬性值就要使用v-bind來(lái)實(shí)現(xiàn)。v-bind就是用于綁定數(shù)據(jù)和元素屬性的。例如：

<a href="myHome.com" rel="external nofollow" >OK</a>

想要實(shí)時(shí)更新href屬性值則需要綁定自定義的變量上去，而在雙引號(hào)中的變量都會(huì)被當(dāng)作字符串。這時(shí)我們需要用v-bind實(shí)現(xiàn)。綁定之后，對(duì)應(yīng)的值要去vue的數(shù)據(jù)里面找。當(dāng)我們?cè)诳刂婆_(tái)改變url時(shí)，對(duì)應(yīng)也會(huì)變化。相同的，我們還可以綁定圖片src屬性、class屬性。

//這里url是在data中return的自定義變量，存儲(chǔ)鏈接字符串
//url:"MyHome.com",
<a v-bind:href="url" rel="external nofollow"  rel="external nofollow" >OK</a>
//簡(jiǎn)寫(xiě)為（我簡(jiǎn)記為在需要變量名作為屬性的時(shí)候，在屬性前加冒號(hào)）
<a :href="url" rel="external nofollow"  rel="external nofollow" >OK</a>

我在剛開(kāi)始想實(shí)時(shí)變化頁(yè)面顯示數(shù)據(jù)的時(shí)候，即根據(jù)后端傳來(lái)的數(shù)據(jù)更改頁(yè)面顯示標(biāo)簽屬性的時(shí)候，錯(cuò)誤使用dom控制元素顯示。因?yàn)橹皼](méi)有接觸過(guò)Vue，所以我對(duì)于界面元素的更改的意識(shí)停留在     “document.getElementById('xxx').<屬性>=xxx”  的階段，這樣做起來(lái)代碼很繁瑣，效率也低，增加了代碼的耦合性。

4. 防止數(shù)據(jù)聯(lián)動(dòng)

在任務(wù)面板的模塊，為要根據(jù)不同的點(diǎn)擊顯示不同的任務(wù)詳情就要傳遞每個(gè)任務(wù)唯一的id。而在顯示詳情后有更改信息的功能，在這隨意的更改可能會(huì)影響其他任務(wù)的信息，造成信息錯(cuò)亂。主要原因是剛開(kāi)始我們監(jiān)聽(tīng)了所有組件的更改，例如這段代碼在更改任務(wù)緊急程度的時(shí)候調(diào)用：

onFlowPri(pri){
			this.taskpriority = pri
			this.$http
         .post(`/api/project/${this.$store.state.project.id}/task/update`, {//當(dāng)緊急程度一變化的時(shí)候就向后端傳輸數(shù)據(jù)，僅一項(xiàng)變化，更改的卻是全部數(shù)據(jù)，這時(shí)傳輸其他舊數(shù)據(jù)就會(huì)遇到問(wèn)題
				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')
				}
         });
},

而在用戶(hù)是否保存不得而知的時(shí)候太早的傳輸更改數(shù)據(jù)，積極的監(jiān)聽(tīng)會(huì)造成錯(cuò)誤。增加了代碼的繁瑣程度。尤其是和用戶(hù)交互的數(shù)據(jù)足夠多的時(shí)，會(huì)造成混亂。好的方式應(yīng)在用戶(hù)選擇確認(rèn)保存后再將整體表格中要求填寫(xiě)的數(shù)據(jù)移交給后端，這樣一次性的傳輸保證了數(shù)據(jù)的準(zhǔn)確性。

三、技術(shù)問(wèn)題

1. 界面自動(dòng)刷新

問(wèn)題描述：在用戶(hù)改變某些功能性質(zhì)時(shí)，界面所表現(xiàn)出來(lái)的數(shù)據(jù)或者組件不能實(shí)時(shí)變化，即需要用戶(hù)手動(dòng)刷新整個(gè)頁(yè)面。

解決方法：首先界面的加載是要靠mounted方法中定義的獲取后臺(tái)數(shù)據(jù)的方法（在這里一般將該方法命名為update）顯示。作為鉤子函數(shù)，它向后端請(qǐng)求，拿回?cái)?shù)據(jù)，配合路由器鉤子做一些事情。主要是依靠api拿數(shù)據(jù) ，在mounted和改變的時(shí)候直接調(diào)用update就可以。即在用戶(hù)點(diǎn)擊事件發(fā)生之后在相應(yīng)事件的位置調(diào)用update重新從后臺(tái)獲取新數(shù)據(jù)。

2. 獲取數(shù)據(jù)數(shù)組出錯(cuò)

問(wèn)題描述：后端傳入前端的是一個(gè)數(shù)組，前端接收到自己的數(shù)組之后，二次使用push新的元素進(jìn)入時(shí)報(bào)錯(cuò)。

問(wèn)題表面看起來(lái)很簡(jiǎn)單找出原因，是因?yàn)槲宜鵳ush的數(shù)組不被承認(rèn)為數(shù)組。但是我反復(fù)檢查過(guò)確實(shí)在data中接收數(shù)據(jù)類(lèi)型被聲明為數(shù)組。這個(gè)報(bào)錯(cuò)也找不到具體的位置，它報(bào)錯(cuò)全是從runtime運(yùn)行時(shí)緩存讀的，一個(gè)源文件都沒(méi)映射到。是個(gè)玄學(xué)問(wèn)題。

解決方法：選定項(xiàng)目。就是這么簡(jiǎn)單。我們的產(chǎn)品是要通過(guò)選擇項(xiàng)目來(lái)向后臺(tái)傳送數(shù)據(jù)的，即項(xiàng)目ID。所以在報(bào)錯(cuò)信息不明確的時(shí)候要嘗試發(fā)現(xiàn)有無(wú)信息沒(méi)讀到的問(wèn)題。

3. 傳值顯示值（針對(duì)時(shí)間）

問(wèn)題描述：前后端數(shù)據(jù)交互中比較繞的問(wèn)題就是時(shí)間作為DateTime類(lèi)型傳值的時(shí)候的數(shù)據(jù)類(lèi)型轉(zhuǎn)換。以及在使用時(shí)間選擇器的時(shí)候?qū)⒔M件中的時(shí)間顯示為所傳值的時(shí)間。

如圖設(shè)置時(shí)間位置所顯示的時(shí)間是錯(cuò)誤的，而控制臺(tái)輸出的是從后臺(tái)傳入的正確時(shí)間。即時(shí)間無(wú)法實(shí)時(shí)在時(shí)間選擇框中顯示。

從設(shè)置時(shí)間等時(shí)間選擇框中更改時(shí)間并把其傳入到后端時(shí)，會(huì)有類(lèi)型不匹配的問(wèn)題。即String和DateTime的轉(zhuǎn)換。

解決方法：在時(shí)間選擇器的屬性中加入:value屬性并以moment約束要顯示的時(shí)間變量例如：

 :value="[moment(taskDetails.t_begin), moment(taskDetails.t_end)]"

時(shí)間格式化組件moment的使用：需要在script中導(dǎo)入組件，并在methods中聲明moment。

<script>import moment from 'moment'</script>

若要將時(shí)間數(shù)據(jù)傳回后端的話(huà)需要將String類(lèi)型的數(shù)據(jù)轉(zhuǎn)換，即需要聲明定義一個(gè)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;
}

在傳值的時(shí)候直接規(guī)范化。

以上是“Vue前后端數(shù)據(jù)交互與顯示的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！