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

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

 

image/svg+xml4.3. 網⾴ & 網⾴伺服器 & CORS var express = require( ‘express' ); var api = express (); var cors = require ( ' cors ' ); api.use ( cors ()); // 略過⼀些程式 <meta charset = "utf-8" > <html> <head> <!-- 略過⼀些 html --> < script src = " https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/ axios.min.js " ></script> </head> <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(index)" > 刪除 </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 ; } ) ; } // 略過⼀些程式 } }); </script> </html> <meta charset = "utf-8" > <html> <!-- 略過⼀些 html --> <body> <div id = 'app' > <button type = "button" class = "btn btn-primary m-4" v-on:click = "newInit()" > 新增 </button> <div class = "modal fade" id = "newModal" > <div class = "modal-dialog" > <div class = "modal-content" > <!-- 略過⼀些 html --> <div class = "modal-body" > < form style = "margin:20px;" > <label> 名字 </label> <input type = "textbox" class = "form-control" v-model = "newName" > <label> 變異年份 </label> <input type = "textbox" class = "form-control" v-model = "newAge" > <input type = "checkbox" v-model = "newIsVegetarian" > <label class = "form-check-label" > 是否為素食者 </label> <br> <label> 類型圖片 </label> <div class = "form-check form-check-inline" v-for = "x in imgTypes" > <input class = "form-check-input" type = "radio" v-model = "newTypeImgSrc" v-bind:value = "x.src" > <label class = "form-check-label" > {{x.name}} </label> </div> <img v-bind:src = 'newTypeImgSrc' style = 'width:130px' > < /form > </div> <div class = "modal-footer" > < button class = "btn btn-primary" v-on:click = add ()" > 加入 < /button > </div> </div> </div> </div> <!-- 略過⼀些 html --> <hr> <ul> <li v-for = '(zombie, index) in zombies' > <p> {{zombie.id}}, {{zombie.name}}, {{zombie.age}} , {{zombie.isVegetarian == true ? ' 素食者 ':' 非素食者 '}}</p> <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: [], newName: "" , newAge: 0 , newIsVegetarian: false , newTypeImgSrc: "z1.png" , // 略過⼀些程式 } , 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; } ); } // 略過⼀些程式 , add : function () { let age = parseFloat ( this . newAge ); if (isNaN(age) == true ){ alert( " 變異年份請輸入數值。 " ); return ; } axios . post (' http://127.0.0.1/api/addZombie ', { name: this .newName, age: age, isVegetarian: this .newIsVegetarian, typeImgSrc: this .newTypeImgSrc } , { headers : { " Content-Type " : text/plain " } } ).then( response => { let result = response . data ; if ( result.error != null ) { alert ( result.error ); return ; } this . loadZombies (); $( ' #newModal ' ). modal ( " hide " ); } ); } // 略過⼀些程式 } }); </script> </html> <meta charset = "utf-8" > <html> <!-- 略過⼀些 html --> <body> <div id = 'app' > <!-- 略過⼀些 html --> <div class = "modal fade" id = "modifyModal" > <div class = "modal-dialog" > <div class = "modal-content" > <div class = "modal-header" > <h5 class = "modal-title" > 修改殭屍 </h5> <button type = "button" class = "close" data-dismiss = "modal" > <span aria-hidden = "true" > &times; </span> </button> </div> <div class = "modal-body" > < form style = "margin:20px;" > <label> 名字 </label> <input type = "textbox" class = "form-control" v-model = "modifyName" > <label> 變異年份 </label> <input type = "textbox" class = "form-control" v-model = "modifyAge" > <input type = "checkbox" v-model = "modifyIsVegetarian" > <label class = "form-check-label" > 是否為素食者 </label> <br> <label> 類型圖片 </label> <div class = "form-check form-check-inline" v-for = "x in imgTypes" > <input class = "form-check-input" type = "radio" v-model = "modifyTypeImgSrc" v-bind:value = "x.src" > <label class = "form-check-label" > {{x.name}} </label> </div> <img v-bind:src = 'modifyTypeImgSrc' style = 'width:130px' > < /form > </div> <div class = "modal-footer" > < button class = "btn btn-primary" v-on:click = update ()" > 更新 < /button > </div> </div> </div> </div> <hr> <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(index)" > 刪除 </button></p> <img v-bind:src = 'zombie.typeImgSrc' style = 'width:130px' > <hr> < /li > </ul> </div> </body> <script> new Vue({ el: '#app' , data: { // 略過⼀些程式 zombies: [], // 略過⼀些程式 modifyZombie: null, modifyID : - 1 , modifyName: "" , modifyAge: 0 , modifyIsVegetarian: false , modifyTypeImgSrc: "z1.png" } , 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; } ); } // 略過⼀些程式 , modifyInit : function ( x ) { this.modifyZombie = x; this . modifyID = x . id ; this .modifyName = x.name; this .modifyAge = x.age; this .modifyIsVegetarian = x.isVegetarian; this .modifyTypeImgSrc = x.typeImgSrc; $( '#modifyModal' ).modal( "show" ) } , update : function () { let age = parseFloat( this .modifyAge); if (isNaN(age) == true ){ alert( " 變異年份請輸入數值。 " ); return ; } axios . post( ' http://127.0.0.1/api/updateZombie ' , { id : this . modifyID , name: this .modifyName, age: age, isVegetarian: this .modifyIsVegetarian, typeImgSrc: this .modifyTypeImgSrc } , {headers: { "Content-Type" : "text/plain" }} ).then( response => { let result = response . data ; if ( result.error != null ) { alert ( result.error ); return ; } this . loadZombies (); // $( ' #modifyModal ' ). modal ( " hide " ); } ) ; } , // 略過⼀些程式 } }); </script> </html> 1 1