.NetCore WebApi 学习 -- 控制器结构及前端访问方式
控制器
//访问的地址api/控制器名称/方法名称;action一般会省略
[Route("api/[controller]/[action]")]
public class TestController : ControllerBase
{
//[Route]与[HttpPost]内都设置了参数相当于这个方法有两个请求地址
//两个地址都是接在类上定义的地址后面使用
[Route("insert/{参数1}")]//{}大括号内为自定义参数，也可以只设置常量作为访问地址
[HttpPost("insert/{参数1}")]
//地址上设置了参数后直接在地址后增加需要传递参数即可，否则需要另外传递接口所需要的参数
public async Task<ActionResult<Md5Test>> PostMd5Test(string 参数1,Md5Test md5Test)
{
//将传来的数据进行处理
_context.Md5Test.Add(md5Test);
await _context.SaveChangesAsync();
return CreatedAtAction("GetMd5Test", new { id = md5Test.Id }, md5Test);//返回数据给客户端
}
[HttpGet("Count")]
public PageModels GetPageContent()
{
int Md5TestsCount = _context.Md5Test1.Count();
PageModel.TableCount = Md5TestsCount;
PageModel.PageCount = (int)Math.Ceiling((double)Md5TestsCount / 20);
return PageModel;
}
[HttpGet("Page/{PageIndex}")]
public async Task<ActionResult<IEnumerable<Md5Test1>>> GetMd5TestPage(int PageIndex = 0)
{
return await _context.Md5Test1.Skip(PageIndex * PageModel.PageSize).Take(PageModel.PageSize).ToListAsync();
}
}
前端访问方式
使用Ajax访问
const item = {
Key: "AAAAAA",
Value: "36d04a9d74392c727b1a9bf97a7bcbac"
};
$.ajax({
url: 'api/Test/GetModel',
type:"get",
data: { Id: 1},
success: function(a) {
console.log(a);
}
});
$.ajax({
url: 'api/Test/GetModel/1',
type:"get",
success: function(a) {
console.log(a);
}
});
$.ajax({
url: 'api/Md5Test/insert',
type: "POST",
async: true,
dataType: "json",
data: item,
contentType: "application/x-www-form-urlencoded",
success: function(a) {
console.log(a);
}
});
使用fetch访问
//fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。
//fetch不是ajax的进一步封装，而是原生js。
//fetch函数就是原生js，没有使用XMLHttpRequest对象。
const item = {
Key: "AAAAAA",
Value: "36d04a9d74392c727b1a9bf97a7bcbac"
};
var url = `api/Test/insert/${参数}`;//请求地址为api/控制器名称/定义的标识/参数；具体视自身定义内容而定
//var postReq = new Request(url, {method: 'POST'});//fetch跟随的括号内的内容可以使用Request参数化
fetch(url, {
method: 'POST',//指定 POST HTTP 操作
headers: {//HTTP 请求标头，分别指定接收和发送的媒体类型，此处将两个标头都设置为 application/json
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item)//指定请求正文的 JSON 表示形式//json格式发送接口所需要的数据
})
.then(response => response.json())//接口访问失败时执行
.then(response => {
Page = response.data;//接口返回成功时执行//返回内容都在response.data中
})
.catch(error => console.error('Unable to add item.', error));//接口访问出错时执行
fetch(`${uri}/Count`)
.then(response => response.json())
.then(function (date1) {
--返回内容在date1中，可在此处处理
})
.catch(error => console.error('Unable to get items.', error));
使用VUE-axios访问
VUE-axios与fetch结构类似
const item = {
Key: "AAAAAA",
Value: "36d04a9d74392c727b1a9bf97a7bcbac"
};
//get访问
axios.get(`${uri}/Page/${self.PageIndex}`)//请求地址
.then(response => (self.sites = response.data))//结果处理//返回结果全部早response.data中
.catch(error => console.error('Unable to get items.', error));//错误处理
//post访问
axios({
method: 'post',//接口访问方式GET\POST
url: `${uri}/insert`,//接口访问地址
data: item//接口需要的参数
})
.then(response => (console.log(response.data)))
.catch(error => console.error('Unable to get items.', error));