vue调用后端接口样例

1、vue调用后端接口，并展示在前端列表中

前端列表中需要的数据为tableData：

此处访问后端接口获取此处的数据

前提构造tableData数据，次数据结构为数组：

从后端获取到数据后，要进行多个数据遍历的话，则使用foreach

进行数据的遍历，及通过push方法传入tableData中

data.forEach(element => {

            this.tableData.push(

                {

                    name:element.first_name,

                    date:element.last_login,

                    address:element.avatar

                }

            );

        });

 

2、灵魂一笔在于自动调用此函数刷新列表数据：

mounted() {

    this.GetUserInfo()

  },

此方法用于调用这个获取后台数据的方法，否则无法触发api接口的调用