Vue-初试水(三)

1、vue调用后端接口,并展示在前端列表中
前端列表中需要的数据为tableData:
Vue-初试水(三)_第1张图片

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

前提构造tableData数据,次数据结构为数组:

Vue-初试水(三)_第2张图片

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

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

data.forEach(element => {

        this.tableData.push(

            {

                name:element.first_name,

                date:element.last_login,

                address:element.avatar

            }

        );

    });

Vue-初试水(三)_第3张图片

2、灵魂一笔在于自动调用此函数刷新列表数据:
mounted() {

this.GetUserInfo()

},
image.png
此方法用于调用这个获取后台数据的方法,否则无法触发api接口的调用

你可能感兴趣的:(vue.js后端html5)