我收藏的这 100 + 个”杀手级“网站,你用过几个?

4,953 阅读23分钟

本文正在参加「金石计划」

flag:每月至少产出三篇高质量文章~

本文主要推荐笔者多年搜集的一些工具网站,个个精品,亲测好用,童叟无欺!!!

  • 好东西,就是要分享才有价值,同时也作为自己的工具备忘录,会不断更新~

  • 大家有好的“杀手级”私藏网站或者工具,欢迎评论区告诉我,我会整理上来,共建共享~

更新记录

  • 2023-04-05:增加 12 个免费的 mock api 网站
  • 2023-04-06:增加 12 个杀手级网站和 6 个提升代码能力的网站,并对网站用途做了简单说明。
  • 2023-04-07:增加 11 个开发辅助网站和 3 个杀手级网站。
  • 2023-04-10:增加 20+ 个网站,分类更细致,加入设计 & 插图大类。
  • 2023-04-11:增加 28 个 icons 图标大类。

目前已搜索的大类包括:

  1. “杀手级” 备忘录 - 11 个
  2. “杀手级” 网站 - 13 个
  3. 开发辅助 - 11 个
  4. 赋能开发 - 19 个
  5. 设计 & 插图 - 22 个
  6. icons 图标 - 30 个
  7. 开源 mock data API - 12 个
  8. ... 更新中

一、”杀手级“备忘录(CheatSheet)

CheatSheet 有啥用就不用多说了吧,平时容易记不住或者不熟悉的 API,每次都要 google 一下,还不一定找到自己想要的,下面这几个能很好地解决你的问题,而且把很多语言和框架都集中组织在一起,使用体验拉满。

1、devdocs

网址:devdocs

DevDocs 在一个快速、有组织和可搜索的界面中结合了多个语言的API文档,目前最好用的一个~

image.png

2、Rico's cheatsheets

网址:Rico’s cheatsheets

Rico's cheatsheets 是一个前端开发的汇总 Cheatsheet,如 React, Vue, ES6, Vim, Kotlin ... 你还可以找到代码编辑器的常用键盘快捷键,如 VS Code, Atom, Sublime Text ... 真实不要太方便!

image.png

3、HTML CheatSheet

网址:htmlcheatsheet

HTML CheatSheet 综合了网页开发中常用的代码片段和工具,帮助我们快速找到那些”没必要记“的日常代码片段,比如选择颜色、创建链接、创建图像、创建表格......,可以大大减少网页开发中不必要的时间和精力耗费。它也囊括了其他工具,如 CSSJavascriptJquerySEO...... 还有更多信息,可以去网站探索。

image.png

有这网站了,你还去看啥 ”W3C“”菜鸟教程“ 啊,一个页面帮你搞定!

4、HTML5 Element Index

网址:HTML5 Element Index

HTML5 Element Index 汇总了 HTML5 中新的或重新定义的对象。每一个 HTML5对象,都有充分描述其特性的内容,并提供与该对象相关的其他文章,以帮助你更好地理解。同时,当你点击代码时,会显示与我们选择的对象相对应的示例代码片段。

image.png

5、HTML5 Canvas Cheat Sheet

网址:HTML5 Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet 是一个 HTML5 Canvas 的备忘录,经常写 Canvas 的同学不要错过~

image.png

6、CSS3 Animation Cheat Sheet

网址:CSS3 Animation Cheat Sheet

CSS3 Animation Cheat Sheet 是一个 CSS3动画 的备忘录。你只需要加载 animations.css 文件并在HTML中为对象调用你想要的效果类。它提供了完整而详细的例子,帮助你快速实现想要的动画~

image.png

7、CSS Grid Cheat Sheet

网址:CSS Grid Cheat Sheet

CSS Grid Cheat Sheet 是一个帮助你使用 CSS3 为网页轻松创建网格系统的网站。它的工具支持完整的功能,如定义 grid-template-columns, grid-template-rows, grid-column-gap...你只需要为这些属性输入信息,网页就会自动显示网格系统。它给你一个更直观的外观,使你更容易确定这个网格系统是否适合你的网站。

image.png

一个字:强大!

还有一个很好的:Grid

image.png

也很强大!

8、Easing functions

网址:Easing functions

帮助你写出更好的动画效果,主要是辅助写运行轨迹函数的。

image.png

9、OverAPI.com

网站:OverAPI.com

OverAPI.com 是一个了许多主流的编程语言的小抄,如 JavascriptNodeJSPHPPythonCSS ...

