OrchardCore Headless建站

波多爾斯基發表於2022-01-26

說到CMS系統,可能大家都能想起WordPressDrupal之類的框架,作為.NET愛好者,一般也是知道一些基於.NET的CMS框架的,典型的比如DNNUmbraco之類的。我很早之前聽過Orchard,現在已經出了Core版本了,因此就直接在專案上用用。

前言

CMS系統(內容管理系統)可以方便我們快速建站,其他的概念我就不再多說了。重點說說三個重要的內容。

  • Full CMS

全功能模式,基本上不需要開發幹啥,網站的內容直接套上模板就可以建站了,自由度較低,上手及其簡單。

  • Decoupled CMS

解耦模式,除了後臺還是使用CMS自帶的後臺以外,前臺使用Razor Pages或者MVC進行頁面調取後臺的資料進行頁面的呈現。前臺和後臺可以分開並行工作,只要在前後端定義好佔位符和資料,網站就能正常使用。

  • Headless CMS

極簡模式(我也不知道咋翻譯合理),和解耦模式一樣,CMS只是發揮內容管理工作;不同的是,前端完全獨立開發,使用CMS提供的各種API訪問後臺的資料,不需要符合各種模板,也完全前後端分離。

大家可以按照自己的需求找自己合適的模式。OrchardCore支援上面的所有三種模式。如果是前端比較獨立的情況,可以選擇使用Headless進行開發。

關於CMS的選型,除了這個以外,還有一個Piranha.CMS也極簡風格,很快就上手了,有興趣大家可以去研究。

OrchardCore部署

按照官方文件就可以進行部署了,提示一下大家,建議大家新增上他們自己自帶的nuget源,要不很容易出現不好編譯的情況。如果大家喜歡docker,他們還提供docker的映象,預設的使用者名稱是admin,密碼是password,安裝更加方便,不過少了很多可以直接定製的地方,大家自行選擇。細節的內容我就不多說了,網上很多了。(本文使用Docker進行預設部署)

定義內容

進入了管理後臺之後,首先進入Configuration-》features中新增需要的Content Management元件,然後在Content Definitions中定義內容型別,我新建了一種Article型別的內容。然後我新增了一個正文區域的Html Field,新增了幾個Parts,如下圖。請注意,在設定Fields的過程中,我手動設定了編輯器Trumbowyg,大家可以根據自己的需要選擇。
img

配置完了就可以新建文章了,體驗還是不錯的,圖片等資源可以使用Media Library進行管理,然後插入的時候,會提示你選擇對應的檔案,非常方便,然後寫好了之後還可以預覽。
img

使用GraphQL訪問資料

OrchardCore沒有使用WebApi,而是使用了GraphQL作為自己的對外API提供的方法。

有關GraphQL的使用,我之前寫過一篇文章,他使用庫不是HotChocolate,但是對外查詢方式是一樣的。

因此,前端需要使用GraphQL替代REST API訪問後臺的資料。預設GraphQL是不開通的,需要在後臺中Configuration-》features中啟用。啟用後,可以發現在OrchardCore整合了GraphQL開發控制檯(通過Configuration-》GraphQL開啟)。
img
這裡,已經可以發現我們新建的article型別了。並且可以直接通過GraphQL進行查詢了。通過F12檢視請求,可以發現編輯好的GraphQL請求是通過特定的格式傳送給後臺endpoint(/api/graphql)的,這篇文章詳細解釋了前臺怎麼向後臺請求資料。

使用JWT保護介面

如果網站啟用了OpenID,那麼前端直接訪問後臺會彈401錯誤。我們可以使用ASP.NET CORE Data Protection或者JWT來進行認證和鑑權。

OrchardCore支援OpenID和OAuth2.0規範,可以通過/.well-known/openid-configuration檢視各個服務的終結點以及其他基本資訊。這兩個規範不是本文的重點,請自行查閱相關資料。

我們在Security-》OpenID Connect進行Authorization server的設定,啟用必要的endpoint和需要使用到的Flow,最底下,Token Format選擇JWT。接下來,在Management-》Application中新建一個應用,就可以獲取Token了。

img

上圖是使用Password Flow請求TOKEN需要傳送的資訊,POST過去,就可以獲得token。接下來前端把這個access_token放在後續的請求頭中,就能正常獲得資料了。
img

結語

至此,網站編輯已經可以通過後臺自己去編寫文章了,還可以新建多種類別,包括選單等等功能;前端也可以按照返回的資料使用自己熟悉的框架(VUE/REACT)構建WEB介面了。

相關文章