vue用axios从后台获取数据_axios如何从后台controller中取值-优快云博客

本文链接：https://blog.youkuaiyun.com/qq5678574/article/details/110533798

本文详细介绍了如何在Vue项目中利用axios从后台获取数据的步骤，包括安装axios、在main.js中引入、设置接口地址、在组件中定义方法、页面定义及数据初始化，并在created钩子中调用方法，展示了实际效果。

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

1.安装axios

npm install --save axios vue-axios

2.在main.js中引入

import axios from 'axios'
Vue.prototype.axios = axios;
// 将axios挂载到prototype上，在组件中可以直接使用this.axios访问

3.在main.js中引入接口地址

Vue.prototype.serverURL = 'http://10.3.12.34:8081';

4.在对应需要的组件中的methods中定义一个方法

   getSchool() {
      let that = this;
      let url = that.serverURL + '/operation/salesIssueBank/getList?type=2';

      let params  = {};

      that.axios.get(url, {
        params:params
      }).then(
        function (response) {
   
          if (response.data.total > 0 && response.data.rows.length > 0) {
			//这里是做了一个数据格式的转换，要符合后台接口写的格式
            let records = response.data.rows;
            for(let i=0;i<records.length;i++){
              let obj={};
              obj.value=records[i].id;
              obj.label=records[i].name;
              obj.children=[];
             // let arr =[];
              for(let j=0;j<records[i].children.length;j++){
                let obj1={};
                obj1.value=records[i].children[j].id;
                obj1.label=records[i].children[j].name;
                obj.children.push(obj1);
              }
              //格式转换结束
              that.school.push(obj);//school就是页面上定义的参数
            }
            console.log(that.school)
          }else{
            Toast({
              content: response.data.msg,
              duration: 3500,
            });
            that.itemList = [];
            that.isFinished = true;
          }
        }).catch(function (err) {
        Toast({
          content: '服务器无响应，请重试！',
          duration: 2500,
        });
      });
    },