×

Payload 简介,一种无头 CMS 和应用程序框架

作者:Terry2024.10.21来源:Web前端之家浏览:540评论:0
关键词:Payload

如果您不想将前端和后端绑定在一起,我们会看一下 Payload,这是一个有趣的 CMS 和应用程序框架选择。

image.png

关于 Web 开发的有趣事情之一就是尝试将视觉设计与数据设计融合在一起。虽然它们需要在网站和 Web 应用中结合在一起,但它们是完全独立的学科。像Ruby on Rails这样的框架一直在努力将它们结合起来。

Payload CMS勇敢地将自己描述为“无头 CMS 和应用程序框架”。虽然我们不将用户界面称为“头”,但无头只是指没有专用前端的框架。内容管理系统 (CMS) 只是一个处理结构化数据的框架。例如,如果数据是博客,那么管理的内容就是帖子。

什么是 Payload页面很好地展示了这一困境,并试图解释其自身的观点。当它认识到 CMS 倾向于“将内容的呈现与内容的存储绑定在一起”时,它就大获成功。因此,Payload 的目标是与您想要使用的任何前端配合使用。

截至目前,Payload 处于一些重大更改和版本 3 之间,因此旧文档可能已过时。按照我的指示,我得到了一个旧版本。

安装

到目前为止,安装先决条件选项对于数据库来说有点狭窄,但有一个关系和一个基于文档的示例可供选择:

image.png

在我的 MacBook 上,我通过 Homebrew 安装了社区MongoDB:

image.png

image.png

然后我通过将 Mongo 添加为服务来启动它:

image.png

我们可以将连接字符串看作 URL,因此我们应该能够设置 Payload。

在另一个浏览器选项卡中,我安装了 Payload 应用程序:

image.png

我建立了一个演示项目,很快我们就可以启动了:

image.png

其中一个示例项目失败了,因为它需要 Discord!正如我所说,由于即将发生的变化,一些文档和视频还不太匹配。这当然是件好事——该项目非常活跃。我选择了 payload-demo 模板,效果很好。

然后“yarn dev”运行该项目:

image.png

连接到 MongoDB 后,它将启动有效负载管理员(在 localhost:3000/admin)以及演示应用程序(标记为 Next.js 应用程序,用于模板的 React 框架)。

有效载荷应用程序

直接进入应用程序我们会看到:

image.png

此时,还没有内容,因此您将被引导至管理仪表板开始制作一些内容。管理仪表板允许我创建带有电子邮件的管理员角色或用户角色。

仪表板本身有助于解释 Payload 的实际含义:

image.png

Payload 将所有内容组织成集合中的类型集。这包括页面和用户。我们可以创建新类型并立即开始使用它们,就像我们将做的那样。

这里有点令人困惑:首先,您按下“种子数据库”链接,您将获得大量演示内容。这将清除所有已存在的内容。您还需要创建一个“主页”,否则您只会看到上面的默认模板页面,这可能会让您认为您没有内容,但实际上您有内容。

当我理解了这个系统后,我就在页面类型上创建了一些简单但毫无新意的内容:

image.png

使用管理界面添加收藏后,您就可以发布任何更改(提交它们)。这将自动更新您的网站。

用代码做所有事情

现在,在这个阶段,我做的还远远不及你能用 Publii 做的事情,Publii也像一个经典的 CMS。然而,Payload 有两点非常突出。你不仅可以在 REST 中与它对话,还可以重用 Payload 的某些部分,从而模糊谁拥有什么的区别。而且,你可以在代码中完成所有事情,这就是我们现在要做的事情。

例如,您可以看到 Users 是一种集合类型,可供我们使用:


image.png

这些注册在哪里?都在文件中。首先将它们导入,然后(如下所示)添加到已知集合中:payload.config.ts

image.png

在 Users 文件夹中,我们有一个基本的 index.ts 文件,它定义了 Users 类型。虽然这包含相当多的 Typescript,但其中大部分只是描述管理员访问权限。Payload 允许相当多的细粒度访问控制:

import type { CollectionConfig } from 'payload/types' 
import { admins } from '../../access/admins' 
import { anyone } from '../../access/anyone' 
import adminsAndUser from './access/adminsAndUser' 
import { checkRole } from './checkRole' 
import { ensureFirstUserIsAdmin } from './hooks/ensureFirstUserIsAdmin' 
import { loginAfterCreate } from './hooks/loginAfterCreate' 
 
const Users: CollectionConfig = { 
  slug: 'users', 
  admin: { 
    useAsTitle: 'name', 
    defaultColumns: ['name', 'email'], 
  }, 
  access: { 
    read: adminsAndUser, 
    create: anyone, 
    update: adminsAndUser, 
    delete: admins, 
    admin: ({ req: { user } }) => checkRole(['admin'], user), 
  }, 
  hooks: { 
    afterChange: [loginAfterCreate], 
  }, 
  auth: true, 
  fields: [ 
    { 
      name: 'name', 
      type: 'text', 
    }, 
    { 
      name: 'roles', 
      type: 'select', 
      hasMany: true, 
      defaultValue: ['user'], 
      options: [ 
        { 
          label: 'admin', 
          value: 'admin', 
        }, 
        { 
          label: 'user', 
          value: 'user', 
        }, 
      ], 
      hooks: { 
        beforeChange: [ensureFirstUserIsAdmin], 
      }, 
      access: { 
        read: admins, 
        create: admins, 
        update: admins, 
      }, 
    }, 
  ], 
  timestamps: true, 
} 
 
export default Users

然而,我们将削减这个功能并创建我们自己的集合类型,不需要管理员或钩子。

假设我们只想要一个名为 Members 的类型。我将创建相应的文件夹并创建一个精简版的 index.ts:

import type { CollectionConfig } from 'payload/types' 
 
const Members: CollectionConfig = { 
  slug: 'members', 
  fields: [ 
    {  
      name: 'name', 
      type: 'text', 
    }, 
    { 
      name: 'membership', 
      type: 'number', 
    }, 
  ], 
  timestamps: true, 
} 
 
export default Members

这只是用名称和数字成员字段来描述类型。Payload 通过不同的字段完成了很多工作。

服务器检测到更改:

image.png

最后一件事。让我们通过 REST 访问我们的新成员:

image.png

所以我们被锁定了。但是等一下……还记得我们为了简化成员集合而删除的细粒度访问权限吗?让我们尝试放回一点:

import type { CollectionConfig } from 'payload/types'
import { anyone } from '../../access/anyone'
 
const Members: CollectionConfig = {
  slug: 'members',
  access: {
    read: anyone,
  },
  fields: [
    {
      name: 'name',
      type: 'text',
    },
    {
      name: 'memebership',
      type: 'number',
    },
  ],
  timestamps: true,
}
 
export default Members

我所做的只是添加“任何人”的导入并添加访问权限。现在让我们尝试一下:

image.png

非常好。我们创建了一个新集合,在管理控制台中看到了它,为其创建了一个条目,甚至通过 REST 请求了它。因此,这些内容现在已可用于我的网站。

结论

正如我之前所说,Payload 目前正在过渡到版本 3,因此在调查之前,可能需要等待一段时间。话虽如此,如果你不坚持让你的前端和后端经历一场大联合,这个想法已经很强大了。


您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/Payloadu23uodf098234.html

网友评论文明上网理性发言 已有0人参与

发表评论: