文章開頭就讓我們用安妮亞的笑容慶祝完賽吧!!!!!!!!!!!!
終於順利熬到完結篇!!!!!!!!!!!!
今年是第三度參賽，
說實在的，到現在完賽了我完全不曉得為什麼自己要參賽orz
老實說這次系列文的題目一直訂不出來，
只知道自己想寫今年跟後端的這段緣份(?)，
直到 8/14 那天我看到 眼球中央電視台 的影片，
(對你沒看錯，不是間諜家家酒而是眼球中央電視台wwwww)
看到主播眼肉芽說出：
「發現黨內有SPY，這種真人版的間諜家家酒，真是讓人哇哭哇哭」
整個笑瘋wwwwwwwwww
因此也給我這次參賽題目的靈感，
在此感謝主播眼肉芽m(_ _)m
(應該要感謝 SPYxFAMILY 才對吧wwwwwww)
(也為了向眼肉芽致敬，參賽用的是中文空耳的哇哭哇哭，而不是日文的 わくわくXD)
點這邊看原片↓ (從 08:55 處開始看即可XD)
題目雖然是訂出來了，
但是內容真的不知道要寫些什麼，
其實我真正想寫的只有第10天~第14天的內容XDDDDD
可是這畢竟是連續30天寫文的鐵人賽挑戰...好吧，只好來瞎掰了
還是來做個 summary XD
今年這個系列文的標題是：
SPYxFRONTEND ～ 懂一點後端真是讓人哇哭哇哭
如同這個系列文的介紹所說，
去年的鐵人賽接觸了 React，
那時候的我以為這樣對前端就算是有一定程度的了解XD
殊不知，那一天前端終於回想起了，曾經一度被 API 所支配的恐怖
前端不是只有刻靜態畫面RRRRR
今年開始碰 axios，學 call API 進行資料的 CRUD，
才深深覺得前端的世界很大很寬廣(?)
我學 call API 居然是以 axios.delete 為起手式XDDDDD
如同第一天文章所說，
我快嚇死超怕自己一個 call 個不好把資料刪光光Q口Q
所以才會自己跑去找怎麼自己起 API 的方法，
然後試著 call API 看看。
這個系列文雖然一度難產，
但重新回過頭來看，
我覺得還是有脈絡在的，
Phase 1 - 從純前端到開始接觸 API，第一步果然要從 GET 開始吧 (Day2-10)
Phase 2 - 學會用 axios 進行資料的 CRUD (Day11-20)
Phase 3 - 關於前端後端的愛恨糾葛，互利共生互助合作才是對的 (Day21-29)
下面讓我們一起回顧一下這個系列文的軌跡吧！
[Day2] 在遇見後端以前，先來認識一下 Chakra UI 吧～（上篇）
[Day3] 在遇見後端以前，先來認識一下 Chakra UI 吧～（下篇）
在正式接觸 API 之前，
還是先介紹了一下新接觸的前端框架套件 Chakra UI，
這個套件真的不得不大力介紹啊！
可以自訂色碼、自訂文字大小、自訂寬高.....
完全解決了 Bootstrap 的硬傷XD
[Day4] 用前端角度來聊聊～ 後端對前端來說是怎樣的存在？
[Day5] 巧婦難為無米之炊～ 第一步就先從取得資料開始吧！之 變數篇
[Day6] 巧婦難為無米之炊～ 第一步就先從取得資料開始吧！之 import 篇
再來用取得資料做切入，
透過這樣的流程： 1.變數 > 2.import檔案 > 3. call API，
一步一步由簡入深，從變數到import檔案，
再引導到 call API 取得資料。
[Day7] 來到 call API 的第一道門 ～ AJAX - XMLHttpRequest 篇
[Day8] 用 fetch 拿資料好愜意
[Day9] 來認識 axios 吧！之「既生 fetch，何生 axios？」
[Day10] 可以 call 一次 API 就解決的事，你為什麼要 call 很多次呢？來用用 useSWR 吧！
而 call API 取得資料也有很多方式，
舉凡 XHR、fetch、axios，甚至是用 React hook useSWR，
每個 call API 的方式都各有千秋，
都要嘗試一下。
對一個只刻過靜態畫面的前端新手，
請不要一開始就叫他 call axios.delete XD
第一步還是乖乖從拿資料開始XD
[Day11] 前端也可以自己開 API！讓你了解後端的好幫手～ JSON Server
[Day12] 用 axios.post 可以任意新增資料？ 先過 middlewares 這關吧！
[Day13] 用 axios.patch 來修改資料
[Day14] 用 axios.delete 會把資料刪光光嗎？
拿資料之後，
當然就要開始學用 axios 來進行資料的 CRUD (新增、編輯、刪除)，
但是沒有 API 可以讓我們學習跟嘗試怎麼辦？
那當然自己來啊XD
因此第一步就是學用 JSON Server 自己開 API 不求人！
再來就可以自由自在的想怎麼 call axios.post, axios.patch, axios.delete 就怎麼 call XD
[Day15] 要怎麼知道要 call 的 API url 是？那你必須先知道 routes
[Day16] call API 會用的參數系列～用 filter 來限制條件吧！
[Day17] call API 會用的參數系列～用 _limit 來做簡單分頁
[Day18] call API 會用的參數系列～用 ?q= 來做關鍵字搜尋
[Day19] 如何用 React Router 在網址列加上 ?q= 的參數
[Day20] 用 React Router + useForm + axios.post 打造一個簡易後台
然後有一些 call API 常用的參數也是要學習一下，
像是 ?q=, _limit ....
最後你就可以把這些串起來，靠自己寫出一個簡易後台了~~~(拍手)(這邊我承認我在拖戲)
一旦開始 call API，表示你這輩子跟後端就離不開關係了
[Day22] call API 該認識的 HTTP 狀態碼
[Day23] 今夜讓我們潛入後端當 SPY 吧！教你如何用 JSON Server 丟 HTTP 狀態碼不求人
[Day24] 不要再用 alert 啦！用 SweetAlert 根據 HTTP 狀態碼顯示不同的訊息視窗
[Day25] 走到 router 才拋 HTTP 狀態碼是沒用的～ 為什麼前端需要知道 API 怎麼丟 HTTP 狀態碼？
API 回的 HTTP 狀態碼其實應該算是常識XD
但我一開始剛學 call API 的時候真的一無所知，
覺得還是要講一下XD(這邊我也承認我在拖戲)
[Day26] 前端查案系列(1)～來找出真正的兇手吧！‧ 無法新增資料事件 (通靈程度：★)
[Day27] 前端查案系列(2)～來找出真正的兇手吧！‧ 資料顯示異常事件 (通靈程度：★★)
[Day28] 前端查案系列(3)～來找出真正的兇手吧！‧ 資料修改失敗事件 (通靈程度：★★★)
如果前端學會一點看問題的眉角，
一方面可以比較快解決問題，
另外一方面多學一點後端的知識，
也是美事一樁XD
因為有感於前陣子常遇到不曉得到底是自己前端的問題，
還是後端 API 的問題，
所以決定來模擬一下前端在 call API 可能遇到的報案問題。
這幾篇真的讓我跑去研究了一下 API 要怎麼寫，
雖然我知道我還差得遠就是了XD
但真的充實到炸XD還差點因為寫不出來開天窗
[Day29] 如果能夠早點知道就好了！前端人該會用的測試 API 神器～Postman
再來倒數第二篇介紹的 Postman，
是我前陣子偶然在一場 QA 工程師大大的分享中聽到的，
因為常常在實作介面串資料時，
去 call axios 才發現一些問題，Postman 可以讓你無痛先試著 call API 看看，
真心覺得如果我能早點知道就好了！
雖然現在我還是不太會用，所以就船到橋頭至楠梓
但學習之路是沒有盡頭的，我會加油！！！
回顧這三年的參賽痕跡，真的覺得自己有所進步！
從 2020 年的開始複習寫程式手感的系列文─ 30天找回寫程式手感計劃！！！
到 2021 年的開始學寫前端的系列文─ Re: 從 Next.js 開始的 React 生活，
再到這次 2022 年的開始學 call API 的系列文─ SPYxFRONTEND ～ 懂一點後端真是讓人哇哭哇哭
真的覺得自己走了好遠啊！
不曉得自己還能走多遠，
總之我要感謝在這路上給我機會以及指導的前輩們、夥伴們!!!!!!!!(跪)
然後，連續三年都參賽，而且都是 自我挑戰組，真心覺得自己好厲害
今年參賽的最大心得就是真的很有 自我挑戰 的感覺XD
真的如今年初參加的鐵人賽頒獎典禮上大大所說，
參加鐵人賽根本就是在 自虐 XDDDDDDDDDDDDDDD
真的好幾次都覺得自己要天窗了orz
幸好還是熬過來了orz
完全不知道自己靠著什麼在撐，
總之，我真的不知道自己明年還會不會參賽，
但我一定要對明年的自己說，
萬一還會參賽拜託寫個像是 連續三十天玩RPG、連續三十天日語小教室 ... 這種題目就好！！！
那麼大家再會啦~~~~~ 希望不要再會
還在坑裡的大大們加油~~~~~~
我出運啦XDDDDDD
最後再次賀 SPYxFRONTEND ～ 懂一點後端真是讓人哇哭哇哭 系列文完結灑花！！！
☆,::‧(￣▽￣)/‧:‧°☆
☆,::‧(￣▽￣)/‧:‧°☆
☆,::‧(￣▽￣)/‧:‧°☆
Ado Lin @2022.10.01
聽說 SPY×FAMILY 第二季剛好今天開播XD所以 SPYxFRONTEND 是不是也要有第二季(不要亂挖坑給自己跳)
iThome鐵人賽
看影片追技術