vue-resource实现数据的绑定、添加、删除
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 }本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-08-18 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读