假数据生成器——JSONPlaceholder

你可以把它想象成一个 "假数据生成器" 或者 "在线API模拟器"

  • 干嘛用的? 当你学习编程或者做前端页面时,需要一个后台接口来返回数据做测试,但又没有现成的后台。JSONPlaceholder 就扮演了这个"后台"的角色。
  • 它提供啥? 它提供了几种常见的假数据:帖子、评论、相册、照片、待办事项、用户信息。
  • 怎么用? 非常简单,直接在浏览器地址栏输入它提供的网址,就能看到返回的JSON格式数据。

官网: http://jsonplaceholder.typicode.com


都能获取哪些数据?(接口大全)

它主要提供了6种数据,每种数据都可以通过不同的网址(URI)来获取:

数据类型 获取全部数据的地址 根据ID获取单条 根据用户ID获取(示例)
帖子 /posts /posts/1 /posts?userId=1
评论 /comments /comments/1 /comments?postId=1
相册 /albums /albums/1 /albums?userId=1
照片 /photos /photos/1 /photos?albumId=1
待办事项 /todos /todos/1 /todos?userId=1
用户 /users /users/1 (没有这个功能)

小技巧:

  • 获取所有 数据,就用 /{资源名},比如 /posts
  • 获取某一条 具体数据,就用 /{资源名}/{ID},比如 /posts/55
  • 获取属于某个资源 的数据,就用 /{资源名}?{字段名}={ID},比如 /posts?userId=5(获取用户5发的所有帖子)。

动手试试看(GET请求)

这些操作最简单,直接在浏览器地址栏输入下面的网址就能看到结果

  1. 看所有帖子

    • 地址:http://jsonplaceholder.typicode.com/posts
    • 你会看到一个包含100条帖子的列表,每条都有标题、内容、作者ID等信息。
  2. 看第55号帖子

    • 地址:http://jsonplaceholder.typicode.com/posts/55
    • 你会看到只有一条帖子,内容是关于第55号帖子的详细信息。
  3. 看某个用户的所有帖子

    • 地址:http://jsonplaceholder.typicode.com/posts?userId=5
    • 你会看到一个列表,里面全是用户ID为5的用户发的所有帖子。
  4. 看照片(这个比较直观)

    • 获取所有照片:http://jsonplaceholder.typicode.com/photos
    • 每条照片数据里会有一个 url(原图地址)和一个 thumbnailUrl(缩略图地址)。你可以直接把这两个地址复制到浏览器里打开,就能看到真实的图片!

模拟创建数据(POST请求)

这个不能在浏览器地址栏直接完成了,需要用一些工具(比如 Postman, curl命令,或者写一段JavaScript代码)。

  • 干嘛用的? 模拟你向网站"提交"一条新数据,比如发布一篇新帖子。
  • 地址: https://jsonplaceholder.typicode.com/posts
  • 会发生什么? 你"提交"的数据会被原样返回,并且它会自动给你加一个 id(比如101),假装是创建成功了。

举个例子(用curl命令):

bash 复制代码
curl https://jsonplaceholder.typicode.com/posts -H "Content-Type: application/json" -X POST -d '{"name": "Sam", "age":18, "msg":"OK" }'

它会返回:

json 复制代码
{
  "name": "Sam",
  "age": 18,
  "msg": "OK",
  "id": 101
}

(注意:这并不会在网站上真正创建一条数据,只是模拟了这个过程并返回结果给你看。)


总结

JSONPlaceholder 就是一个为你提供假数据的免费在线工具,方便你进行前端开发和API测试。

  • 对于初学者: 用它来练习如何通过网址获取和显示数据。
  • 对于开发者: 在前端页面开发时,用它作为后端API的替代品,保证开发进度。

记住核心用法: 在浏览器里输入地址,就能拿到数据。 快去试试吧!

相关推荐
哆啦A梦15882 小时前
搜索页面布局
前端·vue.js·node.js
_院长大人_2 小时前
el-table-column show-overflow-tooltip 只能显示纯文本,无法渲染 <p> 标签
前端·javascript·vue.js
哆啦A梦15884 小时前
axios 的二次封装
前端·vue.js·node.js
阿珊和她的猫4 小时前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo4 小时前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li4 小时前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
浪裡遊6 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
漂流瓶jz7 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化
samroom7 小时前
iframe实战:跨域通信与安全隔离
前端·安全
fury_1237 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js