<template>
  <div id="areaTree">
   <!-- 標(biāo)題 -->
   <div class="leftTree_Title">
    <el-row>    
     <el-col :span="24">{{msg}}</el-col>
    </el-row>
   </div>
  </div>
</template>

<script>
import axios from 'axios'

export default { 
  name: "test",
  data:function(){ 
    return{ 
      msg:'站點選擇',
    }
  },
  methods:{ 
  },
  computed:{
  },
  //--------------Vue生命周期---具體細節(jié)參考：https://www.cnblogs.com/yingyigongzi/p/10844175.html ---------------
  beforeCreate(){
  },
    
  created(){ 
  },
  beforeMount(){
  },
  mounted(){  //理解成初始化，該操作只會執(zhí)行一次 
    axios.get('/GetTreeListForSoilByRegion',{  //從接口讀取數(shù)據(jù)
    params: {
     //參數(shù)
    } 
   })
   .then(function (response) {
　　　　　　//代碼操作
   })
   .catch(function (error) {
    console.log(error);
   });
  },
  beforeUpdate(){
  },
  updated(){
  }, 
  beforeDestroy(){
  },
  destroyed(){
  },
  //--------------Vue生命周期---具體細節(jié)參考：https://www.cnblogs.com/yingyigongzi/p/10844175.html ---------------
} 
</script>

<style scoped></style>

import axios from 'axios'
 
//創(chuàng)建axios的一個實例
var instance = axios.create({
  baseURL:'',
  timeout: 6000
})
 
 
//------------------- 一、請求攔截器 忽略
instance.interceptors.request.use(function (config) {
 
  return config;
}, function (error) {
  // 對請求錯誤做些什么
   
  return Promise.reject(error);
});
 
//----------------- 二、響應(yīng)攔截器 忽略
instance.interceptors.response.use(function (response) {
   
  return response.data;
}, function (error) {
  // 對響應(yīng)錯誤做點什么
  console.log('攔截器報錯');
  return Promise.reject(error);
});
 
/**
 * 使用es6的export default導(dǎo)出了一個函數(shù)，導(dǎo)出的函數(shù)代替axios去幫我們請求數(shù)據(jù)，
 * 函數(shù)的參數(shù)及返回值如下：
 * @param {String} method 請求的方法：get、post、delete、put
 * @param {String} url   請求的url:
 * @param {Object} data  請求的參數(shù)
 * @returns {Promise}   返回一個promise對象，其實就相當(dāng)于axios請求數(shù)據(jù)的返回值
 */
export default function (method, url, data = null) {
  method = method.toLowerCase();
  if (method == 'post') {
    return instance.post(url, data)
  } else if (method == 'get') {
    return instance.get(url, { params: data })
  } else if (method == 'delete') {
    return instance.delete(url, { params: data })
  }else if(method == 'put'){
    return instance.put(url,data)
  }else{
    console.error('未知的method'+method)
    return false
  }
}
 

//navigationTree.js 用于獲取導(dǎo)航樹的樹形json數(shù)據(jù)

import req from './http.js'  //引入封裝好的axios

//在這里定義了一個登陸的接口，把登陸的接口暴露出去給組件使用
export const GETTREEDATA =params=>req('get','/GetTreeListForSoilByRegion',params)
//這里使用了箭頭函數(shù)，轉(zhuǎn)換一下寫法：
//export const GETTREEDATA=function(req){
//  return req('post','/GetTreeListForSoilByRegion',params)
//}

<template>
  <div id="areaTree"><br>    
  <!-- 標(biāo)題 --><br>    
  <div class="leftTree_Title"><br>    
  <el-row> <br>      
  <el-col :span="24">{{msg}}</el-col> <br>    
  </el-row> <br>    
  </div> <br>  
  </div>
</template>
 
<script>
 
//1. 引入獲取樹結(jié)構(gòu)的接口定義
import {GETTREEDATA} from '../apis/navigationTree.js'
 
let treeTemp =[];
export default {
  name: "zTree",
  data:function(){
    return{
      msg:'站點選擇',
    }
  },
  methods:{
  },
  computed:{
  },

  beforeCreate(){
  },
  created(){   
  },
  beforeMount(){
  },
  mounted(){  //理解成初始化，該操作只會執(zhí)行一次
 
    let testdata = GETTREEDATA();  //vue項目接口管理,所有接口都在apis文件夾中統(tǒng)一管理
    testdata
    .then(function(response){
     //console.log(response);
 
    }).catch(function(error){
      console.log(error);
    });
 
  },
  beforeUpdate(){
  },
  updated(){
  },
  beforeDestroy(){ 
  },
  destroyed(){
  },

}
</script>
 
<style scoped>
</style>