假数据生成器——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的替代品,保证开发进度。

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

相关推荐
J***Q2921 天前
Vue数据可视化
前端·vue.js·信息可视化
ttod_qzstudio1 天前
深入理解 Vue 3 的 h 函数:构建动态 UI 的利器
前端·vue.js
_大龄1 天前
前端解析excel
前端·excel
一叶茶1 天前
移动端平板打开的三种模式。
前端·javascript
前端大卫1 天前
一文搞懂 Webpack 分包:async、initial 与 all 的区别【附源码】
前端
Want5951 天前
HTML音乐圣诞树
前端·html
老前端的功夫1 天前
前端浏览器缓存深度解析:从网络请求到极致性能优化
前端·javascript·网络·缓存·性能优化
Running_slave1 天前
你应该了解的TCP滑窗
前端·网络协议·tcp/ip
程序员小寒1 天前
前端高频面试题之CSS篇(一)
前端·css·面试·css3
颜酱1 天前
Monorepo 架构以及工具选型、搭建
前端·javascript·node.js