image.png

  • 比较好的一点是,包罗了很多主流的语言
  • 不好的一点是,它是帮助你跳转到 MDN ,其实跟我们自己搜没啥区别

10、Awesome-Cheatsheets

网址:Awesome-Cheatsheets

Awesome-Cheatsheets 也是一个主流的编程语言备忘录集合,前端主要有 The HTML5 Cheatsheet, Vue.js Cheatsheet, React.js Cheatsheet ...

image.png

  • 优点是:前后端都有,比较全
  • 缺点是:好像很久没更新了,react和vue都比较旧

11、Git CheatSheet

网址:gitsheet

GitSheet 是一个聚合了你经常使用的 Git 命令的工具。对于每个语句,它都描述了详细的用法。你只需要选择命令并按下复制按钮,它就会自动为你复制该命令。

image.png

老板再也不担心我 ”连 Git 都不会了“ ~

二、”杀手级“网站

1、carbon - 代码美化

网址:carbon

这个不用多说吧,你经常在别人的文章里面看到的,创建逼格很高的源代码图片。

image.png

2、ray.so - 代码美化

网址:ray.so

你可能觉得 Carbon 做出的图片已经很好看了,但你再看看 ray.so !这个网站还有一个黑暗模式和一些预置的不同编程语言的主题。你还可以使用它的VS代码扩展。

image.png

3、Poet.so - 社交网站图片

网址:Poet.so

这个网站将你的推文转化为漂亮和可编辑的图片,前提是你有 Twitter、LinkedIn、Shopify 😭。。。

image.png

4、roadmap.sh - 学习路线

网址:roadmap.sh

这个网站提供了路线图、指南,以帮助开发者选择学习路线。它对一个初学者以及需要指导的学习者都很有帮助。

image.png

5、smalldev - 开发小工具集合

网址:smalldev

一个开发小工具集合,包含各种 formatterdecodergenerator...,可以说包罗万象,而且质量都很高,关键是没有广告!比如:

  • 代码共享
  • 生成/扫描QR码
  • 编码/解码base64字符串
  • 编码/解码JSON
  • 生成随机文本

image.png

还有一个:tiny-helpers

image.png

6、type-scale - 字体预览

网址:type-scale

可视化地让你理解不同字体大小的区别,rem 与 em 值。实时检查预览,还能在 codepen 中查看完整代码。

image.png

7、remove - 在线抠图

网址:remove

这就不用说了,在线抠图,懂的都知道~

image.png

8、Unscreen - gif & 视频 抠图

网址:Unscreen

就像remove.bg,但用于gif和视频。

Unscreen landing page

9、readme.so - 创建MD

网址:readme.so

快速创建 README 文件的最简单方法。

image.png

10、webpagetest - 网站性能

网址: webpagetest.org

网站的性能一直是一个热门话题。网页测试工具将帮助你了解你可以在哪里优化你的网站:

image.png

11、Lorem Picsum - 生成随机图片

网址:Lorem Picsum

生成随机图片,可以自定义大小。

image.png

12、badgen - 徽章生成

网址:badgen.net/

快速生成徽章的服务。

image.png

13、shields - 徽章生成

网址:shields

Shields.io 提供SVG和光栅格式的简洁、一致、可读的徽章的服务,可以很容易地包含在GitHub readmes或任何其他网页中。该服务支持数十种持续集成服务、软件包注册、发行、应用商店、社交网络、代码覆盖服务和代码分析服务。每个月它提供超过8.7亿张图片,并被一些世界上最受欢迎的开源项目所使用,VS Code、Vue.js和Bootstrap就是其中的几个例子。

image.png

14、sketchsheets - device 模板

sketchsheets

用户体验设计师可随时打印的草图表模板。

image.png

15、patorjk - 文本转 ASCII

patorjk

image.png

16、getavataaars - Avatar 生成器

getavataaars

image.png

17、placehold - 占位图生成器

image.png

placehold.jp

原来的那个 placehold.com 打不开了,可以用这个平替。

image.png

三、开发辅助

1、bundlephobia - 计算 bundle size

网址:bundlephobia

计算将一个npm包添加到你的包中的成本。

image.png

2、transform - 代码转换

网址:transform.tools

只需点击几下就可以转换你的代码。我最常使用这个工具来转换 JSONTypeScript 接口。

image.png

3、svgomg - svg GUI

网址:svgomg

SVGOMG 提供了一个用于优化你的SVG文件的GUI。在为你的网站处理SVG时,这一点极为重要。

