LaravelJSON API简介

JSON API最初由Yehuda Katz于2013年5月起草,并于2015年5月达到稳定,其目的是使API调用高效。您可以根据需要获取数据,随着需求的变化添加或删除属性或关系。这使得进行API调用时所需的数据量和往返次数最小化。{json:api接口} JSON API文档与任何其他API格式一样工作,您向端点发送请求并接收文档。jsonapi规范定义了资源的结构。此结构有助于规范化您使用API的方式。 例如,当您通过简单的GET请求调用资源articles时。 1GET /articles HTTP/1.12Accept: application/vnd.api+json 您收到的响应应该是这样的: 1// ... 2{ 3\"type\": \"articles\", 4\"id\": \"1\", 5\"attributes\": { 6\"title\": \"Rails is Omakase\" 7}, 8\"relationships\": { 9\"author\": {10\"links\": {11\"self\": \"http://example.com/articles/1/relationships/author\",12\"related\": \"http://example.com/articles/1/author\"13},14\"data\": {15\"type\": \"people\",16\"id\": \"9\"17}18}19},20\"links\": {21\"self\": \"http://example.com/articles/1\"22}23} // ... 似乎足够简单。作者关系包括与作者关系本身的一个链接和关于作者关系的一些基本信息。使用文档中的链接,您可以检索有关资源的信息。 但这只是表面现象。JSON API有许多特性,使其易于使用。复合文档 为了减少HTTP请求的数量,服务器可以允许响应包括相关资源和请求的主要资源。这种响应称为\"复合文档\"。 复合文档是一种包含包含关系数据的资源。例如,在请求一篇如前所示的文章时,它可能包含作者的数据,这样您就不需要第二次调用来获取文章的作者了。除非对特定端点进行了编程,否则获取要一次性使用的资源的完整数据是闻所未闻的。在服务器端,这样的请求很容易缓存和失效。 只要看一下这个返回一组1文档的示例。 1{ 2\"data\": [{ 3\"type\": \"articles\", 4\"id\": \"1\", 5\"attributes\": { 6\"title\": \"JSON API paints my bikeshed!\" 7}, 8\"links\": { 9\"self\": \"http://example.com/articles/1\"10},11\"relationships\": {12\"author\": {13\"links\": {14\"self\": \"http://example.com/articles/1/relationships/author\",15\"related\": \"http://example.com/articles/1/author\"16},17\"data\": {18\"type\": \"people\",19\"id\": \"9\"20}21},22\"comments\": {23\"links\": {24\"self\": \"http://example.com/articles/1/relationships/comments\",25\"related\": \"http://example.com/articles/1/comments\"26},27\"data\": [{28\"type\": \"comments\",29\"id\": \"5\"30}, {31\"type\": \"comments\",32\"id\": \"12\"33}]34}35}36}],37\"included\": [{38\"type\": \"people\",39\"id\": \"9\",40\"attributes\": {41\"first-name\": \"Dan\",42\"last-name\": \"Gebhardt\",43\"twitter\": \"dgeb\"44},45\"links\": {46\"self\": \"http://example.com/people/9\"47}48}, {49\"type\": \"comments\",50\"id\": \"5\",51\"attributes\": {52\"body\": \"First!\"53},54\"relationships\": {55\"author\": {56\"data\": {57\"type\": \"people\",58\"id\": \"2\"59}60}61},62\"links\": {63\"self\": \"http://example.com/comments/5\"64}65}, {66\"type\": \"comments\",67\"id\": \"12\",68\"attributes\": {69\"body\": \"I like XML better\"70},71\"relationships\": {72\"author\": {73\"data\": {74\"type\": \"people\",75\"id\": \"9\"76}77}78},79\"links\": {80\"self\": \"http://example.com/comments/12\"81}82}]83} 如果您查看included属性,您就会看到本文的所有相关资源。每个包含的文档都有一个type属性,该属性定义了返回的资源类型和指向文档终结点的链接。 如果仅通过id和type引用article中的author关系,并从included标记加载相关的people资源,可能会感到奇怪。但想象一下,当有多篇文章引用同一个author时,该文档在included数据中只包含一次引用的people。效率很高!包含相关资源 在上面的示例中,服务器包含响应中的所有关系,但您可能不希望默认情况下这样做,因为这会使响应有点膨胀。因此,规范提供了一种方法来指定响应中应包含哪些关系。 例如,如果您只需要包含author关系,则可以使用include请求参数调用端点。这将告诉服务器只发送带有响应的指定关系。 1GET>2Accept: application/vnd.api+json 如果需要多个关系,请用逗号(,)分隔这些关系。 在定义包含时,可以更进一步地包含嵌套关系。例如,您想要comments,在comments的authors中,您可以只包含comments.author: 1GET>2Accept: application/vnd.api+json 这种灵活性使得获取正确的资源变得轻而易举,允许您根据需要调整结果。稀疏字段集 当您使用复合文档时,您的请求可能会变得很大、很快。尤其是当包含的关系包含大量数据时。大多数情况下,您不需要在资源中定义每一个属性,而只需要诸如作者姓名之类的内容。JSON API为此用例提供稀疏字段集。 您可以通过设置fields请求参数来指定获取的字段。格式为fields[TYPE],因此,您可以按资源类型指定所需的字段。 1GET /articles?include=author&fields[articles]=>2Accept: application/vnd.api+json 此调用可以包括articles资源中的title和body字段以及people资源中的name字段。其他功能 服务器可以实现规范定义的其他一些功能。这些功能包括:包含、排序、分页和筛选。排序 如果服务器支持,您可以使用sort请求参数对记录进行排序。排序默认为升序,要降序排序,可以在字段前面加上-。 1GET>2Accept: application/vnd.api+json分页 如果服务器支持分页,它将提供一些额外的元属性和分页信息。服务器可以决定如何分页,可以是通过偏移量,也可以是直接页码。一个实现示例使用指向其他页面的所需链接,并在meta标记中包含一些元数据。 1{ 2links: { 3first:> 4last:> 5prev:> 6next: null 7}, 8meta: { 9current_page: 262,10from: 3916,11last_page: 262,12per_page: 15,13to: 3924,14total: 392415}16}筛选 规范说明很少

