OrchardCore Headless建站
说到CMS系统,可能大家都能想起WordPress
和Drupal
之类的框架,作为.NET爱好者,一般也是知道一些基于.NET的CMS框架的,典型的比如DNN
、Umbraco
之类的。我很早之前听过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,大家可以根据自己的需要选择。
配置完了就可以新建文章了,体验还是不错的,图片等资源可以使用Media Library进行管理,然后插入的时候,会提示你选择对应的文件,非常方便,然后写好了之后还可以预览。
使用GraphQL访问数据
OrchardCore没有使用WebApi,而是使用了GraphQL作为自己的对外API提供的方法。
有关GraphQL的使用,我之前写过一篇文章,他使用库不是HotChocolate,但是对外查询方式是一样的。
因此,前端需要使用GraphQL替代REST API访问后台的数据。默认GraphQL是不开通的,需要在后台中Configuration-》features中启用。启用后,可以发现在OrchardCore集成了GraphQL开发控制台(通过Configuration-》GraphQL打开)。
这里,已经可以发现我们新建的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了。
上图是使用Password Flow请求TOKEN需要发送的信息,POST过去,就可以获得token。接下来前端把这个access_token放在后续的请求头中,就能正常获得数据了。
结语
至此,网站编辑已经可以通过后台自己去编写文章了,还可以新建多种类别,包括菜单等等功能;前端也可以按照返回的数据使用自己熟悉的框架(VUE/REACT)构建WEB界面了。