创建前端Vue 项目

Vue2 创建过程参考本人博客

https://blog.csdn.net/qq_21344887/article/details/116256535

创建成功后，安装element 和 axios 插件。

修改App.vue

<template>
  <div id="app">
   <router-view/>
  </div>
</template>
//省略

新建Table.Vue

<template>
  <div>

    <el-button type="success" v-on:click="getData">获取数据</el-button>

    <el-table
        :data="datas"
        style="width: 100%">
      <el-table-column
          prop="id"
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="180">
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
export default {
  name: "Test",
  data(){
    return{

      datas:[
        {
          id:1,
          name:'张三',
          age:22
        },
        {
          id:2,
          name:'李四',
          age:21
        },
        {
          id:3,
          name:'王五',
          age:23
        }
      ]
    }
  },
  methods:{
    getData(){
      //调后端接口
      let _this = this    //这里的this 是全局this
      axios.get('http://localhost:8082/user/list').then(function (response) {
          //这里如果使用this 是回调函数的this
        _this.datas = response.data
      })
    }
  }
}
</script>

<style scoped>

</style>

引入 在router/index.js 中引入Test.vue的路由

启动项目访问： http://localhost:8080/test

点击获取数据：获取到后端接口 http://localhost:8082/user/list 返回的数据
后端项目这里使用Node 简单搭建一下
参考博客https://zhaideyou.blog.csdn.net/article/details/126322931

年龄发生了改变。