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

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

相关推荐
程序员爱钓鱼16 小时前
Node.js 编程实战:文件读写操作
前端·后端·node.js
PineappleCoder16 小时前
工程化必备!SVG 雪碧图的最佳实践:ID 引用 + 缓存友好,无需手动算坐标
前端·性能优化
JIngJaneIL16 小时前
基于springboot + vue古城景区管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
敲敲了个代码16 小时前
隐式类型转换:哈基米 == 猫 ? true :false
开发语言·前端·javascript·学习·面试·web
澄江静如练_17 小时前
列表渲染(v-for)
前端·javascript·vue.js
JustHappy17 小时前
「chrome extensions🛠️」我写了一个超级简单的浏览器插件Vue开发模板
前端·javascript·github
Loo国昌17 小时前
Vue 3 前端工程化:架构、核心原理与生产实践
前端·vue.js·架构
sg_knight17 小时前
拥抱未来:ECMAScript Modules (ESM) 深度解析
开发语言·前端·javascript·vue·ecmascript·web·esm
LYFlied17 小时前
【每日算法】LeetCode 17. 电话号码的字母组合
前端·算法·leetcode·面试·职场和发展