[微精通:網頁設計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 的應⽤程式中了。

留言