image.png

4、jsoneditoronline - JSON 工具

网址:jsoneditoronline

线上查看,编辑,比较和格式化 JSON 的工具。

image.png

5、Squoosh - 图像压缩器

网址:Squoosh

image.png

6、Epoch Convert - 在线Unix时间戳转换器

网址:Epoch Convert

在线Unix时间戳转换器

image.png

7、copychar - 特殊字符

网址:copychar

复制特殊字符到你的剪贴板。

image.png

8、shadows - box-shadow 生成器

网址:shadows

image.png

9、Key - JS的键盘事件

网址:Key.js

JavaScript键盘事件键代码和键标识符,按任何一个键都可以得到JavaScript的keydown、keypress和keyup键,代码,其中,keyCode和其他属性。

image.png

10、globster - 文件路径

网址:globster

image.png

11、px-rem-em - px转换工具

网址:px-rem-em converter

image.png

四、赋能开发

1、JavaScript.info - JS 知识

网址: JavaScript.info

JavaScript.info 是一个提供有关 JavaScript 信息的网站,包括教程、练习和参考资料。前端开发者会很欣赏这个网站上的资源,因为它提供了关于JavaScript的初级和高级主题的信息。

image.png

2、Codewars - 代码挑战

网址:Codewars

Codewars是一个为用户提供从头开始学习编码技能机会的网站。它包含各种适合初学者的编程挑战。

在这个网站上,每种语言都有编码挑战,如编码卡塔斯。为了更熟练地掌握一门特定的语言,通过向创造这些挑战的编码员学习,掌握一门语言。

image.png

3、devchallenges - 开发挑战

网址:devchallenges

在这个网站上,你将得到网页开发资源和一个社区,可以帮助你通过开展项目和练习技术获得网页设计的专业知识。

image.png

4、CSSBattle - css 挑战

网址: cssbattle

CSSBattle 是一个在线游戏,玩家在游戏中竞争创建尽可能小的CSS代码。玩家试图设定不同的 "目标",并在竞争中取得先机。

image.png

5、Askyourcode - 寻找代码

网址:Askyourcode

如果你没有遇到过从一个更大的代码库中寻找一个特定的代码片段而感到困惑的问题,askyourcode可以成为一个宝贵的资源。在GitHub中寻找特定的代码片段以用于项目,是很浪费时间的。

有了这个网站,你不一定需要知道如何从确切的软件包或代码库中搜索。像 "how to implement context state in react" 这样的查询会给你一系列关于如何实现的代码片段。你可以根据你对代码的理解来选择使用。

image.png

6、learngitbranching - Git 学习

网址:Git Branching

对于一个新手来说,使用git可能是一个挑战,仅仅了解理论是没有用的,这个网址可以帮你可视化学习 Git。

image.png

7、Majestic - 测试

网址:Majestic

Majestic是一个用于 Jest 的零配置UI,它使人们更容易看到测试日志输出,而不是纯粹使用终端。它可以全局安装,也可以在任何版本库中使用 npx majestic 打开。

Majestic landing page

8、TailwindComponents - Tailwind 组件

网址:TailwindComponents

Tailwind 最近非常流行,像这样的网站表明了原因。TailwindComponents有数百个使用tailwind.css的社区构建的组件。其中一些具有很高的质量,所以一定要去看看

TailwindComponents landing page

9、Tailblocks - Tailwind 组件

网址:Tailblocks

Tailblocks具有更多高质量的Tailwind组件。然而,它们提供了与bootstrap类似的体验,所以你可以用这些来创建整个网站。绝对是加速开发的必备工具。

Tailblocks landing page

10、Pattern.css - css 模式

网址:Pattern.css

喜欢在你的设计中使用图案?那么你会喜欢这个。它是一个CSS库,为你提供了不同的类,为你的网站创造了令人敬畏的模式。

Pattern.css landing page

11、CSSeffectsSnippets - CSS动画

网址:CSSeffectsSnippets

为你的网站提供漂亮的CSS动画。

CSSeffectsSnippets landing page

12、98.css - Windows 怀旧风格 css

网址:98.css

98.css让你的怀旧幻想成真。如果你需要建立一个具有Windows 98风格的网站或电子应用程序,那么98.css将大大帮助你。

98.css landing page

13、Regex101 - 正则工具

网址: regex101

有了它,你可以不用再为正则困扰了!

image.png

14、regulex - 正则工具

网址: regulex

这个网站可能比 Regex101 更好!

image.png

15、ihateregex - 正则工具

