关于开发流程,在上一篇博客已经阐明,下面附上我的代码,供参考,关于流程不做赘述。
放截图,防止复制。
仓储接口:
仓储实现:
应用服务接口:
应用服务实现:
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属性。
前端文档我会发到群里,觉得丑自己可以做一下哈哈