[微精通:網頁設計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