前言
3个月前接手的 java web 项目前几天交付验收成功了，作为该项目开发组的负责人，在苦苦加班2个多月后得到公司及客户的肯定，心里那个叫高兴啊。
所做的 java web 的整体架构非常简单易懂，整个网站以前端为主体，通过ajax与后台数据交互，前后端低耦合，有些面向服务架构的味道。因为博主C#做的比较多，所以也借机用相同的方式玩一玩asp.net。
这篇博客主要总结了 Asp.net WebApi 项目的前后端互传json以及上传文件的方法。
主要思路
在面向服务的架构模式中，整个网站前后端耦合度低，将前端作为主体，通过ajax与后台交换json数据。
上传文件通过input[type=‘file’]来获取file，并通过FormData传给后台。
开始
新建空web项目，添加 Web Api 引用
修改路由规则。打开/Appstart/WebApiConfig.cs，添加{action}段
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{action}/{id}",
defaults: new { id = RouteParameter.Optional }
);
添加Controller。在Controllers文件夹里新建一个空的ApiController,取名为 UserController
修改UserController.cs代码为如下代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
namespace CommonAction.Controllers
{
public class UserController : ApiController
{
public JObject Func1([FromBody]JObject postJson)
{
postJson.Add("success", true);
return postJson;
}
}
}
编写前端代码。右击项目名->添加->Html页，并将新建的html页面的代码替换为下面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
name:<input type="text" id="name"><br />
age:<input type="text" id="age"><br />
<input type="button" value="submit" id="btn" onclick="f1()" />
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
function f1() {
var postData = {
name: $("#name").val(),
age: $("#age").val()
};
$.post("api/User/Func1", postData, function (resp) {
console.log(resp);
});
}
</script>
</body>
</html>
将HtmlPage1设置为起始页面，F5键运行。待网页加载完毕后，按f12打开浏览器console，填写name以及age，点击submit按钮。可以看到浏览器console中的返回信息。
可以看出，代码运行的很成功。
网站的所有数据交换，都可以通过这样的方式进行：前端构造json数据，post到后台，后台接收后处理计算，并构造json返回。
但还有一种情况是需要进行文件交互。下载文件比较简单，这里只说一下上传。
文件上传
首先在html页面增加input[type=‘file’];
pic:<input type="file" id="pic">
html的button事件更换
<input type="button" id="submit" value="submit" onclick="f2()">
<script>
function f2() {
var formData = new FormData();
formData.append("name", $("#name").val());
formData.append("age", $("#age").val());
if ($("#pic")[0].files.length > 0) {
formData.append("pic", $("#pic")[0].files[0]);
}
$.ajax({
method: "POST",
url: "api/User/Func2",
data: formData,
dataType: "json",
contentType: false, //传文件必须！
processData: false, //传文件必须！
success: function (resp) {
console.log(resp);
},
});
}
</script>
增加后台代码
public JObject Func2()
{
JObject returnJson = new JObject();
var request = System.Web.HttpContext.Current.Request;
var formData = request.Form;
string name = formData["name"];
string age = formData["age"];
if (request.Files.Count > 0)
{
var file = request.Files[0];
var savePath = AppDomain.CurrentDomain.SetupInformation.ApplicationBase + "uploadImgs/";
if (!Directory.Exists(savePath)) Directory.CreateDirectory(savePath);
file.SaveAs(savePath + file.FileName);
}
returnJson.Add("name", name);
returnJson.Add("age", age);
returnJson.Add("success", true);
return returnJson;
}
运行效果如图
打开项目文件夹，可以看到图片被成功保存。
总结
通过这两种ajax，即可完成前后端几乎所有的数据交换工作。使用这种架构，可以很好的分离前后端的工作，代码结构更清晰，写出来漂亮，写的也舒服。
若有不足不吝赐教，感谢。