前言
說到 demo，我們最先想到的肯定是 hello world，當(dāng)學(xué)習(xí)一個新語言 / 框架時，能成功輸出 hello world 就說明我們已經(jīng)完成了執(zhí)行環(huán)境的搭建，但是這才僅僅是開始。為了深入學(xué)習(xí)其他特性，我們會開始做更復(fù)雜一點的 demo，一個經(jīng)典的例子就是 待辦事項列表 ToDoList。
但是這還遠(yuǎn)遠(yuǎn)不夠，做完 todo list 只是說明我們對基礎(chǔ)的用法有了一定的掌握，離“熟練使用”還有一定的距離。這時候很多人就會開始在網(wǎng)上搜一下成熟項目然后開始仿寫，但是因為體量問題，很容易就會陷入那些大而全的抽象設(shè)計里，又或者找到了一個雞肋 demo，做出來啥都沒學(xué)到還浪費了時間，這相當(dāng)不利于我們的初見學(xué)習(xí)。
而我們今天要介紹的 realworld，就是一個經(jīng)典的 demo 范例，讓你在用盡可能少的代碼學(xué)到盡可能多的東西。
簡單來說，realworld 是一個名為 Conduit 的論壇，可以注冊、發(fā)布文章、評論以及對自己的賬戶進行管理。由于其包含了在 web 開發(fā)中會遇到的絕大多數(shù)基礎(chǔ)業(yè)務(wù)，例如列表、增刪改查、鑒權(quán)、登錄等等、所以在 web 學(xué)習(xí)中非常的好用。它的首頁長下面這樣，鏈接在這里：Conduit (realworld.io)，可以點進去看一看：
你可以用任何自己想要學(xué)習(xí)的語言、框架、來實現(xiàn)它，包括前端或者后端。事實上，在使用了一個新技術(shù)棧將其實現(xiàn)了之后，你還可以聯(lián)系官方將你的實現(xiàn)加入介紹，你可以在 RealWorld Example Apps 找到現(xiàn)在已經(jīng)公開的 realworld 不同版本實現(xiàn)（比如 React + redux、vue3 + vite、 Angular + NgRx 等等）。
并且，不僅僅是 web 開發(fā)，realworld 是一個 應(yīng)用 范例，你也可以在桌面端、安卓/ios端、甚至是小程序端用任何自己想要的技術(shù)棧實現(xiàn)它。
我該如何實現(xiàn)？
realworld 實際上規(guī)定了一套 api 接口，想做后端的話直接按照這套規(guī)范開發(fā)就行。你可以在 realworld/api 找到規(guī)范的具體內(nèi)容，如果你看不太懂的話，可以用 Swagger Editor 打開官方提供的 realworld/swagger.json，然后你就可以看到熟悉的 swagger 界面啦：
除此之外，官方還提供了可以在 postman 中查看的 postman_collection.json。
并且，如果你只是想實現(xiàn)前端頁面的話，realworld 官方已經(jīng)提供了一個任何人都可以使用的后端服務(wù) https://conduit.productionready.io/api，這個服務(wù)就是按照上面的 swagger 規(guī)范實現(xiàn)的。
如果訪問不了的話，可以在 realworld/spec - Using the hosted API 找到最新的訪問 url。
前端相關(guān)
realworld 提供了一套 前端樣式模板實現(xiàn)，你可以參考參考，但是我感覺這并不是那么重要，如果你想學(xué)習(xí)某個前端組件庫，樣式不一樣其實是很正常的事情，只要功能齊全就可以。除此之外，realworld 還提供了 前端路由示例，你可以按其定義你的頁面路由。
如果你想做移動端的話，官方并沒有提供什么規(guī)范或者模板，大膽去做即可。
上面的內(nèi)容均可在 gothinkster/realworld-starter-kit 中找到。
功能解析
這一小節(jié)簡單介紹一下 realworld 前端的幾個功能，讓大家對其有個大致的了解，realworld 一共包含 首頁、文章詳情、用戶詳情、登錄/注冊、用戶配置、文章編輯 六個頁面：
0、全局的頁頭
這個功能存在于每個頁面中，注意右側(cè)的功能區(qū)，在登錄和沒登陸的時候顯示的內(nèi)容不同：
1、首頁
說起來你可能不信，但是首頁是這個項目里最復(fù)雜的功能了（相對而言），在默認(rèn)情況下他長這樣：
分為左側(cè)的 文章列表 和右側(cè)的 熱門標(biāo)簽。在點擊標(biāo)簽后，會出現(xiàn)對應(yīng)的標(biāo)簽頁：
熱門標(biāo)簽上面那幾個空標(biāo)簽是一堆無法顯示的空字符，你可以嘗試去掉他們。
并且，在登錄之后會出現(xiàn) 你的推送列表，注意，這三個標(biāo)簽頁是互不影響、可以同時存在的。并且每個標(biāo)簽頁最下方都是支持分頁查詢的，不要漏了。
2、列表中的文章條目
如下，如果一個文章有設(shè)置標(biāo)簽的話會顯示在右下角，沒有則不顯示。
而右上角的喜歡點擊之后如果沒有登錄會跳轉(zhuǎn)到登錄頁（項目里所有需要登錄的操作在沒有登錄時點擊都會跳轉(zhuǎn)到登錄頁）。
并且，這個組件在多個頁面里都有使用，思考一下該如何封裝他。
3、文章詳情頁
詳情頁里包含標(biāo)題區(qū)（最上面黑色部分，也顯示了用戶，可以喜歡文章或關(guān)注用戶）、正文區(qū)（正文內(nèi)容以及標(biāo)簽，還有另一個用戶信息顯示）以及最后的評論區(qū)，注意，如果你登錄了的話，你的評論上會顯示一個刪除按鈕：
并且，如果這個文章是你寫的，那么喜歡和關(guān)注按鈕會被替換成 編輯 和 刪除。
4、用戶詳情頁
這個頁面包含 我的文章 和 我喜歡的文章 兩個標(biāo)簽頁，并且也有一個關(guān)注按鈕。注意，當(dāng)你登錄的時候關(guān)注按鈕會被替換成用戶設(shè)置按鈕。
5、文章編輯 / 新增頁
這個頁面包含一個 form 表單，分別填寫標(biāo)題、簡介、正文和標(biāo)簽，注意標(biāo)簽輸入的是字符串，你可以選擇按逗號分隔（最后上傳要以數(shù)組形式上傳）。
并且，點擊編輯文章按鈕時也應(yīng)該跳到這個頁面，不過應(yīng)該先獲取到文章詳情然后填充到表單里。
6、用戶配置頁
這個頁面和文章編輯頁邏輯類似，不過注意最下面有個登出按鈕。
7、登錄 / 注冊頁
這兩個頁面類似，只不過注冊比登錄多了一個用戶名字段，并且標(biāo)題下面的鏈接可以相互跳轉(zhuǎn)，思考一下能不能進行復(fù)用。
其中最重要的是，當(dāng)表單提交時后端會返回異常，你應(yīng)該將其顯示出來，注意，上文中所有的表單提交都需要類似的異常顯示邏輯，包括文章編輯和用戶信息編輯：
這些功能熟悉之后做下來應(yīng)該需要 2 - 3 天的全天時長。用 vue、react 之類的框架實現(xiàn)代碼量在 1000 行左右，可以說非常適合拿來練手。
結(jié)束
當(dāng)學(xué)習(xí)一個新技術(shù)時，沒有一個合適體量的 demo 來練手是一件很痛苦的事。到目前為止（2021/5/28），該項目的 github star 已經(jīng)超過 58k，但是國內(nèi)并沒有多少人了解他，這也是我寫下本文的主要原因。如果你有更多類似的不同領(lǐng)域的 demo 范例，歡迎評論區(qū)交流~
