前言
身為一個半路出家的前端工程師,日常生活大概就是串接API與即將串接API這樣。
但反正這次被交辦了建立後端API的這件事情,剛好可以也來理解一下API到底怎麼建立,免得每次都被後端工程師唬(欸)。
作為我的學習筆記,希望剛好也可以幫到你。
因為我本身是個後端超級小白(阿我就寫前端的咩,雖然也不強?),所以這篇文章也會以超級小白的角度出發,如果你已經是具備有建立API的經驗的工程師,再請你跳著斟酌看囉!
note. 大部分都是我自己理解過後的心得,有些專有名詞的解釋或者思路上的錯誤,再請各位大神不吝賜教。
(溫馨提醒,內文滿長的,可以搭配咖啡或分次服用)
開始前,你應該知道的事情
- node.js (只需要知道npm怎麼使用即可)
- express(這邊用得到應該就是官網上的相關範例)
- mySQL(資料庫,但長得跟Excel表格很像的東西)
- docker(一個凌駕於各式作業系統之上的環境?)
流程說明
先大概說明我們接下來準備要幹什麼,避免等一下看著看著就迷路了(?)
我用下面這張圖片來說明,應該會比較好理解:
- 第一步,我們就是會先安裝Docker。
- 第二步,我們在Docker環境中安裝mySQL的image檔案,讓mySQL運行。
(其實到了這一步,資料庫就已經建置完成了)
3. 接著,因為我對SQL語法沒很熟悉,最好的方式就是用一個GUI(圖形化工具)來操作SQL,這樣就可以省掉很多SQL的語法。
至此,左側的部分其實已經完成了。我們已經順利將資料庫運行成功並且能夠透過圖形化的工具來操作資料庫。
接著我們來看看右側的部分 …
4. 安裝express後端框架。
5. 利用express操作SQL。
6. 在express中,建立第一支API,並且取得返回值。
以上這六個部分完成之後,第一支屬於自己的API就大功告成。
安裝好之後,你應該會看到類似下面的畫面,然後覺得「蛤?就這樣」。
這裡要稍微說明一下docker的核心觀念 — container(容器)。
(如果有補充或者錯誤,歡迎指正)可以把docker想像成是一個容器,這個容器可以被丟在任何一種作業系統裡面運行,換句話說,我可以在windows / macOS / Linux上去執行這個「容器」。所以,下載下來的docker桌面應用程式,在你還沒丟任何映像檔進去之前,他就是一個空的「容器」,所以什麼都沒看到也是合理的。另外,所有的映像檔只會跑在docker上。
換言之,脫離了docker,這些映像檔是失去作用的。概念上其實與node, npm的感覺會有一點類似,同樣的安裝外掛模組,同樣的執行外掛模組。通常這個時候,就會出現一個疑問:我使用npm也同樣可以安裝mySQL,使用docker有什麼好處呢?最大的好處就是,你可以運行docker在這台電腦上並且實作一些東西,接著你回家之後,只要再把docker運行起來之後,就可以接續你原本做的事情了。你不需要再在不同電腦間,每次都執行 npm i安裝專案的相關node module。再者,因為他是個容器,所以容器內的相關映像檔(image),其實可以想像成是獨立於作業系統的,相比於node module,整個電腦作業環境會比較乾淨整潔,這也是好處之一。還有一個顯而易見的優點就是,他很「潮」。這樣以後人家問你有沒有使用過這個目前流行的docker時,你就可以說出一點皮毛?於是就可以要到學妹的line(欸)
· 資料庫安裝 — 下載mySQL image
接著,讓我們回到安裝的流程上。
先前往docker hub去找到mySQL的安裝檔,在這裡。
沒有意外的話,安裝完之後,你就可以在原本空空的docker應用程式中,看到mySQL的選項。
至此,我們其實已經完成我們預期要做的前兩件事情了,我們安裝了docker的環境,也成功下載了mySQL image到docker中。
· 操作資料庫 — mySQL GUI : mySQL workbench
接著,廢物如我,對SQL語法其實不太熟悉。
所以接著我們將會安裝mySQL的GUI來操作SQL,如此一來就可以省略掉很多查找指令的時間,同時也能避免掉一些低級錯誤。(對啦,我就爛)
關於mySQL的GUI,我選擇使用免費的mySQL workbench,LOGO是一隻小海豚,官網在這裡。
(安裝的步驟,基本上只要選擇正確的作業系統,一步步照著操作就可以)
接著,我們打開mySQL workbench,你的畫面應該是什麼都沒有的狀態。
可以點擊,在MySQL Connections右側的「+」來創建新的資料庫。
裡面有一些欄位是需要設定參數的,原則上只有Connection Name以及Password需要特別設定,當然Username你也可以變更。
這些設定,在日後的連線時會需要用到,所以別弄個什麼太複雜的。
接下來,你應該就可以在mySQL主頁上看到你剛才創立的資料庫,然後我們就可以開始創建第一筆資料。
1. 首先,讓我們找到root資料夾:
2. 接著在所選目錄下,新增一個表格(Table)
3. 設定表格中的相關內容
這個地方,你可以設定欄位名稱,比如說「姓名」、「性別」、「e-mail」或者帳號之類的。
接下來,右側的欄位則是可以設定dataType,限制這個欄位的資料型別,比如說左側的欄位是age,這邊你就可以設定「INT」,利用數字型別來儲存用戶的「年齡」。
建置完資料之後,在程式左側應該可以看到類似這樣的資料結構。
Tables下會有你一開始取名的資料庫名稱,其下的Columns會包含你之後設定的各個欄位,以我的例子來說就是包含了id,name,email以及age。
到這,我們已經將與資料庫相關的環境以及表單建立完成了。
我個人覺得這段應該反而是最辛苦的,實際上在操作一個你不熟悉的系統,或者環境。
會遭遇到的問題百百種,像我這種完全沒有碰過資料庫、伺服器端的新手來說,在建置資料庫的過程中,你可能得先稍微理解SQL在幹嘛?Docker的功能是?或者mySQL GUI的操作流程。但這些過程其實除了可以增加自己對後端的理解(以後比較不會被唬?)之外,同時也是培養自己對於問題解決的方式,搞不好還能培養出自己的一套SOP(笑
· 將後端與資料庫串接 — express.js 安裝
如果你熬過了上面的過程,這一段你一定覺得非常舒服。這邊的後端我將使用在node中滿出名的後端框架 — express作為後端來操作資料庫。
- 首先,先安裝express.js
官網中有詳述他的安裝流程,也可以因著你的需求做安裝上的設置,這邊我就重點說明就好。
// 在已經有安裝node的前提下
// 先建立一個資料夾,專案將會放在這裡$ mkdir myapp
$ cd myapp
接著,先透過initial來建立一支package.json檔案。
$ npm init
在安裝建立的過程中,會有蠻多設定是可以自由變更的,不過大部分其實都只需要接受默認值就可以了。
但有一個步驟,是需要你特別注意的,那就是檔案的進入點(Entry point)
在一開始,我們建立了一個叫做myapp的檔案,但也許你的名稱不是叫這個,所以你必須要更改進入點的設定:
entry point: (index.js)//後面的index位置,就是你主要檔案的進入點,就依照你自己建立的名稱做變更
//我這邊是使用index
一切就緒後,我們就可以來安裝express了。
$ npm install express --save// 後面的--save是選擇你是否要將express丟到package.json檔案中做控管。
// 所以如果你只是想要暫時的使用express而不將其新增到相依關係清單中的話,請忽略
好的,那麼我們的express也安裝完成了。
現在,我們再來看一下我們到底做了什麼,以及還剩下什麼沒做。
再來利用一下,剛開始的那張圖。
左側的藍色部分,我們已經都做完了,現在也已經將express透過npm安裝完成了。
所以,目前剩下express與mySQL的連線以及建立API。
在正式進入code之前,讓我們稍微休息一下哈
· 建立express 與 mySQL的連線
開始前,我們先透過npm多安裝一支body-parser
npm i body-parser
引入body-parser是為了將接下來的data轉成json格式。
這邊,直接上code說明可能比較快。
首先,我們先引入mysql / express。
並且,將app這個變數當作express實際運作的目標。
接著,引入body-parser將data轉成json。
之後我們就可以寫一段監聽的code,來確保server有實際運作。
這邊,我們就完成了express相關的初始作業。
緊接著是mySQL的連線設定。
一開始,我們先設定了相關的mySQL參數設定(注意,這邊的用戶以及密碼要按照一開始自己設定的數值輸入)
接著我們就透過.connet這個方法來啟動連線,並且寫入err時要console出錯誤訊息,成功則顯示sucess
接著再使用query方法,來實際運算看看是否有正常顯示結果。
*query也可以用來寫入並傳遞參數,如果你的資料庫有特殊需求的話。
沒意外的話,你應該會收到這樣的console:
connection success
16 // 這是因為我在query中寫入了15+1,你也可以變更看看數字
然後其實你應該不會這麼順利就看到這個結果
事實是這樣的。
我們透過docker去安裝的mySQL image的版本是8.x.x,這個版本的mySQL使用了新的加密方法,但是在node端卻沒有一起變更。
這會發生什麼事情?
就是你的程式碼會一直報錯:
Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgr ading MySQL client//應該會出現類似這樣的code , 重點是ER_NOT_SUPPORTED_AUTH_MODE
解決的方式,就是你要進到你的mySQL中去變更加密方式:
首先,你要先進入到mySQL的資料夾中:
docker exec -it mysql mysql -u root -p
當輸入了正確的密碼後,你就會發現你前面的資料夾目錄已經變成了「mySQL」
這個時候,再輸入以下的內容:
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '12345';// root指的是你的資料庫user name
// 12345 是你的資料庫密碼
// 最後一個分號不能省略!
上面的這段code,其實是加上了一段「mysql_native_password
」去變更mySQL的密碼加密方式,讓node可以認得。
成功的話,你會看到以下的畫面:
理論上,應該就會成功了。
但你知道人在倒霉的時候,什麼都會發生。
如果你還是出現錯誤的話,這時候把docker中的mySQL重新安裝一次,就能夠順利通過了。
(如果你還有其他的狀況,也歡迎留言給我)
· 建立你的第一支API
先寫個 ‘ get ‘方法來歡迎自己。
透過連線,你應該就可以在console看到
Hello World!
接著我們再試試看更複雜的,
在mySQL workbench這邊可以看到你的SQL code,記得要改成自己的設定,這串code其實就是GUI幫你編譯出SQL的code讓你使用
然後,我們完成了第一支API了!
接下來,可以試著去操作新增、刪除抑或修改的指令,這邊就沒有展示了。
你也可試試看去直接變更資料庫中的資料,看看會有什麼變化。
結論
在自己嘗試建立API之前,其實滿排斥的。
畢竟那是個未知的範疇,光前端都顧不了我還管後端,但也剛好有這個機會可以實現這個功能,在過程中是真的學到了不少東西。
實際接觸之後,才發現透過express這個框架去串接data base其實也沒有這麼困難嘛(煙,當然我使用到的部分還是相當皮毛的。
但無論如何,我也算是跨出一步了(耶嘿~
除了作為自己的學習紀錄之外,希望也可以幫助到正在看文章的你。
*如果有發現問題的話,歡迎留言指正
那我就下台一鞠躬啦!
如果這篇文章對你有幫助,請幫我拍個手讓我知道。
下次見囉!