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

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
管理员
上一篇:.NET中大型项目开发必备(10)--图片的裁剪、缩放、与加水印
下一篇:使用Hot Chocolate和.NET 6构建GraphQL应用(3) —— 实现Query基础功能
评论列表

发表评论

评论内容
昵称:
关联文章

OrchardCore Headless
YES-CMS 内容管理系统 关于本页面调整
04、自 MQTT 对接
Python Selenium 前端如何检测Chrome-Headless不被爬虫虐
RabbitMQ服务器环境搭方法(Windows)
Elasticsearch使用系列-ES简介和环境搭
使用node启动本地项目,搭本地服务器
阿里云搭FTP服务器访问报错 200,227错误
C# WPF MVVM模式Prism框架从零搭(经典)
ASP.NET+MVC入门踩坑笔记 (一) 创建项目 项目配置运行 以及简单的Api搭
YESWEB开发环境搭
YESWin winform开发框架 开发环境搭指南
(五)React Ant Design Pro + .Net5 WebApi:后端环境搭-Autofac注入+ 泛型仓储
Identity Server 4到今年年底就停止支持了,试一下使用Orchard Core 作为认证服务
Winform开发框架简介
数据库工具 RedGate 防止联网校验
Python Selenium 爬虫如何隐藏Headles-Chrome不被检测出来 避免检测
页面快排插件配置支持图片上传
window服务器安全的一些配置
YES-CMS内容管理系统 页面模板介绍

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码