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

.NetCore WebApi结构及前端访问方式的更多相关文章

  1. 使用react全家桶制作博客后台管理系统 网站PWA升级 移动端常见问题处理 循序渐进学.Net Core Web Api开发系列【4】:前端访问WebApi [Abp 源码分析]四、模块配置 [Abp 源码分析]三、依赖注入

    使用react全家桶制作博客后台管理系统   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基 ...

  2. 分布式结构化存储系统-HBase访问方式

    分布式结构化存储系统-HBase访问方式 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. HBase提供了多种访问方式,包括HBase shell,HBase API,数据收集组件( ...

  3. 面试题:JVM在Java堆中对对象的创建、内存结构、访问方式

    一.对象创建过程 1.检查类是否已被加载 JVM遇到new指令时,首先会去检查这个指令参数能否在常量池中定位到这个类的符号引用,检查这个符号引用代表的类是否已被加载.解析.初始化,若没有,则进行类加载 ...

  4. NetCore WebApi使用Jwtbearer实现认证和授权

    1. 什么是JWT? JWT是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对 ...

  5. JWT With NetCore WebApi

    1 什么是JWT? JWT是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对象 ...

  6. .NetCore WebApi——Swagger简单配置

    在前后端分离的大环境下,API接口文档成为了前后端交流的一个重点.Swagger让开发人员摆脱了写接口文档的痛苦. 官方网址:https://swagger.io/ 在.Net Core WebApi ...

  7. .NetCore WebApi + Vue +MySql搭建博客

    因为我是一直写C#的,所以最近闲暇时间一直在学习.NET Core,该博客的后端使用的就是.NET Core WebApi然后加前端Vue. 首先后端.NET Core搭的框架是一个仓储层+服务层+A ...

  8. ADO.NET编程之美----数据访问方式(面向连接与面向无连接)

    最近,在学习ADO.NET时,其中提到了数据访问方式:面向连接与面向无连接.于是,百度了一下,发现并没有很好的资料,然而,在学校图书馆中发现一本好书(<ASP.NET MVC5 网站开发之美&g ...

  9. netcore webapi帮助文档设置

    如何建 .netcore webapi 项目这个就不说了,这个都没有没必要看下去. 我这里是.netcore 2.0,虽然没测过1.0的,但想来差不多. 1.Nuget Packages安装,使用程序 ...

随机推荐

  1. python学习-69 包装和授权

    包装 1.二次加工标准类型(包装) class List(list): def append(self, a_objcet): if type(a_objcet) is str: super().ap ...

  2. Mac上go的下载安装教程

    mac上go的下载安装教程 官网https://golang.google.cn/dl/下载,安装 环境变量配置 参考https://www.jianshu.com/p/5c1873eaf3ca Ba ...

  3. spring源码解析前瞻

    很多人有疑问:为什么要读源码?读源码有什么用?我也一直问自己这些问题,读源码非常枯燥,工作中又用不到,慢慢的自己读源码越发现自己知识的不足,无法把知识串起来,形成知识体系.从单系统中常用的Spring ...

  4. 二分法在JavaScript中的应用实例

    前言:原来一直对算法和数据结构望而却步,总觉得前端可能对这块要求不用那么高,但是随着开发经验的增长以及阅历的提升,发现算法和数据结构还是相当重要的,在一些复杂功能的研发中都可以看得到它们的身影.要想提 ...

  5. extend Thread 和 implements Runnable

    原文地址:extend Thread 和 implements Runnable 一个Thread的实例只能产生一个线程 or: 同一实例(Runnable实例)的多个线程 look: public ...

  6. idea全局护眼色绿豆沙

    1.settings->plugins->BackgroundImage 2.在导航栏选择Help->FindAction 3.set background image 4.选择图片 ...

  7. text-overflow 全兼容

    text-overflow 全兼容 text-overflow 这个CSS属性用于设置或检索是否使用一个省略标记(...)标示对象内文本的溢出.比起在后台用程序截断文本再附上省略标记的做法,用CSS来 ...

  8. HTML的基本概念

    HTML语言是一种纯文本类.依靠解释的方式执行的标记语言,它是Internet上用于编写网页的主要语言.用HTML编写的超文本文件称为HTML文件,也是标准的纯文本文件. 当今构成网页文档主要是用HT ...

  9. BIN文件合并烧写

    可以实现将Bootloader和Application合并烧写 使用UBIN.exe工具或者J-Flash工具 UBIN工具 选择Bootloader源文件 添加Bootloader源文件 选择App ...

  10. 使用企业证书给iOS应用重签

    来源:https://github.com/sailtsao/iReSign 这里有个开源的签名工具,已经修改为支持dylib frameworks等的签名了,使用这个签名不会出现任何问题 iReSi ...