前言

说到 demo，我们最先想到的肯定是 hello world，当学习一个新语言 / 框架时，能成功输出 hello world 就说明我们已经完成了执行环境的搭建，但是这才仅仅是开始。为了深入学习其他特性，我们会开始做更复杂一点的 demo，一个经典的例子就是 待办事项列表 ToDoList。

但是这还远远不够，做完 todo list 只是说明我们对基础的用法有了一定的掌握，离“熟练使用”还有一定的距离。这时候很多人就会开始在网上搜一下成熟项目然后开始仿写，但是因为体量问题，很容易就会陷入那些大而全的抽象设计里，又或者找到了一个鸡肋 demo，做出来啥都没学到还浪费了时间，这相当不利于我们的初见学习。

而我们今天要介绍的 realworld，就是一个经典的 demo 范例，让你在用尽可能少的代码学到尽可能多的东西。

realworld: "The mother of all demo apps".

简单来说，realworld 是一个名为 Conduit 的论坛，可以注册、发布文章、评论以及对自己的账户进行管理。由于其包含了在 web 开发中会遇到的绝大多数基础业务，例如列表、增删改查、鉴权、登录等等、所以在 web 学习中非常的好用。它的首页长下面这样，链接在这里：Conduit (realworld.io)，可以点进去看一看：

你可以用任何自己想要学习的语言、框架、来实现它，包括前端或者后端。事实上，在使用了一个新技术栈将其实现了之后，你还可以联系官方将你的实现加入介绍，你可以在 RealWorld Example Apps 找到现在已经公开的 realworld 不同版本实现（比如 React + redux、vue3 + vite、 Angular + NgRx 等等）。

并且，不仅仅是 web 开发，realworld 是一个 应用 范例，你也可以在桌面端、安卓/ios端、甚至是小程序端用任何自己想要的技术栈实现它。

我该如何实现？

realworld 实际上规定了一套 api 接口，想做后端的话直接按照这套规范开发就行。你可以在 realworld/api 找到规范的具体内容，如果你看不太懂的话，可以用 Swagger Editor 打开官方提供的 realworld/swagger.json，然后你就可以看到熟悉的 swagger 界面啦：

除此之外，官方还提供了可以在 postman 中查看的 postman_collection.json。

并且，如果你只是想实现前端页面的话，realworld 官方已经提供了一个任何人都可以使用的后端服务 https://conduit.productionready.io/api，这个服务就是按照上面的 swagger 规范实现的。

如果访问不了的话，可以在 realworld/spec - Using the hosted API 找到最新的访问 url。

前端相关

realworld 提供了一套 前端样式模板实现，你可以参考参考，但是我感觉这并不是那么重要，如果你想学习某个前端组件库，样式不一样其实是很正常的事情，只要功能齐全就可以。除此之外，realworld 还提供了 前端路由示例，你可以按其定义你的页面路由。

如果你想做移动端的话，官方并没有提供什么规范或者模板，大胆去做即可。

上面的内容均可在 gothinkster/realworld-starter-kit 中找到。

功能解析

这一小节简单介绍一下 realworld 前端的几个功能，让大家对其有个大致的了解，realworld 一共包含 首页、文章详情、用户详情、登录/注册、用户配置、文章编辑 六个页面：

0、全局的页头

这个功能存在于每个页面中，注意右侧的功能区，在登录和没登陆的时候显示的内容不同：

登录前，按钮分别为：首页、登录、注册

登录后，按钮分别为：首页、创建新文章、用户配置、自己的用户页

1、首页

说起来你可能不信，但是首页是这个项目里最复杂的功能了（相对而言），在默认情况下他长这样：

分为左侧的 文章列表 和右侧的 热门标签。在点击标签后，会出现对应的标签页：

热门标签上面那几个空标签是一堆无法显示的空字符，你可以尝试去掉他们。

并且，在登录之后会出现 你的推送列表，注意，这三个标签页是互不影响、可以同时存在的。并且每个标签页最下方都是支持分页查询的，不要漏了。

2、列表中的文章条目

如下，如果一个文章有设置标签的话会显示在右下角，没有则不显示。

而右上角的喜欢点击之后如果没有登录会跳转到登录页（项目里所有需要登录的操作在没有登录时点击都会跳转到登录页）。

并且，这个组件在多个页面里都有使用，思考一下该如何封装他。

3、文章详情页

详情页里包含标题区（最上面黑色部分，也显示了用户，可以喜欢文章或关注用户）、正文区（正文内容以及标签，还有另一个用户信息显示）以及最后的评论区，注意，如果你登录了的话，你的评论上会显示一个删除按钮：

并且，如果这个文章是你写的，那么喜欢和关注按钮会被替换成 编辑 和 删除。

由你发布

其他用户发布

4、用户详情页

这个页面包含 我的文章 和 我喜欢的文章 两个标签页，并且也有一个关注按钮。注意，当你登录的时候关注按钮会被替换成用户设置按钮。

当访问自己的用户页时

5、文章编辑 / 新增页

这个页面包含一个 form 表单，分别填写标题、简介、正文和标签，注意标签输入的是字符串，你可以选择按逗号分隔（最后上传要以数组形式上传）。

并且，点击编辑文章按钮时也应该跳到这个页面，不过应该先获取到文章详情然后填充到表单里。

6、用户配置页

这个页面和文章编辑页逻辑类似，不过注意最下面有个登出按钮。

7、登录 / 注册页

这两个页面类似，只不过注册比登录多了一个用户名字段，并且标题下面的链接可以相互跳转，思考一下能不能进行复用。

登录页

注册页

其中最重要的是，当表单提交时后端会返回异常，你应该将其显示出来，注意，上文中所有的表单提交都需要类似的异常显示逻辑，包括文章编辑和用户信息编辑：

这些功能熟悉之后做下来应该需要 2 - 3 天的全天时长。用 vue、react 之类的框架实现代码量在 1000 行左右，可以说非常适合拿来练手。

结束

当学习一个新技术时，没有一个合适体量的 demo 来练手是一件很痛苦的事。到目前为止（2021/5/28），该项目的 github star 已经超过 58k，但是国内并没有多少人了解他，这也是我写下本文的主要原因。如果你有更多类似的不同领域的 demo 范例，欢迎评论区交流~