Vue在MVC中的进行前后端的交互
2024-04-10 04:59:48
Preface：
由于最近在研究前端相关的技术，作为前端非常优秀的框架Vue，个人在学习的过程中遇到一些问题，网上相关资料有限，所以在这这里总结一下个人使用Vue的一点经验，以便后来者借鉴！
官方文档:Vue.js
使用Vue在ASP.NET MVC中进行前后端交互
在阅读下面的文章之前你需要先了解一下Vue官方推荐的前后端交互的插件：
1.resource（官方在2.0版本之后取消了对此插件的维护）
2.axios
注：这里使用的都是异步的插件，因为这样才会在你的项目中具有使用意义，当然你也可以用其它的js库，如jQuery、Fetch等等...
Instance:
Controller
using Demo.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace Demo.Controllers
{
//[RoutePrefix("api/Goods")]
public class GoodsController : Controller
{
List<GoodsEntity> goosdList = new List<GoodsEntity>
{
new GoodsEntity(){ ID=,Name="水",Type=,Price=},
new GoodsEntity(){ ID=,Name="牛奶",Type=,Price=},
new GoodsEntity(){ ID=,Name="面包",Type=,Price=}
}; // GET: Goods
public ActionResult Index()
{
return View();
} public ActionResult Check()
{
return View();
} [HttpGet]
public JsonResult GetGoodsType()
{
List<int> goodsType = new List<int>();
foreach (var item in goosdList)
{
if (!goodsType.Contains(item.Type))
{
goodsType.Add(item.Type);
}
}
return Json(goodsType, JsonRequestBehavior.AllowGet);
} [HttpGet]
public JsonResult GetAllGoods()
{
return Json(goosdList, JsonRequestBehavior.AllowGet);
} [HttpPost]
public JsonResult GetGoods(int id)
{
var entity = goosdList.Where(g => g.ID == id).FirstOrDefault();
if (entity != null)
{
return Json(new ReturnJsonInfo(, "success!", entity));
}
return Json(new ReturnJsonInfo(, "error!", null));
} [HttpPost]
public JsonResult UpdateGoods(GoodsEntity entity)
{
if (entity!=null)
{
var goodsEntiy = goosdList.FirstOrDefault(g => g.ID == entity.ID);
if (goodsEntiy!=null)
{
goodsEntiy = entity;
return Json(new ReturnJsonInfo(, "success!", goosdList));
}
goosdList.Add(entity);
return Json(new ReturnJsonInfo(, "success!", goosdList));
}
return Json(new ReturnJsonInfo(, "error!",null));
} [HttpPost]
public JsonResult DelectGoods(int id)
{
var entity = goosdList.Where(g => g.ID == id).FirstOrDefault();
if (entity != null)
{
goosdList.Remove(entity);
return Json(new ReturnJsonInfo(, "success!", goosdList));
}
return Json(new ReturnJsonInfo(, "error!",null));
} }
}
在上面的控制器中加载了一些示例数据，并且都是以json的格式返回前端，这样前端就可以直接使用这些数据。
注：控制器返回至前端的json中，上面使用 “ReturnJsonInfo” 对象序列化进行返回， “ReturnJsonInfo” 代码如下。
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace Demo.Models
{
public class ReturnJsonInfo
{
public int Code { get; set; }
public string Message { get; set; }
public object Entity { get; set; }
public ReturnJsonInfo(int code, string message,object obj)
{
this.Code = code;
this.Message = message;
this.Entity = obj;
}
}
}
View
1.前端采用resource插件
@{
ViewBag.Title = "Goods IndexPage";
}
<script type="text/javascript" src="~/Resources/Scripts/vue.js"></script>
<script type="text/javascript" src="~/Resources/Scripts/vue-resource.js"></script>
<h2>Index</h2>
<div id="demo">
<table>
<tr>
<td><label>编号：</label></td>
<td><input type="text" v-model="newGoods.id" /></td>
<td><label>名称：</label></td>
<td><input type="text" v-model="newGoods.name" /></td>
<td><label>类型：</label></td>
<td><input type="text" v-model="newGoods.type" /></td>
<td><label>售价：</label></td>
<td><input type="text" v-model="newGoods.price" /></td>
<td><input type="submit" value="查询" v-on:click="GetGoods(newGoods.id)" /></td>
</tr>
</table>
<table v-show="goodsList.length">
<tr>
<td>编号</td>
<td>名称</td>
<td>类型</td>
<td>售价</td>
</tr>
<tr v-for="item in goodsList">
<td>{{item.ID}}</td>
<td>{{item.Name}}</td>
<td>{{item.Type}}</td>
<td>{{item.Price}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
var view = new Vue(
{
el: "#demo",
data: {
goodsList: [],
newGoods: {id:'',name:'',type:'',price:''}
},
created: function () {
this.InIt();
},
methods: {
InIt: function () {
//初始化
this.GetAllGoods();
},
GetAllGoods: function () {
var _self = this;
_self.$http.get("../Goods/GetAllGoods").then(
// Lambda写法
(response) => {
//successCallback
for (var i = 0; i < response.data.length; i++) {
_self.goodsList.push(response.data[i]);
}
} ,
(response) => {
//errorCallback
}
);
},
GetGoods: function (_id) {
var _self = this;
_self.goodsList = [];
if (_id.length > 0) {
_self.$http.post("../Goods/GetGoods", { id: _id }).then(
// 传统写法
function (response) {
//successCallback
if (response.data.Code == 500) {
_self.goodsList.push(response.data.Entity);
}
else {
alert(response.data.Message);
}
},
function (response) {
//errorCallback
}
)
.catch(function (response) {
console.log(response);
});
}
else {
_self.GetAllGoods();
}
}
}
}
);
</script>
2.前端采用axios插件
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Check</title>
<script type="text/javascript" src="~/Resources/Scripts/vue.js"></script>
<script type="text/javascript" src="~/Resources/Scripts/axios.min.js"></script>
</head>
<body>
<div id="demo">
<div>
<table>
<tr>
<td><label>编号：</label></td>
<td><input type="text" v-model="newGoods.id" /></td>
<td><label>名称：</label></td>
<td><input type="text" v-model="newGoods.name" /></td>
<td><label>类型：</label></td>
<td>
<select v-model="newGoods.type">
<option value="">---ALL---</option>
<option v-for="type in goodsType" v-bind:value="type">{{type}}</option>
</select>
</td>
<td><label>售价：</label></td>
<td><input type="text" v-model="newGoods.price" /></td>
<td>
<input type="submit" value="查询" v-on:click="GetGoods(newGoods.id)" />
<input type="submit" value="更新" v-on:click="UpdateGoods(newGoods.id,newGoods.name,newGoods.type,newGoods.price)" />
<input type="submit" value="删除" v-on:click="DelectGoods(newGoods.id)" />
</td>
</tr>
</table>
</div>
<div>
<table v-show="goodsList.length">
<tr>
<td>行号</td>
<td>编号</td>
<td>名称</td>
<td>类型</td>
<td>售价</td>
</tr>
<tr v-for="(item,index) in goodsList">
<td>{{index+1}}</td>
<td>{{item.ID}}</td>
<td>{{item.Name}}</td>
<td>{{item.Type}}</td>
<td>{{item.Price}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#demo",
data: {
goodsType:[],
goodsList: [],
newGoods: { id: '', name: '', type: '', price: '' }
},
mounted() {
this.GetGoodsType();
this.GetAllGoods();
},
methods:
{
GetGoodsType: function () {
axios.get("../Goods/GetGoodsType").then(
(response) => {
this.goodsType = [];
for (var i = 0; i < response.data.length; i++) {
this.goodsType.push(response.data[i]);
}
},
(response) => {
alert(response.status);
}
)
.catch(function (response) {
console.log(response);
});
} ,
GetAllGoods: function () {
axios.get('../Goods/GetAllGoods').then(
function (response) {
vm.goodsList = [];
for (var i = 0; i < response.data.length; i++) {
vm.goodsList.push(response.data[i]);
}
//vm.goodsList.splice(response.data.length);
},
function (response) {
alert(response.status);
}
)
.catch(
function (error) {
alert(error);
}
)
},
GetGoods: function (_id) {
if (_id.length > 0) {
axios.post("../Goods/GetGoods", { id: _id }).then(
(response) => {
this.goodsList = [];
if (response.data.Code == 500) {
this.goodsList.push(response.data.Entity);
}
else {
alert(response.data.Message);
}
},
(response) => {
alert(response.status);
}
)
.catch(function (response) {
console.log(response);
});
}
else {
this.GetAllGoods();
}
},
UpdateGoods: function (_id,_name,_type,_price) {
axios.post("../Goods/UpdateGoods", { entity: { ID: _id, Name: _name, Type: _type, Price: _price } }).then(
(response) => {
this.goodsList = [];
if (response.data.Code == 500) {
for (var i = 0; i < response.data.Entity.length; i++) {
this.goodsList.push(response.data.Entity[i]);
}
}
else {
alert(response.data.Message);
}
},
(response) => {
alert(response.status);
}
)
.catch(function (response) {
console.log(response);
});
},
DelectGoods: function (_id) {
axios.post("../Goods/DelectGoods", { id: _id }).then(
(response) => {
this.goodsList = [];
if (response.data.Code == 500) {
for (var i = 0; i < response.data.Entity.length; i++) {
this.goodsList.push(response.data.Entity[i]);
}
}
else {
alert(response.data.Message);
}
},
(response) => {
alert(response.status);
}
)
.catch(function (response) {
console.log(response);
});
}
},
});
</script>
</body>
</html>
在上面的视图中，前端都是用数组进行填充的，值得注意的是vue在数组监听这一块做得并不是特别友好。但也提供了一些非常友好的api。
如果你也采用上述方式更新view，请参阅vue官方提供的关于操作数组方法
Perorations:
在上面的Demo中，采用的是ASP.NET MVC模板。在写View部分的时候感觉确实比较方便，不需要再去写获取元素的代码，只需要把数据绑定至元素上，关注数据的变动就可以了。
当然你也可以选择Razor语法，只不过那样看起来并不是很友善。
以上是个人在写这个Demo之后的一些总结。如有描述不当，请@作者修改，谢谢！
最新文章
- fillStyle径向渐变
- linux文件拼接命令 paste
- 高并发下MySQL出现checking permissions
- Introduction of Open CASCADE Foundation Classes
- IntelliJ IDEA 常用设置讲解1
- C++之路进阶——bzoj1455（罗马游戏）
- HDU_2017——统计数字字符出现的个数
- nyoj 325 zb的生日（dfs）
- C++ map multimap
- linux centos下安装dokuwiki
- 【noip模拟】Fantasia
- WPF自学入门（十一）WPF MVVM模式Command命令
- hihoCoder 1596 : Beautiful Sequence
- Java小问题
- Xamarin Essentials应用教程文件系统FileSystem
- Linux上 发布.Net Core
- postgreSql——时区问题
- 三种文本特征提取（TF-IDF/Word2Vec/CountVectorizer）及Spark MLlib调用实例（Scala/Java/python）
- Linux性能优化之内存优化(二)
- POJ 1180 - Batch Scheduling - [斜率DP]