网址:ihateregex

如果你讨厌正则表达式,那么你一定不能错过这个网站。可以帮助我们非常直观的表达正则表达式的原理。

image.png

16、Animista - CSS 动画

网址: animista

CSS 动画是大家平时比较难记住的知识,通过animista,我们能够实时地测试动画。你只需要如下四步:

  1. 选择所需的效果:放大、缩小、旋转、旋转90°、翻转...
  2. 选择所建议的效果的一个变体
  3. 配置所有的动画属性:时间功能、步骤、迭代次数,...
  4. 复制生成的CSS

image.png

17、anime - css动画

网址:animejs

Anime.js 是一个轻量级的JavaScript动画库,拥有简单而强大的API。它与CSS属性、SVG、DOM属性和JavaScript对象一起工作。

image.png

18、keyframes - css 动画

网址:keyframes

它不仅可以帮助你通过实验学习CSS动画的属性和实时可视化,而且还可以帮助你生成最适合你的设计的很酷的动画和阴影。

image.png

19、cssfx - css 效果

网址:cssfx

一个精心设计的集合,重点在于流畅性、简单性和易用性。由CSS提供动力,标记最少。完全开放源代码和MIT许可。

image.png

五、设计 & 插图

1、Storytale - 免费切图

网址:storytale

让你不用再 ”低三下四“ 求UI给你切图了!可用于 web端 和移动端项目的高级插图。免费,且可用于商业和个人目的。

image.png

DevDocs将众多的API文档集中在一个可搜索的界面。你可以在一个地方找到与各种编程语言、技术相关的文档。

2、undraw - 免费、精美图片

网站:undraw

它提供免费的精美图片。此外,你可以自定义颜色。

image.png

3、error404 - 免费的 404 插图

网址:error404

你是否曾经为如何设计网站的 404 页面而苦恼?本站提供了大量适合404页面的精美样式。

image.png

4、Blush

网址:Blush

Blush 允许你免费下载他们所有的插图,供商业和个人使用。它是惊人的,因为它具有许多插图风格,可以组成新的插图。此外,他们有一个Figma插件,所以你可以立即在你的设计中使用它们。

image.png

5、Smash Illustrations

网址:Smash Illustrations

Smash Illustrations 以时尚的人物和简单的插图为特色,可免费用于商业和个人使用。它有250多个对象和角色,以及20多个独特的场景,因此你可以随心所欲地编排它们。

Smash landing page

6、Control

网址:Control

Control 的特点是免费提供高质量的实体和线性风格的插图。它们可以免费用于商业和个人用途,但它们是.png格式的。如果你需要SVG,那么你将需要支付38美元,这对于这种质量的插图来说并不坏。

Control landing page

7、DrawKit

网址:DrawKit

DrawKit有220多个免费使用的插图。它们都是SVG格式的,所以你可以创造出令人敬畏的构图!此外,他们还提供了使用 lottie 的动画插图,这对于酷和时尚的网站开发来说是非常巨大的。

Drawkit landing page

8、Open Doodles

网址:Open Doodles

如果你是一个素描插画的粉丝,那么你会喜欢 Open Doodles。所有插图和免费下载的SVG或PNG格式。此外,他们还有一个构图路线和生成器,所以你可以得到你需要的涂鸦!

Open Doodles landing page

9、Free Illustrations

网址:Free Illustrations

免费插图的特点是有许多插图背景,非常适合着陆页开发。

Free Illustrations landing page

10、Mixkit

网址:Mixkit

Mixkit 是插图的 Unsplash,或者说这就是他们的目标。它有许多插图类别,还有库存视频和音乐,都是免费的。

Mixkit landing page

11、Delesign

网址:Delesign

Delesign为你免费提供许多干净的插图。他们的主要强项是其多样性。

Delesign landing page

12、Dribbble - 设计创意

网址:dribbble

Dribbble 是寻找和展示创意作品的主要目的地,也是世界上最优秀的设计专业人士的家园。你可以从这里找到网页设计的灵感。

image.png

13、Behance - 设计创意

网址:behance

提到 UI设计创意,除了 Dribble,就不能不提 Behance。

image.png

14、Colorhunt - 调色板工具

网址:Color Hunt

Colorhunt 是一个调色板的网站。前端再也不用烦恼页面色了!

image.png

15、SchemeColor - 配色工具

网址: schemecolor

SchemeColor 工具可以帮助你选择正确的主题,它可以帮助我们可视化并为我们的网站选择合适的一组颜色。

