什么是REST API以及REST API的使用

最新推荐文章于 2024-03-18 16:23:23 发布

youhebuke225

最新推荐文章于 2024-03-18 16:23:23 发布

阅读量1.2w

点赞数 3

分类专栏： # 网络

本文链接：https://blog.csdn.net/youhebuke225/article/details/106899945

版权

网络专栏收录该内容

6 篇文章 0 订阅

订阅专栏

API的分类

REST API(restful)

REST是Representational State Transfer（表现层状态转移）的缩写，它是由罗伊·菲尔丁（Roy Fielding）提出的

非 REST API(restless)

REST API

发送请求进行 CRUD 哪个操作由请求方式来决定
同一个请求路径可以进行多个操作
请求方式会用到 GET/POST/PUT/DELETE

非 REST API

请求方式不决定请求的 CRUD 操作
一个请求路径只对应一个操作
一般只有 GET/POST

使用json-server搭建REST接口

json-server是什么

用来快速搭建 REST API 的工具包
source可以是json文件或者js文件

使用

详情点击

下载

npm install -g json-server

目标根目录下创建数据库 json 文件: db.json

{
	"posts": [{
		"id": 1,
		"title": "json-server",
		"author": "typicode"
	}],
	"comments": [{
		"id": 1,
		"body": "some comment",
		"postId": 1
	}],
	"profile": {
		"name": "typicode"
	}
}

启动服务器执行命令

json-server --watch db.json

运行成功的界面如下

在这里插入图片描述

测试

使用浏览器测试

http://localhost:3000/posts

普通get请求

结果

在这里插入图片描述
2. http://localhost:3000/posts/1

params参数

结果

在这里插入图片描述

http://localhost:3000/posts?id=1

query参数

结果

在这里插入图片描述

query参数与params参数的异同

相同点
- 都能得到相应的数据内容
不同点
- 得到的数据结构不同
  - query相当于对于原有的数据结构进行过滤，返回的数据结构中有数组
  - params直接返回查找到的对象

使用axios测试

调用then方法得到相应的数据

<body>
    <div>
        <button onclick="testGet()">GET 请求</button>
        <button onclick="testPost()">POST 请求</button>
        <button onclick="testPut()">PUT 请求</button>
        <button onclick="testDelete()">DELETE 请求</button>
    </div>
    <script src="https://cdn.bootcss.com/axios/0.19.0/axios.js"></script>
    <script>
        /* 1. GET 请求: 从服务器端获取数据*/
        function testGet() {
            // axios.get('http://localhost:3000/posts')
            // axios.get('http://localhost:3000/posts/1') // 获取 id 为 1 的对象
            // axios.get('http://localhost:3000/posts?id=1&id=2') // 获取 id 为1 或 2 的数组
            axios.get('http://localhost:3000/posts?title=json-server&author=typicode')
        }
        /* 2. POST 请求: 向服务器端添加新数据*/
        function testPost() {
            axios.post('http://localhost:3000/posts', {
                title: 'xxx', author: 'yyyy'
            }) // 保存数据
        }
        /* 3. PUT 请求: 更新服务器端已经数据 */
        function testPut() {
            axios.put('http://localhost:3000/comments/1', {
                body: 'yyy', postId: 2
            })
        }
        /* 4. DELETE 请求: 删除服务器端数据 */
        function testDelete() {
            axios.delete('http://localhost:3000/comments/1')
        }
    </script>
</body>

对于测试POST请求的说明

当我们发送post请求添加数据的时候

id为我们自动生成，不需要我们指定
如果post请求成功，我们打开db.json就会发现新增加的数据

在这里插入图片描述

对于PUT/DELETE请求相同，我们通过db.json都能观察到相应数据的改变

youhebuke225

关注

3
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
什么是REST API以及REST API的使用

API的分类REST API(restful)REST是Representational State Transfer（表现层状态转移）的缩写，它是由罗伊·菲尔丁（Roy Fielding）提出的非 REST API(restless)REST API发送请求进行 CRUD 哪个操作由请求方式来决定同一个请求路径可以进行多个操作请求方式会用到 GET/POST/PUT/DELETE非 REST API请求方式不决定请求的 CRUD 操作一个请求路径只对应一个操作一般只
复制链接

扫一扫