搜尋

  1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 利用Vue Axios 讀取 Google試算表中的資訊,並將資料套入指定的區塊中顯示

利用Vue Axios 讀取 Google試算表中的資訊,並將資料套入指定的區塊中顯示

2021/05/31

梅問題-利用Vue Axios 讀取 Google試算表中的資訊,並將資料套用到指定的區塊中顯示
  上星期梅干則分享了,透過PHP的方式,來讀取 Google Sheet 試算表中 json 格式,並一一的解析再將Google試算表中的資料,塞到指定的區塊中,由於是透過PHP的方式,因此當資料全部都套入指定的區塊後,網頁才會被輸出來,而這時Google Sheet試算表,就如同一個資料庫的功能,日後當有資料要更新時,則只需修改Google試算表中的資料,網頁立即就會同步更新,相當的方便。

由於Google試算表所提供的是json格式,因此無論是使用前後端都可進行資料的解析,而接下來梅干就來示範一下,如何透過前端的方式,讀取Google試算表中的json格式解析後,再套入到區塊中,本來梅干打算用jQuery的,但想說最近剛學了VUE,正好用VUE來試試看,因此接下來就用VUE的方式,來讀取Google試算表中的json格式,並套到網頁中。


Step1
由於VUE本身無法直接讀取json,因此得透過axios這套件,所以分別先將vue與axios的js給引用到網頁中。 放到</body>前:
Step1
Google試算表的json網址。
https://spreadsheets.google.com/feeds/list/KEY/SHEET INDEX/public/values?alt=json
梅問題-利用Vue Axios 讀取 Google試算表中的資訊,並將資料套用到指定的區塊中顯示
Step2
接著再get的地方,放入Google試算表中的json網址,完成後開啟瀏覽器預覽,並在網頁開發人員工具中,的Network頁籤下的Preview, 就可詳盡看到json樹狀圖。
new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      h1: null,
      img: null,
      money: null,
      link: null
    }
  },
  mounted () {
    axios    .get('https://spreadsheets.google.com/feeds/list/11b9VsYo8DRZ8j5uDT64d6PfmWHGaW5nE9qVwo-wGnbs/1/public/values?alt=json');
  }
});
梅問題-利用Vue Axios 讀取 Google試算表中的資訊,並將資料套用到指定的區塊中顯示
Step3
接著再加入.then並將剛剛的json格式,依照層級,正確的選取後,就可抓取到第0筆的資料啦!
mounted () {
    axios
      .get('https://spreadsheets.google.com/feeds/list/11b9VsYo8DRZ8j5uDT64d6PfmWHGaW5nE9qVwo-wGnbs/1/public/values?alt=json&#39;)
      .then(response =>{
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][0]['gsx$_cokwr']['$t']);
      });

  }
梅問題-利用Vue Axios 讀取 Google試算表中的資訊,並將資料套用到指定的區塊中顯示
Step4
就這樣依續的將Google試算表中的資料一一抓取出來。
.then(response =>{
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][0]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][1]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][2]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][3]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][4]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][5]['gsx$_cokwr']['$t']);
        console.log(JSON.parse(JSON.stringify(response.data))['feed']['entry'][6]['gsx$_cokwr']['$t']);
      }
梅問題-利用Vue Axios 讀取 Google試算表中的資訊,並將資料套用到指定的區塊中顯示
Step5
抓取後,再將它一一的塞回到網頁的區塊中,這樣就大功成啦!因此不熟悉PHP的朋友,不妨也可試試用前端的語言VUE來抓取囉!
梅問題-利用Vue Axios 讀取 Google試算表中的資訊,並將資料套用到指定的區塊中顯示
#範例預覽:


精選文章

友好網站  樂活大方 | 男丁格爾

回應本文