image.png

16、Shape Divider - 画曲线

网址:Shape Divider

Shape Divider 允许你在飞行中为你的网站生成光滑的分隔线。与其他网站相比,它的用户界面很酷,而且效果非常好。

Shape Divider landing page

17、FontSpark - 字体

网址:FontSpark

FontSpark允许你通过生成不同的字体来发现你下一个喜欢的字体,直到你喜欢它为止。

FontSpark landing page

18、colors.lol - 调色板

网址:colors.lol

需要描述性过强的调色板?Colors.lol是寻找这些的正确地方。他们有10多个这样的调色板,可以使你的设计更有活力。

Colors.lol landing page

19、ColorMind

网址:ColorMind

Colormind使用深度学习生成颜色方案。你可以锁定颜色,并获得与该颜色互补的其他颜色。

Colormind landing page

20、Ucraft Logo Maker - logo 制作

网址:Ucraft Logo Maker

每当我为一个副业需要一个快速的 logo 时,这是我的首选。他们有成千上万的图标,可以帮助你创建许多标志组合。对于免费的商业和个人使用,他们让你下载一个PNG版本的标志。

Ucraft Logo Maker landing page

21、AppMockUp - App 模拟图

网址:AppMockUp

AppMockUp让你不费吹灰之力就能生成Android和iPhone的模拟图。如果你是一个移动开发者,一定要看看这个软件。

AppMockUp landing page

22、Webframe - 网站设计灵感

网址:Webframe

Webframe有成千上万的基于真实网站的设计灵感。

Webframe landing page

六、Icons 图标

0、flowbite

网址:flowbite

437个免费和开源的SVG图标集合,这些图标与Flowbite和Tailwind CSS兼容,基于实体和轮廓样式,支持React(JsX)和Figma。

image.png

1、react-icons

网址:react-icons

用react-icons在你的React项目中轻松包括流行的图标,它利用ES6导入,允许你只包括你的项目正在使用的图标。

image.png

2、iconsvg

网址:iconsvg

为你的项目快速定制的图标。

image.png

3、feathericons

网址:feathericons

专门为React配套的库:react-feather

简单漂亮的开源图标。

image.png

4、systemuicons

网址:systemuicons

专门为系统和产品设计的简单而一致的图标的集合不断增加。你想怎么用就怎么用,免费开源。

image.png

5、svgporn - 矢量图标

网址:svgporn

矢量标识,可用于:

  • 开发
  • 设计师
  • 极客
  • 团队
  • 博主
  • DevOps

image.png

6、iconmoon

网址:iconmoon.io

完美像素图标解决方案。

image.png

7、evil-icons

网址:evil-icons

简单干净的SVG图标包,代码支持Rails、Sprokets、Node.js、Gulp、Grunt和CDN。

image.png

8、simpleicons

网址:simpleicons

2449个流行品牌的免费SVG图标。

image.png

9、fontawesome

网址:fontawesome

在你的网站上获得图标的最简单的方法是使用一个工具包。这是你自己的自定义版本的Font Awesome,所有捆绑在一起的只有你需要的图标、工具和设置。

image.png

10、icons.holasvg

网址:holasvg

image.png

11、iconscout

网址:iconscout

7,000多种图标字体、SVG、3D和动画图标与Unicons合作。为任何设计项目寻找任何图标字体、SVG、3D或动画图标。通过简单的拖放,或使用React或Vue,可直接从您喜爱的设计工具中访问Unicons。有六种不同的图标风格可供选择:直线、单色、实体、细线、动画和三维视图。

image.png

12、fontastic

网址:fontastic

在几秒钟内创建你的图标字体。让你的网站更快。超过9,000个图标可用。你可以将你的图标作为SVG Sprites发布。

image.png

13、3dicons

网址:3dicons

  • 超过4000个3D图标和3D人物
  • 4K分辨率的正面和透视视图
  • 包括Figma文件以定制颜色
  • 五种不同的颜色调色板
  • 在真实的3D模型和软件中设计
  • 精心设计的细节
  • 每周都有新的图标加入

image.png

14、favicons.beaubus

网址:favicons

一组110多个免费的跨浏览器 favicons,供你在你的项目中使用。

image.png

15、iconic

网址:iconic

免费的、"随心所欲 "的像素完美的图标,每周都有新的图标加入。

image.png

16、svgrepo

网址:svgrepo

500.000多个开放许可的SVG矢量和图标,使用种类繁多的矢量库,为您的项目搜索、探索和编辑最合适的免费图标或矢量。下载免费的SVG矢量和图标供商业使用。

