# **使用Google Sheet建立小資料庫去串接資料** ### 1. 建立表單 ![](https://i.imgur.com/go9kikS.png) ### 2. 點選 "檔案" 後選擇 "發佈到網路" ![](https://i.imgur.com/XoZoYGM.png) ### 3. 選擇需要轉換的工作表並選擇 "整份文件"、"網頁" ![](https://i.imgur.com/QNJIq7j.png) ### 4. 點選發布之後，選擇"共用"並取得連結 ![](https://i.imgur.com/Z7d16eU.png) ### 5. 取得Google API Key 因為2021年8月的更新，需增加金鑰，詳情可至此網頁教學 https://www.letswrite.tw/google-excel-db/ ### 6. 更改串接網址 接下來只要更改要串接的 AJAX 網址： ``` https://sheets.googleapis.com/v4/spreadsheets/{表單的id}/values/{工作表名稱}?alt=json&key={API金鑰} ``` **需要更改的內容說明：** * **{表單的id}：在第四點中"共用"取得的連結中的一部分** "共用"取得的連結的結構 https://docs.google.com/spreadsheets/d/{表單的id}/edit#gid=0 以此表單的"共用"連結為例： https://docs.google.com/spreadsheets/d/1XfY7wWkei4GL6txkLKXdwX11Lj8gHiWIoCnMPjo45Ls/edit#gid=0 "1XfY7wWkei4GL6txkLKXdwX11Lj8gHiWIoCnMPjo45Ls"為此表單的id * **{工作表名稱}：表單預設為「工作表1」，可以自己做更改** * **{API金鑰}：就是第五點中取得的金鑰** ### 7. 串接 ``` <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.1/papaparse.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script> </head> <body> <div id="getdata"> <h1>抓取資料</h1> <input type="button" value="點擊取得資料" v-on:click="getdata()"> </div> </body> <script> var vm_get_data = new Vue({ el:"#getdata", data:{ priceData:[] }, methods:{ getdata(){ axios .get("https://sheets.googleapis.com/v4/spreadsheets/{表單的id}/values/{工作表名稱}?alt=json&key={API金鑰}") .then(i => this.priceData = i.data) .then(i => console.log(this.priceData.values)) } } }) </script> </html> ``` 以上為範例(串接網址需更改)，輸出結果如下圖： ![](https://i.imgur.com/g8Dhpjw.png) 之後再自己修改樣式就能變成美美的~ ![](https://i.imgur.com/zbagzhD.jpg)