OrchardCore Headless建站

说到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界面了。

posted @ 2022-01-26 17:58  波多尔斯基  阅读(918)  评论(0编辑  收藏  举报