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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_36497286/article/details/81981676

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

放截图,防止复制。

仓储接口:

仓储实现:

应用服务接口:

应用服务实现:

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("<p>------------</p>");
                for(var i = 0; i < data.result.length; i++){
                    $("#showForm").append("<p style=\"display:block\">"+data.result[i].id+"</p>");
                    $("#showForm").append("<p style=\"display:block\">"+data.result[i].name+"</p>");
                }
                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属性。

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

展开阅读全文

没有更多推荐了,返回首页