如何高效学习.NetCore WebApi，构建强大的后端服务？

本文共计882个文字，预计阅读时间需要4分钟。

.Net Core WebApi 学习：控制器操作访问地址：api/控制器名称/方法名称示例：action 会省略 [Route(api/[controller])]public class TestController : ControllerBase{ // [Route] 与 [HttpPost] 内都设置了参数对应 public IActionResult action() { return Ok(); }}

.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访问

$.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访问

--与fetch格式类似 --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));

.netCore3.0 WebApi配置跨域访问

• 添加Microsoft.AspNetCore.Cors引用
• 打开Statrup.cs文件

ConfigureServices方法下面添加

services.AddCors(options => { options.AddPolicy("any", builder => { builder.AllowAnyOrigin()//允许所有地址访问 .AllowAnyMethod() .AllowAnyHeader(); //.WithOrigins("")//指定接受访问的地址 //.AllowCredentials()//指定处理cookie 使用AllowAnyOrigin时不可以使用这个 }); });

Configure方法下添加

app.UseCors("any"); app.UseEndpoints(endpoints => { endpoints.MapControllerRoute("default", "api/[controller]/"); endpoints.MapControllerRoute("apiDefault", "api/[controller]/"); endpoints.MapControllers(); });

控制器或方法上添加[EnableCors("any")]标记后即可跨域访问