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

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

vue獲取后臺json字符串

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

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

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

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

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

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

4.最后要注意在data數(shù)據(jù)中對json初始值進(jìn)行格式設(shè)置，以及初始值賦值。

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

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

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

Vue字符串與Json轉(zhuǎn)換

字符串與數(shù)組之間的相互轉(zhuǎn)換

1.字符串轉(zhuǎn)換為數(shù)組

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

2.數(shù)組轉(zhuǎn)換為字符串

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

Json字符串轉(zhuǎn)換為json對象

1.使用eval

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

2.使用JSON.parse()

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

eval和JSON.parse的區(qū)別：

eval 是javascript支持的方式，不需要嚴(yán)格的json格式的數(shù)據(jù)也可以轉(zhuǎn)化

JSON.parse 是瀏覽器支持的轉(zhuǎn)換方式，必須要標(biāo)準(zhǔn)的json格式才可以轉(zhuǎn)換

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