[微精通:網頁設計Vue + Node.js + MySQL] 4.3.網頁 & 網頁伺服器 & CORS (下)

有了API,接下來就讓我們在網頁中使用我們製作的API吧。此篇為下半部份。

 

image/svg+xml<meta charset = "utf-8" > <html> <!-- 略過⼀些 html --> <body> <div id = 'app' > <!-- 略過⼀些 html --> <ul> < li v-for = '(zombie, index) in zombies' > <p> {{zombie.id}}, {{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 ( zombie . id )" > 刪除 < /button > </p> <img v-bind:src = 'zombie.typeImgSrc' style = 'width:130px' > <hr> < /li > </ul> </div> </body> <script> new Vue({ el: '#app' , data: { // 略過⼀些程式 zombies: [], // 略過⼀些程式 } , mounted: function (){ this .loadZombies(); } , methods: { loadZombies : function () { axios.post( 'http://127.0.0.1/api/getZombies' , null ) .then( response => { let result = response.data; this .zombies = result.data; } ); } // 略過⼀些程式 , del : function ( id ) { axios . post( ' http://127.0.0.1/api/deleteZombie ' , { id : id } , {headers: { "Content-Type" : "text/plain" }} ) . then( response => { let result = response . data ; if ( result.error != null ) { alert (result.error); } this . loadZombies (); } ) ; } } }); </script> </html> var express = require( 'express' ); var api = express(); var cors = require('cors'); api.use(cors()); // 略過⼀些程式 var express = require( 'express' ); var api = express(); var cors = require('cors'); api.use(cors()); // 略過⼀些程式 var express = require( 'express' ); var api = express(); var cors = require('cors'); api.use(cors()); api . use ( express . static ( ' html ' )); // 略過⼀些程式 api.post( '/api/ getZombies ' , function (req, res) { // 略過⼀些程式 }); api.post( '/api/ addZombie ' , express.text(), function (req, res) { // 略過⼀些程式 }); api.post( '/api/ updateZombie ' , express.text(), function (req, res) { // 略過⼀些程式 }); api.post( '/api/ deleteZombie ' , express.text(), function (req, res) { // 略過⼀些程式 }); api.listen( 80 , function () { console.log( 'Zombie api listening on port 80!' ); }); <meta charset = "utf-8" > <html> <!-- 略過⼀些 html --> <script> new Vue({ el: '#app' , // 略過⼀些程式 mounted: function (){ this .loadZombies(); } , methods: { loadZombies : function () { axios . post ( ' http://127.0.0.1/api/getZombies ' , null ) .then( response => { let result = response.data; this .zombies = result.data; } ); } // 略過⼀些程式 } }); </script> </html> 4. Vue + axios ,完成 'D' 刪除殭屍資料 1. 呼叫 del() ⽅法時帶入殭屍的 id ,因為 API 會依據 id 刪除特定的殭屍資料。 w4_3_6\html - home.html 2. del() ⽅法接收的 id 參數接收殭屍的 id 值。 3. 呼叫的 deleteZombie API 4. 帶入 id 5. 若有錯誤則顯⽰錯誤訊 息,注意,這時我們沒有使 return 結束程式,⽽是讓 它呼叫 loadZombies() 新載入資料。 6. 原因是刪除資料出錯的原因是 因為 id 已不存在,找不到這筆資 料,因此不中斷,直接呼叫 loadZombies() 重新載入資料。 7. 選擇 瘋狂傑克 ' ,當案下 ' ' 時會呼叫 del() ⽅法,接下執 'deleteZombie'API 刪除 API 伺服器上特定 id 的殭屍物件。 1 1 1 8. del() ⽅法的最後會呼叫 loadZombie() ⽅法重新載入所有 殭屍物件,這時你會發現編號 1 瘋理傑克 ' 已經不⾒了。 關了 CORS 後無法使⽤了 ? 為何 ? w4_3_7\api - server.js 1. 把原先啟動 cors 的程 式刪除,關了 cors 2. 這時在啟動 html ⽬錄下的 home.html 發現無法透過 API 取得殭屍資料了 ! 3. 甚⾄打開 Console 控制台,還會發現⼀ 堆錯誤,發⽣了什麼事 ? 理解 CORS 1. CORS Cross-Origin Resource Sharing 的縮 寫,即 跨來源資源共⽤ ,⽬的是讓不同來源的資源可被存 取。把這些程式刪了,即表⽰不進⾏ ' 跨來源資源共⽤ ' w4_3_7\api - server.js 2. ⾸來,我們開啟 home.html 的來 源是來⾃檔案系統,在瀏覽器上也可 以看到 檔案 的字眼,表⽰這個網⾴ 是直接由檔案系統中開啟的,所以我 們網⾴的 來源 ' 即是 ' 檔案系統 ' ,瀏 覽器會以 'null' 表⽰之。 3. 但接著我們存在的 api 是位 ’http://127.0.0.1' 上的 API 如: http://127.0.0.1/ getZombies ,因此 API 的來源 ’http://127.0.0.1' ,與檔案系統 的來源 ’null’ 不相同,因此禁⽌存取, 也產⽣了這段錯誤訊息,說明 null http://127.0.0.1 不同源。 API http://127.0.0.1 /getZombies 載入 存取 ⼀個網⾴伺服器,讓網⾴與 API 在⼀起 w4_3_8 - server.js 1. 現在我們要建立⼀個網⾴伺服器,包 API 與我們的網⾴ home.html 2. 將原 api 的⽬錄直接放在 w4_3_8 ⽬錄下,刪除 api ⽬錄。當然 html 錄也在 w4_3_8 ⽬錄下。 3. 這⼀段使⽤ cors 的程式還是沒打 開,維持刪除的狀態。 4. 接來下要讓 home.html 網⾴也可以透過 express 建立 http 服務下載下來,因此使⽤ static ⽅法,讓 html 錄下的檔案可透過網⾴伺服器取得。 6. 當然, API 也在這個網⾴伺服器下。 5. 接下來來放在 use() ⽅法中,使⽤這個 html 即可。 7. node server.js 啟動這個網⾴伺服器。 8. 接下來在瀏覽器中輸入 ’http://127.0.0.1/ home.html' 下載 home.html 9. 然後 API 也可以正常呼叫,如 getZombies API ,取得所有殭屍 資料後顯⽰於畫⾯上。為何沒出錯 ? 原因是我們的 home.html 與要 存在的 API ,都是來⾃於同⼀個來 ’http://127.0.0.1' ,因此網 ⾴可以正常呼叫 API ,⽽不特別使⽤ cors() 開放資源的共享。 w4_3_8\html - home.html ⼀般來說,許多的應⽤都是應⽤程式與 API 分離成不同主機的,因此使⽤ CORS() 還是必要的,在安全性上就必須透過其他⽅式加強,比如:使⽤設定 存取的權仗 AccessToken 、對資料加密等。

留言