vue-resource实现数据的绑定、添加、删除
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>简单用户管理</title> 5 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <!--vue-resource是基于vue的，应在引用vue之后引用vue-resource--> 8 <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script> 9 </head> 10 <body> 11 <div id="app"> 12 <div class="panel panel-success"> 13 <div class="panel-heading"> 14 <h3 class="panel-title">基于vue.js的简单用户管理</h3> 15 </div> 16 <div class="panel-body form-inline "> 17 <label> 18 <!--v-focus为自定义指令的调用，元素自动获得焦点--> 19 username: 20 <input type="text" class="form-control" v-model="username" v-focus> 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 </div> 28 </div> 29 <table class="table table-hover table-bordered table-striped"> 30 <thead> 31 <tr> 32 <th>username</th> 33 <th>userpwd</th> 34 <th>Operation</th> 35 </tr> 36 </thead> 37 <tbody> 38 <tr v-for="list in lists" :key="list.userid"> 39 <td>{{list.username}}</td> 40 <td>{{list.userpwd}}</td> 41 <td> 42 <!--prevent为阻止事件的默认行为--> 43 <a href="" @click.prevent="del(list.userid)">Delete</a> 44 </td> 45 </tr> 46 </tbody> 47 </table> 48 </div> 49 </body> 50 <script> 51 Vue.http.options.root = 'http://localhost:18227/' //设置全局请求根路径 52 Vue.http.options.emulateJSON = true; //启用from格式的请求 53 54 //自定义指令 55 Vue.directive('focus', { 56 inserted: function (el) { 57 el.focus() 58 }, 59 }); 60 61 new Vue({ 62 el: '#app', 63 data: { 64 username: "", 65 userpwd: "", 66 lists: [] 67 }, 68 methods: { 69 del(userid) { 70 this.$http.get('Index/DelJson?userid=' + userid).then((result) => { 71 if (result.body.State === 1) { 72 this.getAllLists(); 73 } 74 }).catch((err) => { 75 alert("获取数据失败"); 76 }); 77 }, 78 add() { 79 var list = { username: this.username, userpwd: this.userpwd }; 80 this.$http.post('Index/AddJson', list, {}).then((result) => { 81 this.username = this.userpwd = ""; 82 if (result.body.State === 1) { 83 this.getAllLists(); 84 } 85 }).catch((err) => { 86 alert("获取数据失败"); 87 }); 88 }, 89 getAllLists() { 90 this.$http.get('Index/ReturnJson').then((result) => { 91 this.lists = result.body; 92 }).catch((err) => { 93 alert("获取数据失败"); 94 }); 95 } 96 }, 97 created() { 98 console.log("第一步") 99 // 实例初始化完成 100 this.getAllLists(); 101 }, 102 }) 103 </script> 104 </html>
服务端代码为C#，以下是控制器
1 public string ReturnJson() 2 { 3 var userlist = db.User.Where<User>(u => true); 5 return JsonConvert.SerializeObject(userlist); 6 } 8 public JsonResult AddJson(User user) 9 { 10 MsgJson m = new MsgJson(); 11 db.User.Add(user); 12 if (db.SaveChanges() > 0) 13 { 14 m.Msg = "请求成功"; 15 m.State = 1; 16 } 17 else { 18 m.Msg = "请求失败"; 19 m.State = 0; 20 } 21 return Json(m); 22 } 24 public JsonResult DelJson(string userid) 25 { 26 int did = int.Parse(userid); 28 List<User> userlist =db.User.Where(u => u.userid == did).ToList(); 30 User user = userlist[0]; 32 db.User.Remove(user); 33 MsgJson m = new MsgJson(); 34 if (db.SaveChanges() > 0) 35 { 36 m.Msg = "请求成功"; 37 m.State = 1; 38 } 39 else 40 { 41 m.Msg = "请求失败"; 42 m.State = 0; 43 } 44 return Json(m, JsonRequestBehavior.AllowGet); 45 }