《ABP框架入门——第二章（2）》查询Demo添加新增，修改，删除。附前端调用API Demo

关于开发流程，在上一篇博客已经阐明，下面附上我的代码，供参考，关于流程不做赘述。

放截图，防止复制。

仓储接口：

仓储实现：

应用服务接口：

应用服务实现：

ok，然后运行查看API。

当然可以直接在API中进行测试。

展开API，点击Try it out，点击Execute，可以看到后台返回的数据。

对应我数据库中的数据（之前手动添加的）：

接下来是前端调用api接口，由于vue短时间内我不好学着做，所以这里用了JQuery简单实现了一个，凑合着用，主要是测试调用API，看看能否正常工作。这里用的服务器是IIS，如何配置可以百度，或者你用Tomcat也行。效果如下：

查询：

function queryAll(){
        $.ajax({
            url: 'http://localhost:21021/api/services/app/Person/GetAllPerson',
            dataType : 'JSON',
            success : function(data){
                debugger;
                $("#showForm").append("
------------
");
                for(var i = 0; i < data.result.length; i++){
                    $("#showForm").append("
"+data.result[i].id+"
");
                    $("#showForm").append("
"+data.result[i].name+"
");
                }
                number = i;
            }
        });
    }

效果

创建：

function CreatePerson(){
        debugger;
        var input = $("#name").val();
        var data = {};
        data.name = input;
        data.id = number;
        if(input == null || input =="" || input == undefined){
            alert("请输入姓名！");
        } else {
                $.ajax({
                    url : 'http://localhost:21021/api/services/app/Person/CreatePerson',
                    data : JSON.stringify(data),
                    contentType : 'application/json',
                    type : 'POST',
                    success : function(){
                        alert("创建成功");
                        queryAll();
                    }
                });
        }
    }

 效果：

因为做的很粗糙，注意图上的分隔符，是每次操作的结果分割符。

 

删除：

function DeletePerson(){
        var id = $("#id").val();
        if(id == null || id =="" || id == undefined){
            alert("请输入ID！");
        } else {
            $.ajax({
                url : 'http://localhost:21021/api/services/app/Person/DeletePerson?id=' + id,
                type : 'delete',
                success : function(){
                    alert("删除成功");
                    queryAll();
                }
            });
        }
    }

效果：

修改暂时不写了，大同小异。

 

总结：

一个需要注意的点在于，要学会查看API文档，才能发出正确的请求，比如我一开始删除是用POST请求，一直响应404，后来查看API文档发现请求类型是DELETE，修改之后才好。可以看到下图，显示了每一个请求的类型，对应ajax函数的type属性。

前端文档我会发到群里，觉得丑自己可以做一下哈哈