[微精通:網頁設計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 個殭屍資料開始,怎麼辦好呢 ? 怎麼保存資料好 ?