Web的乐章:我用RESTful API编织出互联网交响曲献给面试官!!

697 阅读4分钟

网站视角剖析restful

大家好啊!!今天玖玖passion就来跟大家聊一聊你所不知道的RESTful web服务~ 准备好了吗?上车!!

014ee227452cb464a9ca08c8b22a9f3.jpg 首先呢我们要思考一下为什么要写一个网站?网站的概念就是一切皆资源,我们要通过网站来介绍和展示自己产品的内容。而我们今天要聊到的RESTful web服务正是来将我们的网站资源展示给用户的一大方式!同时这也是我们要迈过的一座大山!!让我们从web走向restful的世界!!

RESTful实战

话不多说,接下来玖玖passion将会通过一个项目实战来更好地剖析RESTful

image.png 我们新建全栈文件夹,然后初始化后端项目

image.png

json- 信息轻骑兵

首先呢我们先了解下json这种存储信息的文件形式。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,但独立于语言,被广泛用于服务器与Web应用程序之间传输数据。JSON的主要优点是易于人阅读和编写,同时也易于机器解析和生成,这使得它成为数据交换的理想选择。我们先创建一个json资源包,方便从中获取资源

image.png 如果说css是样式的话那么js就是交互,json就是一种资源!!那么我们如何将JSON文件转换成一个RESTful API呢,并对其进行访问呢?这下子我们不得不聊一下json-server了!

1c9be0b17c4838bd2de9205080870a5.jpg

json-server——完美的后端模拟器

为什么我们可以形象地称json-server为完美的后端模拟器呢?——json-server是一个轻量级的、静态的JSON文件服务器,它可以将一个JSON文件转换成一个RESTful API,从而帮助开发者在没有后端服务的情况下进行前端开发和测试。话不多说我们看下边的操作!!

RESTful启动!!

我们先来安装一下json-server包

image.png 我们可以看到package.json包下有如下依赖

image.png 我们可以在package.json包下添加如下脚本命令

image.png 这样我们就启动了一个http服务。 那我们先npm run dev 一下吧!!

image.png 下边便是我们要访问的资源啦!!

image.png 作为一种资源我们这个json文件怎么暴露出去给别人访问呢?上述操作我们下载了json-server包就构建了restful这种设计原则,我们可以进行如下操作来抛出我们的资源。我们在json文件夹下新增“posts”

image.png 通过id这个唯一标识属性我们便可以访问特定的资源

image.png 以上操作就是在模拟访问详情页啦

Postman-API测试工具

restful 定义了资源的提供方式这种设计模式是不会变的。名词+动词组成了资源暴露的方式。接下来 我们用postman来将抽象的知识点铺展开来吧!!

image.png 我们用到的method为GET,GET 请求方法是 HTTP 协议中最常用的请求类型之一,主要用于从服务器检索信息。GET 请求通常用于从服务器获取数据,而不修改服务器上的数据。例如,从服务器获取某个用户的资料、列表、文章内容等。 如果说GET是读取资源那么我们如何写入资源呢?在这里我们便可以用到POST请求啦!

image.png 接下来就可以看到我们向json文件中传递值啦

image.png 总而言之GET和POST都是HTTP动作GET好比读取详情,POST好比写(新增)。 接下来我们继续用postman来拓展一下吧!! 我们可以采用PATCH请求方法

  • 用于对资源进行部分更新。与PUT不同,PATCH只更新请求中指定的部分,而不会替换整个资源。
  • 我们可以通过访问id来对数据修改

image.png 修改好的如下:

image.png 增、查、改操作都进行了,那我们来试试删除操作吧!! 增、查、改操作都进行了,那我们来试试删除操作吧!! 增、查、改操作都进行了,那我们来试试删除操作吧!!

image.png 我们可以发现数据中的的确确是删除了我们选择的数据

image.png

HTTP——互联网的语言

http 协议是基于请求响应的简单协议 请求行 http Method[GET|POST|PATCH|DELETE]+URL(统一资源定位符) 请求体(body)呢就是我们需要执行操作数据的地方 响应包括响应头(状态码)~经典404...... 实战看看吧!!

image.png 结果如下:

image.png

今天的故事就讲到这啦!请大家点赞加收藏~~

3572a53e687a9f322424fc82d8b55c3.jpg