CSS无头WordPress到底有多合适?

我想知道无头WordPress会在哪里登陆。\"headless\"指的是只使用WordPress管理,通过WordPress restapi构建面向用户的站点,而不是传统的WordPress主题结构?WordPress的未来?还是相对利基?需求在哪里?当然,对它有需求。我知道很多人都这么做。例如,Gatsby有一个gatsby-source-wordpress插件,它允许您以使用wordpressrestapi的方式从WordPress站点获取内容,并将其缓存为GraphQL,以便在React-power...

日期:2021-06-24 01:15:34 浏览:595

CSS制作带有粘性页眉和页脚的表格变得更容易了

不久前,当我在博客中看到HTML中的粘性页眉和页脚时,一个表同时有粘性页眉和粘性第一列。在它里面,我从来没有在任何、或元素上使用position: sticky,因为即使Safari和Firefox可以做到这一点,Chrome也做不到。但是它可以做表格单元格,比如和,这是一个相当不错的解决办法。好吧,这已经改变了。我通过Twitter听说Chrome在v91中\"重写了表格\"。https://t.co/vTBplXWWtT我看到它掉了下来,升级了,然后做了一个快速测试。嘿,看看有粘性的表格页眉和页脚。@C...

日期:2021-06-24 02:00:01 浏览:914

CSS技巧编年史XXXX

只是我最近做的一些非现场工作的一个小链接汇总。就像我习惯的那样。DevJourney播客#151 Chris Coyier从陶瓷到CSS技巧和代码笔\"Chris带我们从玩他的第一个C64到他的陶瓷文学学士,再回到web开发。我们讨论了他在这一过程中的不同立场,以及他们是如何缓慢但肯定地引导他走向web开发的。我们浏览了CSS技巧的创造和娱乐,在开放中学习,以及美好的一天是什么样子。Podrocket Podcast火箭手术:Kaelan和Chris Coyier比较笔记我被要求删除这里嵌入的音频,如果你想...

日期:2021-06-24 02:00:03 浏览:840

CSS使用子资源完整性保护您的网站

当您从外部服务器加载文件时,您相信您请求的内容是您期望的内容。由于您不自己管理服务器,因此您依赖于另一个第三方的安全性,从而增加了攻击面。信任第三方并不是天生的坏事,但它肯定应该在网站安全的背景下加以考虑。一个真实的例子这不是纯粹的理论危险。忽视潜在的安全问题可能而且已经造成严重后果。2019年6月4日,Malwarebytes宣布他们在网站上发现了一个恶意的略读程序NBA.com. 由于Amazon S3存储桶受损,攻击者能够修改JavaScript库以窃取客户的信用卡信息。值得担心的不仅仅是JavaSc...

