Vue在MVC中的进行前后端的交互
Preface：
由于最近在研究前端相关的技术，作为前端非常优秀的框架Vue，个人在学习的过程中遇到一些问题，网上相关资料有限，所以在这这里总结一下个人使用Vue的一点经验，以便后来者借鉴！
官方文档:Vue.js
使用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 : Controller12 ????{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: Goods21 ????????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之后的一些总结，当然后续也会不定期进行更新。如有描述不当，请@作者修改，谢谢！
Vue在MVC中的进行前后端的交互
原文地址：https://www.cnblogs.com/hua66/p/9067974.html