上一节我们实现了分类菜单的界面，本节我们通过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，代码内容会随教程实时更新，大家有兴趣的话可以关注我，以获得最及时的更新。私信：

私人日记 可以获取相关链接；

大家阅读过程中有哪些看不懂或未尽兴的地方，可以在评论区留言，我会先记下来在后续的教程中找机会再说。

教程有帮助的话请大家帮忙关注、转发、扩散，能不能开专栏还需要你们的支持！