日期:2021-06-24 02:00:03 浏览:742

CSS联合的可能性

这是首字母缩略词RSS中不是形容词的一个词。非常简单联合更新:Lol这里有两个错误。RSS是首字母缩写而不是首字母缩写,\"Really\"是副词而不是形容词。RSS不仅仅是RSS阅读器。尽管如此,如果我不喜欢RSS阅读器。它是关于把内容放在一种设计成可移植的格式。内容的API并不是一个隐喻,这就是它的字面含义。RSS一直在我的脑海中,因为它就像我的日报,但我敢打赌它并不是人们关注的最高峰,甚至是开发者。尽管如此,它还是受到了一点关注,因为谷歌在androidchrome中引入了一个\"following\...

日期:2021-06-24 03:00:02 浏览:575

CSS在开放细节元素上添加背景

关于元素有一点奇怪,那就是,当它打开时,并不总是100%清楚该元素内部的内容和不内部的内容。我不是说总是重要,或者说它是一个特别难解决的问题,我只是注意到它最近出现在我身上。这里有一个直观的例子:这里的文本在里面,什么不是?这个解决方案是…CSS。把的样式设计得有点独特,这样问题就解决了。即使你希望排版是一样的,或者你不想任何独家风格,直到被打开,这仍然是可能的。使用alpha透明填充,您甚至可以确保更深的嵌套保持清晰。对于只插入内联内容的<详细信息>(如\"spoiler\"UI或其他内容),...

日期:2021-06-24 03:00:04 浏览:740

CSS容器查询的聚宝盆

我不知道是什么原因,但是我的feed在过去的几周里充斥着关于CSS容器查询的文章。有关集装箱查询的热议实际上始于去年12月,当时米丽亚姆•苏珊娜(Miriam Suzanne)发布了一份提案(采纳了大卫•巴隆的提案),但3月底,Una Kravets在推特上发布的一条消息称,他们在chrome://flags的#enable-container-queries旗后投放了Chrome Canary 91.0.4459.0在如此短的时间内,容器查询已经覆盖了如此多的地方,而且规范甚至还不是最终的!我很高兴看到C...

日期:2021-06-24 03:00:04 浏览:895

CSS target=blank

那会不会让你的眼睛有点抽搐?就像…是打字错误。值的开头应该是带有下划线的>。就像…Welp, that\"s correct syntax!In the case of the no-underscore>, the blank部分只是一个名称。可能是任何东西。它可以是>,或者,可能是为了预示这里的目的:>。是一个特殊的关键字,它将在新选项卡中打开链接,每次都打开一个新选项卡。>将在新选项卡中打开第一个单击的链接,但任何共享>的链接都将在新打开的选项卡中打开。我从来不知道这一点!我相信这条微博的解释。我创建...

日期:2021-06-24 04:00:02 浏览:984

CSS查看WCAG 2.5.5以获得更好的目标尺寸

你有没有经历过这样的挫折:试图点击移动设备上的一个按钮却什么也不做,因为目标大小不够大,而且它在你的按键上不起作用?也许你有更大的手指,像我一样,也可能是由于灵活性有限。这是因为我们,即用户,必须与之交互的元素的目标区域越来越小,我们来谈谈如何使其足够大,以便用户能够轻松地与元素交互。如果用户在一个小型手持式触摸屏设备上访问内容,而这个设备的不动产要紧得多,那么这将是一个特别大的问题。成功标准重温我在上一篇涉及WCAG 2.1标准的文章中谈到了成功标准,Label in Name。简言之,WCAG标准是我们...

日期:2021-06-24 04:00:03 浏览:521

CSS Trickz:Netlify随需应变构建器的实验

默认情况下,WordPress站点有一个API。想看看这个网站的最新帖子吗,只是一组特定的数据…JSON格式?给你。Alex Riviere用它做了一个笑话站点。起初,当加载该API客户端时,该站点将fetch。很好,但是如果我们认真考虑一下,它对于访问站点的人来说是非常低效的(也就是说,比服务器呈现的HTML慢),对于API命中率也不是很高。所以,Alex用Netlify函数重新编写了它。然后Netlify函数将从API中fetch(在云中的节点中),并为预呈现的HTML提供服务。这可能更好一些,但正如亚...

日期:2021-06-24 04:00:04 浏览:563