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

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

相关推荐
3824278274 小时前
JS表单提交:submit事件的关键技巧与注意事项
前端·javascript·okhttp
Kagol4 小时前
深入浅出 TinyEditor 富文本编辑器系列2:快速开始
前端·typescript·开源
小二·4 小时前
Python Web 开发进阶实战:Flask-Login 用户认证与权限管理 —— 构建多用户待办事项系统
前端·python·flask
浩瀚之水_csdn4 小时前
python字符串解析
前端·数据库·python
全栈小54 小时前
【前端】在JavaScript中,=、==和===是三种不同的操作符,用途和含义完全不同,一起瞧瞧
开发语言·前端·javascript
如果你好4 小时前
Vue createRenderer 自定义渲染器从入门到实战
前端·javascript·vue.js
温宇飞4 小时前
Web 图形合成技术:Blending 与 Porter-Duff Compositing
前端
小高0074 小时前
读懂 Tailwind v4:为什么它是现代前端项目的必选项?
前端·javascript·vue.js
我的golang之路果然有问题4 小时前
python中 unicorn 热重启问题和 debug 的 json
java·服务器·前端·python·json
SpringLament4 小时前
从零打造AI智能博客:一个项目带你入门全栈与大模型应用开发
前端·aigc