[微精通：網頁設計Vue + Node.js + MySQL] 4.1.API & API伺服器 (上)

張貼者： 日期：
API可以說是一個資訊系統運作的核心，接下來我們將製作殭屍API用來處理殭屍系統的所有殭屍資料。 上半部，我們來理解原理，並安裝一些必要的軟體。

 

image/svg+xml4.1.API & API 伺服器 <meta charset = "utf-8" > <html> // 略過 HTML <body> <div id = 'app' > // 略過 HTML <ul> < li v-for = '(zombie, index) in zombies ' > <p> {{zombie.name}}, {{zombie.age}} 歲 , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}} <button class = "btn btn-primary" v-on:click = 'modifyInit(zombie)' > 修改 </button> <button class = "btn btn-danger ml-1" v-on:click = "del(index)" > 刪除 </button></p> <img v-bind:src = 'zombie.typeImgSrc' style = 'width:130px' > <hr> < /li > </ul> </div> </body> <script> new Vue({ el: '#app' , data : { // 略過⼀些程式 zombies : [ {name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true , typeImgSrc: "z1.png" }, {name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true , typeImgSrc: "z2.png" }, {name: ' ⼤提姆 ' , age: 5 , isVegetarian: false , typeImgSrc: "z3.png" }, {name: ' 史提夫 ' , age: 2 , isVegetarian: false , typeImgSrc: "z4.png" }, {name: ' 功夫李 ' , age: 1 , isVegetarian: true , typeImgSrc: "z5.png" }, ] , // 略過⼀些程式 } , methods: { // 略過⼀些程式 , add : function () { // 略過⼀些程式 this .zombies . push( { name: this .newName, age: age, isVegetarian: this .newIsVegetarian, typeImgSrc: this .newTypeImgSrc } ) ; $( '#newModal' ).modal( "hide" ); } // 略過⼀些程式 , update : function () { // 略過⼀些程式 this .modifyZombie.name = this .modifyName; this .modifyZombie.age = age; this .modifyZombie.isVegetarian = this .modifyIsVegetarian; this .modifyZombie.typeImgSrc = this .modifyTypeImgSrc; $( '#modifyModal' ).modal( "hide" ); } , del : function (i) { this .zombies . splice (i, 1 ); } } }); </script> </html> [ { name: ' 瘋狂傑克 ' , age: 3.3 , isVegetarian: true , typeImgSrc: "z1.png" } , { name: ' 懶懶瑪琍 ' , age: 10 , isVegetarian: true , typeImgSrc: "z2.png" } , { name: ' ⼤提姆 ' , age: 5 , isVegetarian: false , typeImgSrc: "z3.png" } , { name: ' 史提夫 ' , age: 2 , isVegetarian: false , typeImgSrc: "z4.png" } , { name: ' 功夫李 ' , age: 1 , isVegetarian: true , typeImgSrc: "z5.png" } , ] [ { " name " : " 瘋狂傑克 " , " age " : 3.3 , " isVegetarian " : true , " typeImgSrc " : "z1.png" } , { " name " : " 懶懶瑪琍 " , " age " : 10 , " isVegetarian " : true , " typeImgSrc " : "z2.png" } , { " name " :" ⼤提姆 " , age: 5 , " isVegetarian " : false , " typeImgSrc " : "z3.png" } , { " name " : " 史提夫 " , age: 2 , " isVegetarian " : false , " typeImgSrc " : "z4.png" } , { " name " : " 功夫李 " , " age " : 1 , " isVegetarian " : true , " typeImgSrc " : "z5.png" } , ] 1 1 關了網⾴，過去新增的殭屍資料都不在了 ? 怎麼辦 ? 1. 雖然製作了新增、修改、刪除殭屍資料的功能，但資 料都存在 Vue 的 Zombies 屬性上，每次關閉重開網⾴⼜ 重來，過去新增、修改、刪除的記錄也不存在，每次都從 這 5 個殭屍資料開始，怎麼辦好呢 ? 怎麼保存資料好 ? 2. 比如我們點了 ’ 刪除 ’ 刪了 ’ 瘋狂傑克 ' ，很好， ' 瘋狂傑克 ' 不⾒了。 3. 但重開網⾴後， ’ 瘋理傑克 ’ ⼜出現 了。當然，若是進⾏ ' 新增 ' 或 ' 修改 ' 結 果還相同，重開後⼜是這 5 ⽀殭屍。 js_01_01_01.js 1 1 認識 Node.js JavaScript 瀏覽器 Chrome 、 Safari 、 Edge <script src=‘…’> </script> <script> … </script> .html .js 2. 寫在 js 中，然後 引⼈ html 中。 3. 寫在 html 中。 4. 最後 JavaScript 隨著網⾴ HTML 執⾏在瀏覽器中。 1. 過去的 JavaScript 只能 ... Node.js 5. 現在， JavaScript 因為 Node.js 的出現，它可以脫離瀏覽器執⾏ 在 Node.js 的環境中。好處是我們可以使⽤ JavaScript 與 Node.js 開發各式各樣的應⽤程式，⽽不限在瀏覽器中了。 認識 HTTP 協定 當然， Node.js 和瀏覽器的環境⼀定是不同的，所以可使⽤的⼀些內建的⽅ 式或物件也會有所不同，比如在 Node.js 因為沒有網⾴ HTML 的部份，因此 也不會有 window 物件可使⽤。 提 ⽰ HTTP 1. HTTP 是 ' 超⽂本傳輸協定 '(HyperText Transfer Protocol ）的英⽂縮寫，這協定即是為 HTML ⽽⽣，因 為他們的 ’HT' 皆是 Hyper Text 的意思。 主機 電腦 2. 為何需要協定了 ? 原因是我們要有⼀個共通的語 ⾔，才能讓 ’ 電腦 ' 與主機雙⽅彼此之間在說什麼。 3. 放⼤來看，他們其實非常簡單，電腦發出⼀個 ’ 請求 Request' ，主機處理後就回傳⼀個 ' 回應 Response' ， 這即是我們常說的 Request/Response 。 主機 電腦 表頭 Headers ⽅法 Method 內容 Body 請求 Request 表頭 Headers 狀態 Status 內容 Body 回應 Response 4. ⽅法 Method 即想進⾏的操作， 如 GET 、 POST 、 DELETE 等都是可 選定的操作，在後續的章節中，我 們會簡單的僅⽤ POST 。 5. 你需造訪的網址 URL 會放在表頭 Headers 中， ⽽表頭也可以夾帶⼀些要 給主機參考的資料，如： 使⽤哪個版本的瀏覽器。 6. 若要上傳資料可以放在內容 Body 中。如比我們新增殭屍物件時 就可以把殭屍的資料放在其中， 7. 回應 Response 中沒有⽅法 Method ，但有狀態 Status ，狀態 是⽤來表⽰這次存取的狀態。比如 常⾒有 200 ，表⽰存取正常， 404 ， 表⽰找不到你請求的資源等。 8. 與請求 Request 相同， ⼀樣有表頭 Headers 可以夾 帶⼀些資訊給請求的電腦。 9. 與請求 Request 相同，⼀樣把 要回應的資料放在內容 Body 中，比 如我們要取得的所有殭屍資料。 認認 JSON 主機 電腦 表頭 Headers ⽅法 Method 內容 Body 請求 Request 表頭 Headers 狀態 Status 內容 Body 回應 Response 1. 雖然我們可以透過內容 Body 的部份上下傳資料，但 我們同樣⾯臨⼀個問題，那就是它的 ’ 格式 ’ ，到底怎麼 樣的資料格式才比較好去處理呢 ? 2. 這是 JavaScript 寫下的陣列，其中包含多個殭屍物件。 3. ⽽ JSON 是 JavaScript Object Notation 的縮寫，代表 它使⽤了 JavaScript 的陣列與物件作為資料的格式。不同的 是，所有引號都要變為雙引號 (“”) ，且每個物件的屬性也要加上 雙引號 (“”) ，即屬性與字串都要使⽤雙引號的意思。當然， JSON 在 JavaScript 也是完全語法正確的陣列與物件，可以說 JSON 就是使⽤ JavaScript 中物件的其中⼀種寫法作為資料傳輸 的格式。 陣列與物件 JSON 4. 為何選⽤ JSON 作為資料傳輸格式這麼⽅便 ? 那是因為它是 JavaScript 的⼀種合格的程式，其能正確的表⽰資料的結構 外，也能正確的保存資料的型別，如數值、字串、布林值等。⽽ JSON ⼜是 JavaScript 的點格語法，所以直接放在程式中執⾏， 產⽣成陣列與物件，這⼀切不是很⽅便嘛 ! 前置作業 : 安裝 Node.js 1. 於 Google 中搜 尋 ’Node.js’ ，然後點第 ⼀個 ’Node.js’ 官網。 2. 點選第 1 個 ’LTS’ 版本 下載，⽬前的版號是 14.17.6 ， LTS 是 Long Term Support 的縮寫， 表⽰長期⽀援、有 Bug 會 修正。下載後點下載 的 .pkg 進⾏安裝。 3. 3. 點選 ’ 繼續 ' 。 4. 再點選 ’ 繼續 ’ ，點 ’ 同意 ‘ 許可證。 4. 點選 ’ 繼續 ' 。 5. 點選 ’ 安裝 ’ 後輸入電腦的密碼再點選 ’ 安裝軟體 ' 。 6. 安裝完後選 ’ 關閉 ’ ，因不再會重新安裝，可以選 ’ 丟到垃圾桶 ' 裝 .pkg 安裝檔丟棄。 前置作業 : 安裝 Postman 測試⼯具 1. 於 Google 中搜 尋 ’postman’ ，然後點第 ⼀個 ’Postman’ 官網。 2. 選 apple 的圖 ⽰⾄下載⾴⾯。 3. 點選 ’Download the App’ 進⾏下載。 4. 這次下載的會是個 .zip 檔，點兩下解壓後會得 到 ’Postman' 應⽤程式。 5. 按照 Mac 的慣例，將 ’Postman' 拖拉到應⽤程式中。 6. 執⾏ ’Postman’ 。第⼀次會詢問是 否打開，選 ’ 打開 ' 開啟 Postman 。 7. 最後點選 ’Skip and go to the app’ 直接使⽤，就會到 Postman 的應⽤程式中了。

留言

張貼留言