上一节我们实现了分类菜单的界面，本节我们通过webapi接口来传递并写入数据。
定义Web接口
我们先来回顾下之前的webapi接口：
public class api : ControllerBase
{
[HttpGet]
public string Get()
{
List<Model.Category> categories = BAL.Category.query_all();
return Newtonsoft.Json.JsonConvert.SerializeObject(categories);
}
}事实上这无法称之为接口，因为你无论调用它什么，它返回的都是所有分类数据。
我们期望的web接口应该是可以带参数的，比如：
api?biztype=[biztype]function=[fuction]&p1=x&p2=y&....- biztype代表不同的业务类型，比如分类树、内容、系统设置、权限验证等
- function代表不同的功能，比如增删改查等
- 后面的p1、p2等根据不同功能需要自行扩展
- 当然为了方便起见，这个接口同时支持Get/Post两种方式。
想要实现上述功能，编码上首先要实现的就是：
- 根据当前请求的相应参数；
- 如果是Post方式，还应获得Post的数据；
这里有同学可能不太清楚Get方式和Post方式的区别，详细内容在RFC相关的http协议中都有说明，有想一探究竟的可以去参考。我这里只说最关键的因素：二者最大的区别就是传递数据的长度限制。get只能通过地址的方式向服务器传递参数，由于地址长度有限，所以传递的数据也就有限。具体限度是多少？不同浏览器与不同服务器定义的都不一样，一般是不建议超过1024个字符。而Post则没有这个限制，因为它提交的Body实体是基于数据流的形式传输，发多少都可以。通常我们上传文件用的就是Post。既然如此，那就都用Post呗，干嘛还用Get？也不是不可以，据说有公司就是这么要求的。不过Get的方式相对简单，有的时候为了调试方便，直接在浏览器打参数就可以，而Post则需要特定的工具来模拟才行。所以我一般的原则是看数据流向，上行用Post，下行用Get。
好了，接口定义我们大概清楚了，接下来就是编码。
固定请求参数
前面的biztype和function是固定参数，固定参数我们通过指定函数名称就可以，webapi的路由会自动把固定参数以函数名方式传递给我们，如下图：
public string _(string biztype, string function)
{
string ret = "";
switch (biztype)
{
case "category":
ret = category(function);
break;
}
return ret;
}所以，我们可以通过swtich...case来对api请求进行分流，比如分类方面的调用category函数去处理。
非固定请求参数及Post数据获取
后面的p1、p2是可变参数，对不同的funciton，可能传入的参数会不同，需要做特别的处理。
Post数据的获取同样也需要做特别的处理。
这里我写了个Tools静态类，提供了三个函数，直接调用就可以。
static public class Tools
{
static public int getQueryInt(this HttpRequest request, string key, int dv = -1)
{
int id = dv;
string rid = request.HttpContext.Request.Query[key];
int.TryParse(rid, out id);
if (id <= 0) return dv;
return id;
}
static public string getQuery(this HttpRequest request, string key, string dv = "")
{
string ret = request.HttpContext.Request.Query[key];
if (string.IsNullOrEmpty(ret))
{
ret = dv;
}
return ret;
}
static public string getPostData(this HttpRequest request)
{
string content = "";
System.IO.StreamReader reader = null;
try
{
reader = new System.IO.StreamReader(request.Body, System.Text.Encoding.UTF8);
Task<string> task = reader.ReadToEndAsync();
content = task.Result;
}
catch (Exception ex)
{
}
finally
{
if (reader != null) reader.Dispose();
}
return content;
}
}category业务函数处理
string category(string function)
{
string ret = "";
switch (function)
{
case "get_all":
{
List<Model.Category> categories = BAL.Category.query_all();
ret = Newtonsoft.Json.JsonConvert.SerializeObject(categories);
}
break;
case "insert":
{
string content = Request.getPostData();
Model.Category category = Newtonsoft.Json.JsonConvert.DeserializeObject<Model.Category>(content);
if (category != null)
{
if (BAL.Category.Insert(category) != null)
{
ret = "ok";
}
}
}
break;
case "modify":
{
string content = Request.getPostData();
Model.Category category = Newtonsoft.Json.JsonConvert.DeserializeObject<Model.Category>(content);
if (category != null)
{
if (BAL.Category.Modify(category))
{
ret = "ok";
}
}
}
break;
case "delete":
{
int id = Request.getQueryInt("id");
if (id > 0)
{
if (BAL.Category.Delete(id))
{
ret = "ok";
}
}
}
break;
}
return ret;
}分别对Category表进行增删改查的处理。以上代码逻辑都比较简单，跟Diary.Win类似，就不多讲了，大家直接看代码应该就都懂了。
这样webapi中关于Category的接口就基本做完了。接下来我们回到前端的WASM项目，来实现对接口的调用。
增删改查事件
void CreateNode(MouseEventArgs args)
{
menuStyle = "display:none;";
curCategory = new Model.Category();
curCategory.Id = -1;
curCategory.ParentId = menuTree.SelectedNode.DataItem.Entity.Id;
categoryEditor.toggle();
}
void ModifyNode(MouseEventArgs args)
{
menuStyle = "display:none;";
curCategory = menuTree.SelectedNode.DataItem.Entity;
categoryEditor.toggle();
}
async void DeleteNode(MouseEventArgs args)
{
menuStyle = "display:none;";
string pms = string.Format("id={0}", menuTree.SelectedNode.DataItem.Entity.Id);
string url = Tools.get_api_url("category", "delete", pms);
string category_data = await Http.GetStringAsync(url);
UpdateMenuTree();
}
void SaveCategory()
{
string function = curCategory.Id > 0 ? "update" : "insert";
string post_url = Tools.get_api_url("category", function);
string post_data = Newtonsoft.Json.JsonConvert.SerializeObject(curCategory);
var httpRequestMessage = new HttpRequestMessage
{
Method = HttpMethod.Post, RequestUri = new Uri(post_url), Content = new StringContent(post_data, System.Text.Encoding.UTF8, "application/json")
};
var httpReponseMessage = Http.SendAsync(httpRequestMessage);
UpdateMenuTree();
}这个阶段的代码比较琐碎，不同操作就要对应不同的处理。所谓的前端就是要大量处理这样的事情，我这还没做界面的美化，就已经觉得相当烦躁了。我一直有个偏见，就是编程最大乐趣在于对事物的抽象，然后不断总结，继续抽象，逐渐复用代码，体会那种搭积木的感觉。而我在做前端的时候完全get不到这种乐趣，技术上没有什么难点，无非就是根据不同的用户行为做不同的处理，翻来覆去的判断、验证、调整，往往时间都花在了这好不好看，那个字体再调大些，图片需要都换成浅色系的等等我认为并不重要的事情。花费大量的时间，技术得不到提高、代码很难复用、轮子变换太快...... 总之，我不喜欢做前端，所以我的原则是过得去就行了。如果是自己用那就更不挑了，满足功能就OK了。
本次修改还稍微做了小优化：ContextMenuPanel组件增加了在空白处点鼠标左键把弹出菜单隐藏，CategoryEdit组件的Id输入框设置为只读属性，增加Tools工具类来生成webapi的url等。
最终效果如下：
本节基本完成了数据由浏览器向数据库写入的过程，到此数据流向的任督二脉已经完全打通了。再往后的数据就都是基于此进行扩充了。
至于界面优化，比如操作提示、显示效果、易用性等等，这些导致了整体界面并不好看，实在不愿意弄了，有兴趣的同学可以自己调一下，我就不再深入了。
到了这里，我们的Web项目最难的部分已经完成了，整体进展也基本过半，你坚持下来了吗？跟上的同学冒个泡，给其他人一些信心。接下来，我们将完成这个项目的核心内容，文章内容编辑，下节继续。
---------------------------------------
本教程项目源码已作为开源项目加入到Gitee，代码内容会随教程实时更新，大家有兴趣的话可以关注我，以获得最及时的更新。私信：
私人日记 可以获取相关链接；
大家阅读过程中有哪些看不懂或未尽兴的地方，可以在评论区留言，我会先记下来在后续的教程中找机会再说。
教程有帮助的话请大家帮忙关注、转发、扩散，能不能开专栏还需要你们的支持！