前端Vue接受数据：前后端分离_vue 前后端分离多个list取值-优快云博客

本文探讨了在前端Vue应用中如何接收数据，主要关注使用axios库进行API调用。通过GET和POST方法，说明axios在处理数据请求时的不同参数配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端VUE接收数据
一般采用的方式

data（）{
retrun{
	list:[]	******定义数据
}}

  created() { // 当程序运行的时候调用以下方法
    this.load()
  }

查询调用方法

 load(){
      this.$axios.get("http://localhost:8080/BaseTable/currentPage",{params: {
          currentPage: this.currentPage,
          pageSize: this.pageSize
          }}
        ).then((res) =>{
        this.list = res.data.data;
        this.totaldata = res.data.total_data;
      } );
    },
    query(){
      this.$axios.get("http://localhost:8080/BaseTable/query",{params: {
          ListSearch: this.ListSearch
        }}).then(result => {
          this.list = result.data.data
      })
    }

其中axios中的post和get调用参数方法不一致
get中

// 直接在 URL 上添加参数 ID=12345
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 
// 也可以通过 params 设置参数：
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post中

axios.post('/user', {
    firstName: 'Fred',        // 参数 firstName
    lastName: 'Flintstone'    // 参数 lastName
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });