在 .NET Core 下将轻量级 CMS 与 Angular 紧密集成

引言

ASP.NET Core 结合 Angular 正日益成为构建交互式 Web 应用程序的热门技术栈。然而，如果您想管理此类 Web 应用程序的内容，唯一的选择就是使用无头 CMS 服务。这对于较小的 Web 应用程序来说可能有点大材小用，而且不允许轻松预览内容更改。Lynicon CMS 为 ASP.NET Core 提供了带有预览功能的 SPA 内容管理，与通常的无头 CMS 设置不同，它可以让您立即看到内容更改的效果。它轻量级且设置快速，允许将内容存储在文件中而不是数据库中。

本文演示了如何将 Lynicon CMS 内容管理添加到 Visual Studio 2017 中的 ASP.NET Core / Angular 模板。

后端

打开 Visual Studio 并选择 文件/新建项目。在左侧选择 Visual C#/.NET Core，在右侧选择 ASP.NET Core Web 应用程序。

然后选择 Angular 模板。

现在请按照此处的说明进行操作：https://lynicon.atlassian.net/wiki/spaces/LAC/pages/50036737/Installing+to+a+New+Project+-+VS2017+.Net+4.6.1+.Net+Standard+2.0+Core+2.0

来设置 Lynicon CMS。从“安装 Lynicon”子标题开始，因为您已经创建了项目。请按照可选步骤安装 Storeless 模块，然后继续到最后。这只需要安装几个 Nuget 包并运行 3 条命令。

现在您的项目中已安装了 CMS，但它还没有做任何事情。Lynicon 使用 C# 类来定义内容类型，所以您的第一步是创建一个内容类来保存您在主页上看到的内容。

在项目根目录下创建一个名为 Models 的文件夹，并在其中创建一个名为 HomeContent.cs 的文件。将以下代码剪切并粘贴到该文件中

using Lynicon.Attributes;
using Lynicon.Models;

public class HomeContent : PageContent
{
  [Summary]
  public string Title { get; set; }

  public MedHtml Body { get; set; } = new MedHtml();
}

在 Startup.cs 的 ConfigureServices 方法中，按照如下方式修改对 services.AddLynicon 的调用，并添加 SetDiverter 调用

services.AddLynicon(options => options.UseConfiguration(Configuration.GetSection("Lynicon:Core"))
  .UseModule<CoreModule>()
  .UseModule<Storeless>(Configuration.GetSection("Lynicon:Storeless:Cache"))
).AddLyniconIdentity()
.SetDiverter(new SpaDataDiverter());

这会改变 CMS 路由内容请求的方式，使其能够与 SPA 路由正常协同工作。

然后在 Startup.cs 中，添加带有 MapDataRoute<HomeContent>() 的行，如下所示

routes.MapLyniconRoutes();
routes.MapDataRoute<HomeContent>("home", "");

这会在 / url 上创建一个内容管理的路由。这意味着如果您以内容编辑者的身份登录并访问此 url，Lynicon 将在页面本身旁边显示一个页面内容的编辑器。如果您使用带有 ‘Accept: application/json’ 标头的请求访问此页面，它将以 JSON 格式为您提供该页面的内容数据。

以上是在服务器端设置内容管理所需的所有操作，现在我们需要关注前端！

下载文件 lyniconcontent.zip，从中解压 lynicon-content.ts 并将其放入您的 ClientApp/src/app 文件夹。它包含了一些类，我们可以用它们来转换我们的 Angular 应用程序以与 Lynicon CMS 配合使用。

Angular 路由

首先，我们需要更新我们的 SPA 路由，以便在切换到内容管理的路由时能够获取内容数据。

首先，我们创建一个与服务器端的 HomeContent 类相对应的类。我们在包含主页组件的 home/ 文件夹中的 home.content.ts 文件中创建它。

export class HomeContent {
  title: string;
  body: string;
}

这很简单，但请注意我们在前端使用 JS 驼峰式命名法：ASP.NET Core 中的内置 JSON 格式化器会自动将属性名称更改为以小写字母开头。

在声明路由的地方，我们像这样编辑 / 路由

  { path: '', component: HomeComponent, pathMatch: 'full',
    resolve: { content: ContentResolver }, data: { contentType: HomeContent } },

我们在这里添加了两个额外的属性：resolve 告诉路由在导航到该路由时运行 ContentResolver。此类从后端获取内容。data.contentType 属性用于指定我们的内容类型，以便 ContentResolver 在当前路由上没有内容时返回一个空类型的实例。

现在我们进入 HomeComponent 来使其能够接收内容。

export class HomeComponent implements IContentAwareComponent {
  @FromContent()
  content: HomeContent;

  constructor(public injector: Injector) {
  }
}

我们让该类实现 IContentAwareComponent，方法是将 Injector 依赖项注入到一个自动的 public 属性中。然后我们添加了一个类型为 HomeContent 的属性。该属性上有一个装饰器：@FromContent()，它安排在路由过程中获取的内容数据来初始化该属性。

在标记文件 home.component.html 中，我们现在可以将内容插入到渲染的组件中

<h1>{{content.title}}</h1>
<div [innerHtml]="content.body"></div>

现在我们添加一个额外的调整，使预览页面内的导航能够正常工作，以便我们能够看到所导航到的 URL 的相应内容编辑器。

在路由位置，执行此操作

RouterModule.forRoot([
  { path: '', canActivateChild: [ BypassActivate ], children: [
    { path: '', component: HomeComponent, pathMatch: 'full',
      resolve: { content: ContentResolver }, data: { contentType: HomeContent } },
      ... other routes ...
  ]}
])

我们将所有路由包装成父路由的子路由，并设置 canActivateChild 属性为 BypassActivate。此路由守卫会检查要导航到的路由是否应该显示编辑器，如果显示，它会跳出 Angular 路由并执行正常浏览器导航到所需路由。这会回到服务器以获取内容编辑器以及在适当的 URL 重新加载前端。如果没有这个，路由将全部在预览页面内进行，而无法更改内容编辑器。

添加内容

现在我们已经设置了 SPA 来从后端读取主页的内容，但是目前我们还没有内容记录。如果我们运行该网站，主页组件不会在右侧的区域中渲染任何内容。

要创建主页内容项，请访问 /lynicon/login 登录 CMS。在设置 Lynicon 时，您将提供一个管理员密码，请使用该密码以及用户名 administrator。现在访问 /lynicon/items。此页面列出了 CMS 中的所有内容项，但目前还没有。因此，如果您转到标记为 Home 的栏并单击左侧的展开箭头，将不会出现任何内容。要创建内容项，请单击 Home 栏上的加号。您不需要在出现的栏中输入任何 URL 信息，然后单击右侧的页面图标，您将被带到主页，并看到一个内容编辑器。如果您在 Title 和 Body 字段中输入一些文本并单击 SAVE（按钮在右下角），页面将被创建，您将看到您输入的文本显示在 HomeComponent 区域中。

结论

这仅仅是 .NET Core 上 Angular 和 Lynicon CMS 可能实现的冰山一角。我的下一篇文章将介绍如何使用 Angular 中的模板显示具有不同内容的不同页面，并在 Lynicon 中管理这些页面。包含主页内容控制和多个模板页面的完整测试站点可以在 https://github.com/jamesej/lynicon-angular 找到。Lynicon 的主站点在 http://www.lynicon.com。