image.png

17、tabler-icons - 适用 react、vue 等

网址:tabler-icons

超过4100个用于网页设计的像素完美的图标,免费和开源的图标,旨在使你的网站或应用程序具有吸引力,视觉上一致,简单美观。

image.png

18、css.gg

网址:css.gg

开源的CSS、SVG和Figma UI图标,有SVG Sprite、styled-components、NPM和API版本。

image.png

19、fontastic

网址:fontastic

20、remixicon

网址:remixicon

为设计师和开发者精心制作的开源中性风格的系统符号。所有的图标都可以免费用于个人和商业用途。

image.png

21、lineicons

网址:lineicons

手工制作的线条图标,适用于现代用户界面的网络、移动和桌面应用程序设计和开发项目。Lineicons是一个巨大而全面的专业设计的图标包,有所有矢量格式,易于在网络、设计、编码和其他方面使用。

image.png

22、boxicons

网址:boxicons

高质量的web图标,为设计师和开发者精心设计的简单开源图标。

image.png

23、heroicons - Tailwind 风

网址:heroicons

美丽的手工制作的SVG图标,由Tailwind CSS的制作者制作。

image.png

24、iconmonstr

网址:iconmonstr

发现316个集合中的4784+免费图标。

image.png

25、google fonts

网址:fonts.google

Material Icons有五种风格,有一系列可下载的尺寸和密度。这些图标是基于Material Design的核心原则和指标。

image.png

26、iconfinder

网址:iconfinder

为您的设计项目提供数百万个图形。由独立设计师创建。

image.png

27、icons8

网址:icons8

图标、插图、照片、音乐和设计工具。

image.png

28、flaticon

网址:flaticon

为你的项目下载免费图标和贴纸。图片由设计师制作,并为其提供PNG、SVG、EPS、PSD和CSS格式。

image.png

29、noun

网址:thenounproject

毫无疑问,Noun Project 拥有最广泛的图标库之一,所以你可以确信你的设计项目将被赋予独特的设置。

在这个图标框架的免费版本中,你会发现各种各样的图像,但你可能无法定制颜色、背景或形状,而且你只能下载有限的数量。

image.png

30、Bootstrap icons

网址:Bootstrap icons

被称为 Bootstrap 图标的新图标库已被添加到最流行的CSS框架的第4版中。Bootstrap 的图标是为Bootstrap文档和组件设计的。

Font Awesome 是一个基于字体的资产库,即字体图标库,而Bootstrap选择使用基于SVG的图标。目前,Bootstrap Iconsalpha 版本中的1000多个可用的库图标组成。

image.png

七、开源的 mock data API

如果你是一个纯前端或者只是想测试一些新技术,但是又不想写一个后端服务,那接下来的这 12 个免费的 mock API 网站肯定就是你想要的了!

1、fakerjs

网址:fakerjs

可以在测试和开发的时候,生成大量 mock 数据,很好用,首选。

image.png

2、dummyjson

网址:dummyjson

生成 JSON 格式的 mock 数据,在开发或测试中作为占位符使用。

image.png

3、jsonplaceholder

网址:jsonplaceholder

这个也很好用,生成的是一些类似下面数据结构的 mock 数据:

{
  id: 1,
  title: '...',
  body: '...',
  userId: 1
}

image.png

4、dog.ceo

网址:dog.ceo

喜欢“修狗狗”的 FEers 可以用这个。

image.png

5、fakestoreapi

网址:fakestoreapi

生成一些类似超市产品的 mock 数据,特定场景下很有用。

image.png

6、pokeapi

网址:pokeapi

通过现代RESTful API轻松访问所有你需要的口袋妖怪数据。

image.png

7、randomuser

网址:randomuser

一个用于生成随机用户数据的免费、开源的API。

image.png

8、punkapi

网址:punkapi

带图片的免费 mock apis,主要是关于啤酒的。。。

image.png

9、Random Data API

网址:Random Data API

生成随机的 mock 数据并填充到你的应用程序中,以方便开发和测试。

image.png

10、REST Countries

网址:REST Countries

返回的是世界上所有国家的数据。

image.png

11、Open Weather Map

网址:Open Weather Map

生成的是关于城市天气的 mock 数据。

image.png

12、IP API

网址:IP API

一个用于查找 "IP地址、时间区域、城市、国家、邮政编码、经度/纬度" 信息的免费API。

image.png

end~

欢迎关注之前的几篇文章: