Vue前后端数据交互与显示

一、技术概述

将后端所计算的数据呈现在前端页面的相应位置并根据用户点击操作改变相应的数据和界面，再传值给后端。该技术是Web开发必备，是前后端交互的纽带。难点在于获取后端数据并且防止数据联动。

二、 技术详述

1. 从接口获取后端数据

(1) 仔细查看后端所传数据的类型。主要是区分数组和单个数据。查看后端的请求方式，区分post或者get。

(2) 首先，在data中return一个xxxData:[]数组或一个变量xxxData:来接收后端传来的数据。

(3) 在方法中定义一个请求函数，比如我们这里函数名定义为update。请求函数中最主要的为请求语句通过api获取后端数据。

{params:this.xxx}中填写的是所携带的参数。

当get时，params作为一个关键字，总领所有携带参数的传递，例如传递参数的名字为id，值为data中已声明的值myId，那么在get请求语句中可以写成：

update(){

this.$http.get(baseURL+`api/条件`,{params:{id:this.myId}}).then(function(res){

this.memberData = res.body;

});

},

当post时，可以不加params关键字。直接写成：

update(){

this.$http.get(baseURL+`api,{id:this.myId}).then(function(res){

this.memberData = res.body;

});

},

返回的参数在then之后的匿名函数里。

这里baseURL是项目的路径，如果项目部署在服务器上面一般格式为www.XXX.com/项目名，之后的api是后端封装的api接口。

api/条件这个条件中往往会出现前端定义的变量，在传值时若将其直接写入便会成为接口地址的一部分。要想让其代表它内在的值，则使用${}取值。例如：

console.info(`大家好，我叫${name}，今年${age}岁了`)

(4) 此时这个请求操作是没有调用，是默认执行的，所以要在mounted里面实时执行。

整体代码呈现例如：

export default {

data(){

memberData[],//等待存放后端数据的接收数组

},

mounted(){

this.update();//在html加载完成后进行，相当于在页面上同步显示后端数据

},

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){//请求成功，可以根据不同的状态码返回值做出相应的动作

this.memberData = doc.data.data.member//本数组存入后端数

}

})

},

},

};