vue獲取后臺json字符串的方式是什么

這篇文章主要講解了“vue獲取后臺json字符串的方式是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vue獲取后臺json字符串的方式是什么”吧！

vue獲取后臺json字符串

1.在api文件下的driver.js文件下寫一個獲取json的函數

export const tree = () => request({
  url: 'driver/tree',
  method: 'post',
 
})

2.在view文件下的driver文件下的index.vue文件里引入driver.js文件下的tree函數

import Tree, { tree } from  '@/api/driver'

3.在生命周期函數created鉤子下在頁面渲染初始過程獲取json，獲取通過箭頭函數，同時注意json格式，如果后臺傳來的是字符串，要通過函數將其轉換成對象類型。

created(){
     tree().then((str) =>{
          console.log(111111);  // 觸發生命周期函數
         // console.log(str);
    //后臺給的是字符串，轉換成對象類型
       let obj = JSON.parse(str);
       //把json字符串傳遞到data數據，進而到頁面渲染
       this.data = obj;
      // console.log(obj);
       console.log(obj[0].id); //查看第一層級下的id值
}

4.最后要注意在data數據中對json初始值進行格式設置，以及初始值賦值。

 data() {
      return {
        data: 
        //先給data對象為空
        [
          {},{},{}
        ],
        //樹形控件需要配置的默認信息，與json匹配
        defaultProps: {
          children: 'childs',
          label: 'name',    
        }
        
      };

5.要控制臺查看本層的對象，需要 用[]中括號指定層級

 console.log(obj[0].id); //查看第一層級下的id值

Vue字符串與Json轉換

字符串與數組之間的相互轉換

1.字符串轉換為數組

str.split(','); // 以逗號,為拆分的字符串

2.數組轉換為字符串

arr.join(','); // 把數組項拼接成字符串，以逗號,分隔

Json字符串轉換為json對象

1.使用eval

result = eval('(' + jsonstr + ')'); // jsonstr是json字符串

2.使用JSON.parse()

result = JSON.parse(jsonstr); // jsonstr是json字符串

eval和JSON.parse的區別：

eval 是javascript支持的方式，不需要嚴格的json格式的數據也可以轉化

JSON.parse 是瀏覽器支持的轉換方式，必須要標準的json格式才可以轉換

感謝各位的閱讀，以上就是“vue獲取后臺json字符串的方式是什么”的內容了，經過本文的學習后，相信大家對vue獲取后臺json字符串的方式是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！