Vue在MVC中的进行前后端的交互
程序员文章站
2022-05-28 22:53:24
Vue在MVC中的进行前后端的交互 Preface： 由于最近在研究前端相关的技术，作为前端非常优秀的框架Vue，个人在学习的过程中遇到一些问题，网上相关资料有限，所以在这这里总结一下个人使用Vue的一点经验，以便后来者借鉴！ 官方文档:Vue.js 使用Vue在ASP.NET MVC中进行前后端交 ......
Preface：
由于最近在研究前端相关的技术，作为前端非常优秀的框架，个人在学习的过程中遇到一些问题，网上相关资料有限，所以在这这里总结一下个人使用Vue的一点经验，以便后来者借鉴！
官方文档:
使用Vue在ASP.NET MVC中进行前后端交互
在阅读下面的文章之前你需要先了解一下Vue官方推荐的前后端交互的插件：
1.resource（官方在2.0版本之后取消了对此插件的维护）
2.axios
注：这里使用的都是异步的插件，因为这样才会在你的项目中具有使用意义，当然你也可以用其它的js库，如jQuery、Fetch等等...
Instance:
Controller
1 using Demo.Models;
2 using System;
3 using System.Collections.Generic;
4 using System.Linq;
5 using System.Web;
6 using System.Web.Mvc;
7
8 namespace Demo.Controllers
9 {
10 //[RoutePrefix("api/Goods")]
11 public class GoodsController : Controller
12 {
13 List<GoodsEntity> goosdList = new List<GoodsEntity>
14 {
15 new GoodsEntity(){ ID=001,Name="水",Type=1,Price=3},
16 new GoodsEntity(){ ID=002,Name="牛奶",Type=1,Price=10},
17 new GoodsEntity(){ ID=003,Name="面包",Type=2,Price=15}
18 };
19
20 // GET: Goods
21 public ActionResult Index()
22 {
23 return View();
24 }
25
26 public ActionResult Check()
27 {
28 return View();
29 }
30
31 [HttpGet]
32 public JsonResult GetGoodsType()
33 {
34 List<int> goodsType = new List<int>();
35 foreach (var item in goosdList)
36 {
37 if (!goodsType.Contains(item.Type))
38 {
39 goodsType.Add(item.Type);
40 }
41 }
42 return Json(goodsType, JsonRequestBehavior.AllowGet);
43 }
44
45 [HttpGet]
46 public JsonResult GetAllGoods()
47 {
48 return Json(goosdList, JsonRequestBehavior.AllowGet);
49 }
50
51 [HttpPost]
52 public JsonResult GetGoods(int id)
53 {
54 var entity = goosdList.Where(g => g.ID == id).FirstOrDefault();
55 if (entity != null)
56 {
57 return Json(new ReturnJsonInfo(500, "success!", entity));
58 }
59 return Json(new ReturnJsonInfo(400, "error!", null));
60 }
61
62 [HttpPost]
63 public JsonResult UpdateGoods(GoodsEntity entity)
64 {
65 if (entity!=null)
66 {
67 var goodsEntiy = goosdList.FirstOrDefault(g => g.ID == entity.ID);
68 if (goodsEntiy!=null)
69 {
70 goodsEntiy = entity;
71 return Json(new ReturnJsonInfo(500, "success!", goosdList));
72 }
73 goosdList.Add(entity);
74 return Json(new ReturnJsonInfo(500, "success!", goosdList));
75 }
76 return Json(new ReturnJsonInfo(400, "error!",null));
77 }
78
79 [HttpPost]
80 public JsonResult DelectGoods(int id)
81 {
82 var entity = goosdList.Where(g => g.ID == id).FirstOrDefault();
83 if (entity != null)
84 {
85 goosdList.Remove(entity);
86 return Json(new ReturnJsonInfo(500, "success!", goosdList));
87 }
88 return Json(new ReturnJsonInfo(400, "error!",null));
89 }
90
91 }
92 }
在上面的控制器中加载了一些示例数据，并且都是以json的格式返回前端，这样前端就可以直接使用这些数据。
注：控制器返回至前端的json中，上面使用 “ReturnJsonInfo” 对象序列化进行返回， “ReturnJsonInfo” 代码如下。
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5
6 namespace Demo.Models
7 {
8 public class ReturnJsonInfo
9 {
10 public int Code { get; set; }
11 public string Message { get; set; }
12 public object Entity { get; set; }
13 public ReturnJsonInfo(int code, string message,object obj)
14 {
15 this.Code = code;
16 this.Message = message;
17 this.Entity = obj;
18 }
19 }
20 }
View
1.前端采用resource插件
1 @{
2 ViewBag.Title = "Goods IndexPage";
3 }
4 <script type="text/javascript" src="~/Resources/Scripts/vue.js"></script>
5 <script type="text/javascript" src="~/Resources/Scripts/vue-resource.js"></script>
6 <h2>Index</h2>
7 <div id="demo">
8 <table>
9 <tr>
10 <td><label>编号：</label></td>
11 <td><input type="text" v-model="newGoods.id" /></td>
12
13 <td><label>名称：</label></td>
14 <td><input type="text" v-model="newGoods.name" /></td>
15
16 <td><label>类型：</label></td>
17 <td><input type="text" v-model="newGoods.type" /></td>
18
19 <td><label>售价：</label></td>
20 <td><input type="text" v-model="newGoods.price" /></td>
21
22 <td><input type="submit" value="查询" v-on:click="GetGoods(newGoods.id)" /></td>
23 </tr>
24 </table>
25 <table v-show="goodsList.length">
26 <tr>
27 <td>编号</td>
28 <td>名称</td>
29 <td>类型</td>
30 <td>售价</td>
31 </tr>
32 <tr v-for="item in goodsList">
33 <td>{{item.ID}}</td>
34 <td>{{item.Name}}</td>
35 <td>{{item.Type}}</td>
36 <td>{{item.Price}}</td>
37 </tr>
38 </table>
39 </div>
40 <script type="text/javascript">
41 var view = new Vue(
42 {
43 el: "#demo",
44 data: {
45 goodsList: [],
46 newGoods: {id:'',name:'',type:'',price:''}
47 },
48 created: function () {
49 this.InIt();
50 },
51 methods: {
52 InIt: function () {
53 //初始化
54 this.GetAllGoods();
55 },
56 GetAllGoods: function () {
57 var _self = this;
58 _self.$http.get("../Goods/GetAllGoods").then(
59 // Lambda写法
60 (response) => {
61 //successCallback
62 for (var i = 0; i < response.data.length; i++) {
63 _self.goodsList.push(response.data[i]);
64 }
65 } ,
66 (response) => {
67 //errorCallback
68 }
69 );
70 },
71 GetGoods: function (_id) {
72 var _self = this;
73 _self.goodsList = [];
74 if (_id.length > 0) {
75 _self.$http.post("../Goods/GetGoods", { id: _id }).then(
76 // 传统写法
77 function (response) {
78 //successCallback
79 if (response.data.Code == 500) {
80 _self.goodsList.push(response.data.Entity);
81 }
82 else {
83 alert(response.data.Message);
84 }
85 },
86 function (response) {
87 //errorCallback
88 }
89 )
90 .catch(function (response) {
91 console.log(response);
92 });
93 }
94 else {
95 _self.GetAllGoods();
96 }
97 }
98 }
99 }
100 );
101 </script>
2.前端采用axios插件
1 @{
2 Layout = null;
3 }
4
5 <!DOCTYPE html>
6
7 <html>
8 <head>
9 <meta name="viewport" content="width=device-width" />
10 <title>Check</title>
11 <script type="text/javascript" src="~/Resources/Scripts/vue.js"></script>
12 <script type="text/javascript" src="~/Resources/Scripts/axios.min.js"></script>
13 </head>
14 <body>
15 <div id="demo">
16 <div>
17 <table>
18 <tr>
19 <td><label>编号：</label></td>
20 <td><input type="text" v-model="newGoods.id" /></td>
21
22 <td><label>名称：</label></td>
23 <td><input type="text" v-model="newGoods.name" /></td>
24
25 <td><label>类型：</label></td>
26 <td>
27 <select v-model="newGoods.type">
28 <option value="">---ALL---</option>
29 <option v-for="type in goodsType" v-bind:value="type">{{type}}</option>
30 </select>
31 </td>
32
33 <td><label>售价：</label></td>
34 <td><input type="text" v-model="newGoods.price" /></td>
35
36 <td>
37 <input type="submit" value="查询" v-on:click="GetGoods(newGoods.id)" />
38 <input type="submit" value="更新" v-on:click="UpdateGoods(newGoods.id,newGoods.name,newGoods.type,newGoods.price)" />
39 <input type="submit" value="删除" v-on:click="DelectGoods(newGoods.id)" />
40 </td>
41 </tr>
42 </table>
43 </div>
44 <div>
45 <table v-show="goodsList.length">
46 <tr>
47 <td>行号</td>
48 <td>编号</td>
49 <td>名称</td>
50 <td>类型</td>
51 <td>售价</td>
52 </tr>
53 <tr v-for="(item,index) in goodsList">
54 <td>{{index+1}}</td>
55 <td>{{item.ID}}</td>
56 <td>{{item.Name}}</td>
57 <td>{{item.Type}}</td>
58 <td>{{item.Price}}</td>
59 </tr>
60 </table>
61 </div>
62 </div>
63
64
65 <script type="text/javascript">
66 var vm = new Vue({
67 el: "#demo",
68 data: {
69 goodsType:[],
70 goodsList: [],
71 newGoods: { id: '', name: '', type: '', price: '' }
72 },
73 mounted() {
74 this.GetGoodsType();
75 this.GetAllGoods();
76 },
77 methods:
78 {
79 GetGoodsType: function () {
80 axios.get("../Goods/GetGoodsType").then(
81 (response) => {
82 this.goodsType = [];
83 for (var i = 0; i < response.data.length; i++) {
84 this.goodsType.push(response.data[i]);
85 }
86 },
87 (response) => {
88 alert(response.status);
89 }
90 )
91 .catch(function (response) {
92 console.log(response);
93 });
94 } ,
95 GetAllGoods: function () {
96 axios.get('../Goods/GetAllGoods').then(
97 function (response) {
98 vm.goodsList = [];
99 for (var i = 0; i < response.data.length; i++) {
100 vm.goodsList.push(response.data[i]);
101 }
102 //vm.goodsList.splice(response.data.length);
103 },
104 function (response) {
105 alert(response.status);
106 }
107 )
108 .catch(
109 function (error) {
110 alert(error);
111 }
112 )
113 },
114 GetGoods: function (_id) {
115 if (_id.length > 0) {
116 axios.post("../Goods/GetGoods", { id: _id }).then(
117 (response) => {
118 this.goodsList = [];
119 if (response.data.Code == 500) {
120 this.goodsList.push(response.data.Entity);
121 }
122 else {
123 alert(response.data.Message);
124 }
125
126 },
127 (response) => {
128 alert(response.status);
129 }
130 )
131 .catch(function (response) {
132 console.log(response);
133 });
134 }
135 else {
136 this.GetAllGoods();
137 }
138 },
139 UpdateGoods: function (_id,_name,_type,_price) {
140 axios.post("../Goods/UpdateGoods", { entity: { ID: _id, Name: _name, Type: _type, Price: _price } }).then(
141 (response) => {
142 this.goodsList = [];
143 if (response.data.Code == 500) {
144 for (var i = 0; i < response.data.Entity.length; i++) {
145 this.goodsList.push(response.data.Entity[i]);
146 }
147 }
148 else {
149 alert(response.data.Message);
150 }
151 },
152 (response) => {
153 alert(response.status);
154 }
155 )
156 .catch(function (response) {
157 console.log(response);
158 });
159 },
160 DelectGoods: function (_id) {
161 axios.post("../Goods/DelectGoods", { id: _id }).then(
162 (response) => {
163 this.goodsList = [];
164 if (response.data.Code == 500) {
165 for (var i = 0; i < response.data.Entity.length; i++) {
166 this.goodsList.push(response.data.Entity[i]);
167 }
168 }
169 else {
170 alert(response.data.Message);
171 }
172
173 },
174 (response) => {
175 alert(response.status);
176 }
177 )
178 .catch(function (response) {
179 console.log(response);
180 });
181 }
182 },
183
184 });
185 </script>
186 </body>
187 </html>
在上面的视图中，前端都是用数组进行填充的，值得注意的是vue在数组监听这一块做得并不是特别友好。但也提供了一些非常友好的api。
如果你也采用上述方式更新view，请参阅vue官方提供的关于操作数组
Perorations:
在上面的Demo中，采用的是ASP.NET MVC模板，写完这个Demo之后，感觉如果采用ASP.NET API模板的话就更加具有参考意义，因为如果在项目中使用Vue基本上就可以使前端和后端分离。
以上是个人在写这个Demo之后的一些总结，当然后续也会不定期进行更新。如有描述不当，请@作者修改，谢谢！