vue-resource實現數據的CRD
阿新 • • 發佈：2018-08-18
ins delete 取數據 style boot username .com focus lists
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <title>簡單用戶管理</title> 6 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 7 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 8 <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> 9 </head> 10 11 <body> 12 <div id="app"> 13 <div class="panel panel-success"> 14 <div class="panel-heading"> 15 <h3 class="panel-title">基於vue.js的簡單用戶管理</h3> 16 </div> 17 <div class="panel-body form-inline "> 18 <label> 19 username: 20 <input type="text" class="form-control" v-model="username"> 21 </label> 22 <label> 23 userpwd: 24 <input type="text" class="form-control" v-model="userpwd"> 25 </label> 26 <button class="btn btn-primary" @click="add()">Create</button> 27 <label> 28 search: 29 <input v-focus type="text" class="form-control" v-model="keywords"> 30 </label> 31 </div> 32 </div> 33 <table class="table table-hover table-bordered table-striped"> 34 <thead> 35 <tr> 36 <th>username</th> 37 <th>userpwd</th> 38 <th>Operation</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr v-for="list in search(keywords)" :key="list.userid"> 43 <td>{{list.username}}</td> 44 <td>{{list.userpwd}}</td> 45 <td> 46 <a href="" @click.prevent="del(list.userid)">Delete</a> 47 </td> 48 </tr> 49 </tbody> 50 </table> 51 </div> 52 </body> 53 <script> 54 Vue.http.options.root = ‘http://localhost:18227/‘ //設置根路徑 55 Vue.http.options.emulateJSON = true; //啟用from格式的請求 56 Vue.directive(‘focus‘, { 57 inserted: function (el) { 58 el.focus() 59 }, 60 }); 61 62 new Vue({ 63 el: ‘#app‘, 64 data: { 65 username: "", 66 userpwd: "", 67 keywords: "", 68 lists: [] 69 }, 70 methods: { 71 del(userid) { 72 this.$http.get(‘Index/DelJson?userid=‘ + userid).then((result) => { 73 if (result.body.State === 1) { 74 alert(result.body.Msg); 75 this.getAllLists(); 76 } 77 }).catch((err) => { 78 alert("獲取數據失敗"); 79 }); 80 }, 81 add() { 82 var list = { username: this.username, userpwd: this.userpwd }; 83 this.$http.post(‘Index/AddJson‘, list, {}).then((result) => { 84 this.username = this.userpwd = ""; 85 if (result.body.State === 1) { 86 alert(result.body.Msg); 87 this.getAllLists(); 88 } 89 }).catch((err) => { 90 alert("獲取數據失敗"); 91 }); 92 }, 93 search(keywords) { 94 var newList = []; 95 this.lists.forEach(element => { 96 if (element.username.indexOf(keywords) != -1) { 97 newList.push(element); 98 } 99 }); 100 console.log("第二步") 101 return newList; 102 }, 103 getAllLists() { 104 this.$http.get(‘Index/ReturnJson‘).then((result) => { 105 this.lists = result.body; 106 console.log(result.body); 107 }).catch((err) => { 108 alert("獲取數據失敗"); 109 }); 110 } 111 }, 112 created() { 113 console.log("第一步") 114 // 實例初始化完成 115 this.getAllLists(); 116 }, 117 118 }) 119 </script> 120 121 </html>
vue-resource實現數據的CRD