.NetCore WebApi结构及前端访问方式

.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));