sanidhyy/e-commerce
GitHub: sanidhyy/e-commerce
一个基于 Next.js 与 Payload 的开源电商商店，提供完整后端与前端模板，解决快速搭建电商网站的需求。
Stars: 50 | Forks: 16
# Tech Haven - 一个开源电商商店
[](https://github.com/sanidhyy "Ask Me Anything!")
[](https://github.com/sanidhyy/e-commerce/blob/main/LICENSE "GitHub license")
[](https://github.com/sanidhyy/e-commerce/commits/main "Maintenance")
[](https://github.com/sanidhyy/e-commerce/branches "GitHub branches")
[](https://github.com/sanidhyy/e-commerce/commits "Github commits")
[](https://github.com/sanidhyy/e-commerce/issues "GitHub issues")
[](https://github.com/sanidhyy/e-commerce/pulls "GitHub pull requests")
## :bangbang: 文件夹结构
这是该应用的文件夹结构。
```
@payloadcms/template-ecommerce/
|- public/
|- src/
|-- app/
|--- _api/
|--- _blocks/
|--- _components/
|--- _css/
|--- _graphql/
|--- _heros/
|--- _providers/
|--- _utilities/
|--- (pages)/
|--- api/
|--- constants/
|--- cssVariables.js
|--- layout.tsx
|--- page.tsx
|-- payload/
|--- access/
|--- blocks/
|--- collections/
|--- components/
|--- endpoints/
|--- fields/
|--- globals/
|--- hooks/
|--- seed/
|--- stripe/
|--- utilities/
|--- dotenv.js
|--- emptyModuleMock.js
|--- generated-schema.graphql
|--- payload-types.ts
|--- payload.config.ts
|-- server.default.ts
|-- server.ts
|- .env.example
|- .env/.env.local
|- .eslintrc.js
|- .gitignore
|- .prettierignore
|- csp.js
|- eject.ts
|- next-env.d.ts
|- next.config.js
|- nodemon.json
|- package.json
|- redirects.js
|- tsconfig.json
|- tsconfig.server.json
|- yarn.lock
```
## :toolbox: 快速开始 1. 确保 **Git** 和 **NodeJS** 已安装。 2. 将此仓库克隆到本地计算机。 3. 在根目录创建 `.env` 文件。 4. `.env` 文件内容： ``` # .env # 在特定端口运行 PORT=3000 # 数据库连接字符串 DATABASE_URI=mongodb://127.0.0.1/payload-template-ecommerce # 用于加密 JWT 令牌 PAYLOAD_SECRET=YOUR_SECRET_HERE # 用于格式化链接和 URL PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000 NEXT_PUBLIC_SERVER_URL=http://localhost:3000 # 启用 Stripe 集成 STRIPE_SECRET_KEY= PAYLOAD_PUBLIC_STRIPE_IS_TEST_KEY=true NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= # 启用 Stripe Webhook（可选） STRIPE_WEBHOOKS_SIGNING_SECRET= # 允许机器人索引网站（可选） NEXT_PUBLIC_IS_LIVE= # 用于预览草稿 PAYLOAD_PUBLIC_DRAFT_SECRET=demo-draft-secret NEXT_PRIVATE_DRAFT_SECRET=demo-draft-secret # 用于重新验证静态页面 REVALIDATION_KEY=demo-revalation-key NEXT_PRIVATE_REVALIDATION_KEY=demo-revalation-key ``` 5. **Payload Secret**: - `PAYLOAD_SECRET`, `PAYLOAD_PUBLIC_DRAFT_SECRET`, `NEXT_PRIVATE_DRAFT_SECRET`, `REVALIDATION_KEY` 和 `NEXT_PRIVATE_REVALIDATION_KEY` 是随机字符串。你可以随机分配它们为任意字符串，或者使用任何在线密码生成器来生成。 6. **Stripe Secret Key**: - `STRIPE_SECRET_KEY`, `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` 由 Stripe 提供，用于设置在线支付。你需要在 Stripe（https://stripe.com/）注册一个账户，登录后从账户仪表板获取这些密钥。  7. **Clerk 的 URL**: - `NEXT_PUBLIC_CLERK_SIGN_IN_URL`, `NEXT_PUBLIC_CLERK_SIGN_UP_URL`, `NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL`, 和 `NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL` 是与你的 Clerk 设置相关的端点或 URL。你可以在 Clerk 仪表板中配置这些。 8. **MongoDB 数据库 URL**: - `DATABASE_URI` 是你的 MongoDB 数据库的连接 URL。你可以从 Payload CMS 仪表板获取连接 URL。  9. **公共应用 URL**: - `PAYLOAD_PUBLIC_SERVER_URL` 和 `NEXT_PUBLIC_SERVER_URL` 是与此项目相关的端点或 URL。你可以根据需要配置或复制这些。 10. 在根目录打开终端。运行 `npm install` 或 `yarn install`。 11. 现在应用已完全配置 👍，你可以使用 `npm run dev` 或 `yarn dev` 启动应用。 ### :books: 附加资源 - Payload 文档: https://payloadcms.com/docs/ - Stripe 文档: https://stripe.com/docs/ - MongoDB 文档: https://www.mongodb.com/docs/ - Express API 文档: https://expressjs.com/en/5x/api.html **注意：** 请确保你的 API 密钥和配置值保持安全，不要公开暴露它们。 ## :camera: 截图：     ## :gear: 技术栈 [](https://react.dev/ "React JS") [](https://nextjs.org/ "Next JS") [](https://www.typescriptlang.org/ "Typescript") [](https://vercel.app/ "Vercel") [](https://tailwindcss.com/ "MongoDB") [](https://graphql.org/ "GraphQL") ## :wrench: 统计 [](https://pagespeed.web.dev "Tech Haven 的统计") ## :raised_hands: 贡献 你可能会在使用此应用时遇到一些错误。欢迎你贡献代码。只需提交 Pull Request，我会在合并前进行审核。请确保遵循社区指南。 ## :gem: 致谢 在《我的个人主页》中使用的有用资源和库 - [@next/eslint-plugin-next](https://www.npmjs.com/package/@next/eslint-plugin-next): ^13.1.6 - [@payloadcms/bundler-webpack](https://www.npmjs.com/package/@payloadcms/bundler-webpack): ^1.0.0 - [@payloadcms/db-mongodb](https://www.npmjs.com/package/@payloadcms/db-mongodb): ^1.0.0 - [@payloadcms/eslint-config](https://www.npmjs.com/package/@payloadcms/eslint-config): ^0.0.1 - [@payloadcms/plugin-cloud](https://www.npmjs.com/package/@payloadcms/plugin-cloud): ^2.2.6 - [@payloadcms/plugin-nested-docs](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs): ^1.0.8 - [@payloadcms/plugin-redirects](https://www.npmjs.com/package/@payloadcms/plugin-redirects): ^1.0.0 - [@payloadcms/plugin-seo](https://www.npmjs.com/package/@payloadcms/plugin-seo): ^1.0.10 - [@payloadcms/plugin-stripe](https://www.npmjs.com/package/@payloadcms/plugin-stripe): ^0.0.14 - [@payloadcms/richtext-slate](https://www.npmjs.com/package/@payloadcms/richtext-slate): ^1.0.0 - [@stripe/react-stripe-js](https://www.npmjs.com/package/@stripe/react-stripe-js): ^1.16.3 - [@stripe/stripe-js](https://www.npmjs.com/package/@stripe/stripe-js): ^1.46.0 - [@swc/core](https://www.npmjs.com/package/@swc/core): 1.3.76 - [@types/escape-html](https://www.npmjs.com/package/@types/escape-html): ^1.0.2 - [@types/express](https://www.npmjs.com/package/@types/express): ^4.17.9 - [@types/node](https://www.npmjs.com/package/@types/node): 18.11.3 - [@types/qs](https://www.npmjs.com/package/@types/qs): ^6.9.8 - [@types/react](https://www.npmjs.com/package/@types/react): 18.0.21 - [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin): ^5.51.0 - [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser): ^5.51.0 - [copyfiles](https://www.npmjs.com/package/copyfiles): ^24.1 - [cross-env](https://www.npmjs.com/package/cross-env): ^7.0.3 - [dotenv](https://www.npmjs.com/package/dotenv): ^8.2.0 - [escape-html](https://www.npmjs.com/package/escape-html): ^1.0.3 - [eslint](https://www.npmjs.com/package/eslint): ^8.19.0 - [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier): ^8.5.0 - [eslint-import-resolver-alias](https://www.npmjs.com/package/eslint-import-resolver-alias): ^1.1.2 - [eslint-plugin-filenames](https://www.npmjs.com/package/eslint-plugin-filenames): ^1.3.2 - [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import): 2.25.4 - [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier): ^4.0.0 - [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks): ^4.6.0 - [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort): ^10.0.0 - [express](https://www.npmjs.com/package/express): ^4.20.0 - [next](https://www.npmjs.com/package/next): 15.5.15 - [nodemon](https://www.npmjs.com/package/nodemon): ^2.0.6 - [payload](https://www.npmjs.com/package/payload): ^3.79.1 - [payload-admin-bar](https://www.npmjs.com/package/payload-admin-bar): ^1.0.6 - [prettier](https://www.npmjs.com/package/prettier): ^2.7.1 - [qs](https://www.npmjs.com/package/qs): 6.14.2 - [react](https://www.npmjs.com/package/react): ^18.2.0 - [react-dom](https://www.npmjs.com/package/react-dom): ^18.2.0 - [react-hook-form](https://www.npmjs.com/package/react-hook-form): ^7.45.1 - [react-router-dom](https://www.npmjs.com/package/react-router-dom): 5.3.4 - [slate](https://www.npmjs.com/package/slate): 0.91.4 - [stripe](https://www.npmjs.com/package/stripe): ^10.2.0 - [ts-node](https://www.npmjs.com/package/ts-node): ^10.9.1 - [typescript](https://www.npmjs.com/package/typescript): ^4.8.4 ## :books: 了解更多 要了解更多关于 Next.js 的信息，请参考以下资源： - [Next.js 文档](https://nextjs.org/docs) - 了解 Next.js 的特性和 API。 - [学习 Next.js](https://nextjs.org/learn) - 一个交互式的 Next.js 教程。 你可以查看 [Next.js 的 GitHub 仓库](https://github.com/vercel/next.js/) - 欢迎提供反馈和贡献！ # Payload E-Commerce 模板 这是官方的 [Payload E-Commerce 模板](https://github.com/payloadcms/payload/blob/main/templates/ecommerce)。使用它来支持各种规模的电子商务业务和在线商店。此仓库包含一个完整的后端、企业级管理面板，以及一个设计精美、生产就绪的网站。 如果你的业务涉及以下产品，此模板适合你： - 服装或商品等实体产品 - 电子书或视频等数字资产 - 课程或付费文章等内容访问权限 核心功能： - [预配置的 Payload 配置](#how-it-works) - [身份验证](#users-authentication) - [访问控制](#access-control) - [购物车](#shopping-cart) - [结账](#checkout) - [付费墙](#paywall) - [布局构建器](#layout-builder) - [SEO](#seo) - [网站](#website) ## 快速开始 要在本地运行此示例，请按照以下步骤操作： ### 克隆 如果你还没有克隆此仓库，请确保在机器上拥有此仓库的独立副本。如果已经克隆了此仓库，请跳过 [开发](#开发)。 #### 方法 1（推荐） 前往 Payload Cloud 并 [克隆此模板](https://payloadcms.com/new/clone/ecommerce)。这将在你的 GitHub 账户中创建一个包含此模板代码的新仓库，然后你可以将其克隆到你的机器上。 #### 方法 2 使用 `create-payload-app` CLI 直接将此模板克隆到你的机器： ``` npx create-payload-app@latest my-project -t ecommerce ``` #### 方法 3 使用 `git` CLI 直接将此模板克隆到你的机器： ``` git clone -n --depth=1 --filter=tree:0 https://github.com/payloadcms/payload my-project && cd my-project && git sparse-checkout set --no-cone templates/ecommerce && git checkout && rm -rf .git && git init && git add . && git mv -f templates/ecommerce/{.,}* . && git add . && git commit -m "Initial commit" ``` ### 开发 1. 首先 [克隆仓库](#clone)，如果尚未完成。 2. `cd my-project && cp .env.example .env` 复制示例环境变量。 3. `yarn && yarn dev` 安装依赖并启动开发服务器。 4. 打开 `http://localhost:3000` 在浏览器中打开应用。 就这样！对 `./src` 的更改将反映在你的应用中。按照屏幕上的说明登录并创建你的第一个管理员用户。要开始接受付款，请遵循 [Stripe](#stripe) 指南。然后在准备好构建和提供应用后，查看 [生产环境](#production)，并在准备上线时查看 [部署](#deployment)。 ## 工作原理 Payload 配置专门针对大多数电子商务业务的需求进行了定制。它以以下方式预先配置： ### 集合 请参阅 [集合](https://payloadcms.com/docs/configuration/collections) 文档了解如何扩展此功能。 - 用户（身份验证） 用户已启用身份验证，并根据其 `roles` 字段同时包含管理员和客户。只有 `admin` 用户可以访问你的管理面板来管理你的商店，而 `customer` 可以在前端进行身份验证以创建 [购物车](#shopping-cart) 并下 [订单](#orders)，但对平台的访问权限有限。有关详细信息，请参阅 [访问控制](#access-control)。 如需更多帮助，请参阅官方 [身份验证示例](https://github.com/payloadcms/payload/tree/main/examples/auth) 或 [身份验证](https://payloadcms.com/docs/authentication/overview#authentication-overview) 文档。 - 产品 产品通过自定义选择字段与 Stripe 关联，该字段在每个产品的侧边栏中动态填充。此字段获取所有可用的产品并将其显示为选项。选择产品后，价格会在 Stripe 和 Payload 之间自动同步，通过 [Payload Hooks](https://payloadcms.com/docs/hooks) 和 [Stripe Webhooks](https://stripe.com/docs/webhooks)。有关详细信息，请参阅 [Stripe](#stripe)。 所有产品都启用了布局构建器，因此你可以使用布局构建块为每个产品生成唯一的页面，请参阅 [布局构建器](#layout-builder) 了解详细信息。 产品还可以限制对内容或数字资产的付费墙访问，请参阅 [付费墙](#paywall) 了解详细信息。 - 订单 当用户成功完成结账时，会创建订单。订单包含订单的所有数据，包括购买的产品、总价格和下单用户。请参阅 [结账](#checkout) 了解详细信息。 - 页面 所有页面都启用了布局构建器，因此你可以使用布局构建块为每个页面生成唯一的布局，请参阅 [布局构建器](#layout-builder) 了解详细信息。 - 媒体 这是一个启用了上传功能的集合，用于存储产品和页面中的媒体，如图像、视频、下载文件和其他资产。 - 分类 一种分类法，用于将产品分组。分类可以嵌套，例如“课程 > 技术”。有关详细信息，请参阅官方 [Payload 嵌套文档插件](https://github.com/payloadcms/plugin-nested-docs)。 ### 全局变量 请参阅 [全局变量](https://payloadcms.com/docs/configuration/globals) 文档了解如何扩展此功能。 - `Header` 前端页面所需的导航链接数据。 - `Footer` 与上述相同，但用于网站页脚。 ## 访问控制 已设置基于角色的访问控制，以确定用户可以或不可以执行的操作，具体取决于其角色，角色包括： - `admin`：他们可以访问 Payload 管理面板来管理你的商店。他们可以查看所有数据并执行所有操作。 - `customer`：他们无法访问 Payload 管理面板，并且只能根据其用户权限执行有限的操作（请参见下文）。 这适用于每个集合，如下： - `users`：只有管理员和用户本人可以访问他们的个人资料。任何人都可以创建用户，但只有管理员可以删除用户。 - `products`：每个人都可以访问产品，但只有管理员可以创建、更新或删除它们。启用了付费墙的产品可能还包含只有购买了该产品的用户才能访问的内容。请参阅 [付费墙](#paywall) 了解详细信息。 有关如何扩展此功能的详细信息，请参阅 [Payload 访问控制文档](https://payloadcms.com/docs/access-control/overview#access-control)。 ## 购物车 已登录用户可以将他们的购物车保存到个人资料中，以便在后续日期或另一设备上继续购物。未登录时，购物车可以保存到本地存储，并在下次登录时同步到 Payload。这通过在 `user` 上维护一个 `cart` 字段来实现： ``` { name: 'cart', label: 'Shopping Cart', type: 'object', fields: [ { name: 'items', label: 'Items', type: 'array', fields: [ // product, quantity, etc ] }, // other metadata like `createdOn`, etc ] } ``` ## Stripe Payload 本身不处理货币兑换。所有支付都使用 [Stripe](https://stripe.com/) 进行处理。这意味着你必须拥有一个 Stripe 账户并通过 API 密钥访问它，请参阅 [连接 Stripe](#connect-stripe) 了解如何获取。在 Payload 中创建要销售的产品时，必须通过选择产品侧边栏中的选项将其连接到 Stripe 产品，请参阅 [产品](#products) 了解详细信息。设置后，数据会在以下方式中自动在两个平台之间同步： 1. Stripe 到 Payload，使用 [Stripe Webhooks](https://stripe.com/docs/webhooks)： - `product.created` - `product.updated` - `price.updated` 2. Payload 到 Stripe，使用 [Payload Hooks](https://payloadcms.com/docs/hooks)： - `user.create` 有关如何扩展此功能的详细信息，请参阅官方 [Payload Stripe 插件](https://payloadcms.com/docs/plugins/stripe)。 ### 连接 Stripe 要集成 Stripe，请按照以下步骤操作： 1. 首先，如果你还没有 Stripe 账户，请创建一个 [Stripe](https://stripe.com/) 账户。 2. 检索你的 [Stripe API 密钥](https://stripe.com/docs/api/authentication) 并将其粘贴到你的 `env` 中： ``` STRIPE_SECRET_KEY= NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= ``` 3. 在另一个终端中，监听 webhook（可选）： ``` stripe login # 按照提示操作 yarn stripe:webhooks ``` 4. 将给定的 webhook 签名密钥粘贴到你的 `env` 中： ``` STRIPE_WEBHOOKS_SIGNING_SECRET= ``` 5. 重启 Payload 以确保 Stripe 连接并注册 webhook。 ## 结账 一个自定义端点 `POST /api/create-payment-intent` 会启动结账流程。该端点汇总你的购物车并创建一个 [Stripe Payment Intent](https://stripe.com/docs/payment-intents)。总价格会在服务器上重新计算以确保准确性和安全性，完成后将 `client_secret` 返回给前端以完成支付。支付成功后，会在 Payload 中创建一个 [订单](https://payloadcms.com/docs/collections/orders)，其中包含 `stripePaymentIntentID`。每个购买的产品都会记录到用户的个人资料中，并且用户的购物车会自动清空。 ## 付费墙 产品可以可选地限制对内容或数字资产的付费墙访问。这要求在购买产品后才能访问其数据和资源。为此，会在每个用户上维护一个 `purchases` 字段来跟踪他们的购买历史： ``` { name: 'purchases', label: 'Purchases', type: 'array', fields: [ { name: 'product', label: 'Product', type: 'relationship', relationTo: 'products', }, // other metadata like `createdOn`, etc ] } ``` 然后，会在 `product` 中添加一个 `paywall` 字段，其 `read` 访问控制会检查相关的购买记录。每次用户请求产品时，只有已购买的用户才能返回数据： ``` { name: 'paywall', label: 'Paywall', type: 'blocks', access: { read: checkUserPurchases, }, fields: [ // assets ] } ``` ## 布局构建器 使用功能强大的布局构建器为任何类型的内容创建独特的产品和页面布局。此模板预配置了以下布局构建块： - 英雄（Hero） - 内容（Content） - 媒体（Media） - 呼吁行动（Call To Action） - 归档（Archive） 每个块都经过完整设计，并构建在前端网站中。请参阅 [网站](#website) 了解详细信息。 ## 预览草稿 所有页面和产品都启用了草稿模式，以便在发布到网站之前预览它们。为此，这些集合使用了 [版本](https://payloadcms.com/docs/versions) 功能，其中 `drafts` 设置为 `true`。这意味着当你创建新页面或产品时，它会被保存为草稿，并且不会在网站上显示，直到你发布它。这也意味着你可以在发布到网站之前预览你的草稿。为此，我们自动格式化一个自定义 URL，该 URL 会重定向到你的前端以安全地获取内容的草稿版本。 由于前端模板是静态生成的，这也意味着页面和产品在发布文档后需要重新生成。要实现这一点，我们使用 `afterChange` 钩子在文档更改且 `_status` 为 `published` 时重新生成前端。 有关如何扩展此功能的详细信息，请参阅官方 [草稿预览示例](https://github.com/payloadcms/payload/tree/main/examples/draft-preview)。 ## SEO 此模板预先配置了官方的 [Payload SEO 插件](https://payloadcms.com/docs/plugins/seo)，以实现对 SEO 的完全控制。SEO 数据完全集成到前端网站中。请参阅 [网站](#website) 了解详细信息。 ## 重定向 如果你正在迁移现有站点或将内容移动到新 URL，可以使用 `redirects` 集合创建从旧 URL 到新 URL 的适当重定向。这将确保向搜索引擎返回正确的状态码，并且你的用户不会遇到断开的链接。此模板预先配置了官方的 [Payload 重定向插件](https://payloadcms.com/docs/plugins/redirects)，以实现完全的重定向控制。请参阅 [网站](#website) 了解详细信息。 ## 网站 此模板包含一个使用 [Next.js App Router](https://nextjs.org/docs/app) 构建的精美设计、生产就绪的前端，与 Payload 应用一起在一个 Express 服务器中提供。这使得你可以同时部署这两个应用并一起托管。如果你更喜欢不同的前端框架，这种模式适用于任何支持自定义服务器的框架。如果你希望将网站与 Payload 分开，你可以轻松 [弹出](#eject) 前端以替换为你自己的前端，或将其用作独立的 CMS。有关详细信息，请参阅官方 [自定义服务器示例](https://github.com/payloadcms/payload/tree/main/examples/custom-server)。 核心功能： - [Next.js App Router](https://nextjs.org/docs/app) - [Stripe](https://stripe.com/) - [GraphQL](https://graphql.org/) - [TypeScript](https://www.typescriptlang.org/) - [React Hook Form](https://reacthookform.com/) - [Payload Admin Bar](https://payloadcms.com/docs/admin-bar) - 身份验证 - 发布工作流程 - 购物车 - 结账 - 客户账户 - 深色模式 - 预制作的布局构建块 - SEO - 重定向 - 付费墙 ### 缓存 尽管 Next.js 提供了强大的内置缓存策略，Payload Cloud 会通过 Cloudflare 代理并缓存所有文件，使用 [官方 Cloud 插件](https://payloadcms.com/docs/plugins/cloud)。这意味着不需要 Next.js 缓存，并且默认情况下是禁用的。如果你在 Payload Cloud 之外托管应用，可以轻松重新启用 Next.js 缓存机制，通过从 `./src/app/_api` 中删除 `no-store` 指令，并从页面文件中删除所有 `export const dynamic = 'force-dynamic'` 实例，例如 `./src/app/(pages)/[slug]/page.tsx`。有关详细信息，请参阅官方 [Next.js 缓存文档](https://nextjs.org/docs/app/building-your-application/data-fetching/caching)。 ### 弹出 如果你更喜欢另一种前端框架或希望使用 Payload 作为独立的 CMS，可以轻松弹出前端。要弹出，请运行 `yarn eject`。这将卸载所有 Next.js 相关依赖项并删除与 Next.js 前端相关的所有文件和文件夹。它还会从 `server.ts` 文件中删除所有自定义路由，并更新你的 `eslintrc.js`。 ## 开发 要本地运行此示例，请按照 [快速开始](#快速开始) 操作。然后 [连接 Stripe](#连接-stripe) 以启用支付，并使用 [Seed](#seed) 向数据库中添加一些产品和页面。 ### Docker 或者，你可以使用 [Docker](https://docker.com/) 来本地运行此模板。要执行此操作，请按照以下步骤操作： 1. 按照上面的 [步骤 1 和 2](#development)，`docker-compose` 文件将自动使用项目根目录中的 `.env` 文件。 2. 接下来运行 `docker-compose up`。 3. 按照上面的 [步骤 4 和 5](#development) 登录并创建第一个管理员用户。 就这样！Docker 实例将帮助你快速启动并标准化团队中的开发环境。 ### Seed 要向数据库中添加一些产品和页面，你可以运行 `yarn seed`。此模板还提供了一个 `GET /api/seed` 端点，你可以在管理面板中使用它来填充数据库。 ## 生产 要在生产中运行 Payload，你需要构建并管理管理面板。要执行此操作，请按照以下步骤操作： 1. 运行 `payload build` 脚本，通过运行 `yarn build` 或 `npm run build` 在项目根目录中创建生产就绪的管理包。 2. 最后运行 `yarn serve` 或 `npm run serve` 以在 `./build` 目录中运行 Node 并提供 Payload。 3. 准备上线时，请参阅 [部署](#deployment) 获取更多详细信息。 ### 部署 在部署应用之前，你需要： 1. 将 [你的 Stripe 账户切换到生产模式](https://stripe.com/docs/test-mode) 并更新你的 [Stripe API 密钥](https://dashboard.stripe.com/test/apikeys)。有关详细信息，请参阅 [连接 Stripe](#connect-stripe)。 2. 确保你的应用可以构建并在生产环境中运行。请参阅 [生产环境](#production) 获取更多详细信息。 部署项目的最简单方法是使用 [Payload Cloud](https://payloadcms.com/new/import)，这是一个一键式托管解决方案，可直接从 GitHub 仓库部署生产就绪的 Payload 应用实例。你也可以手动部署你的应用，请参阅 [部署文档](https://payloadcms.com/docs/production/deployment) 获取完整详细信息。 ## 问题 如果你有任何问题或疑问，请访问 [Discord](https://discord.com/invite/payload) 或启动 [GitHub 讨论](https://github.com/payloadcms/payload/discussions)。 ## :star: 给个 Star 你也可以给这个仓库一个 Star，以向更多人展示并让他们可以使用此仓库。 ## :star2: Star 历史
# :notebook_with_decorative_cover: 目录
- [文件夹结构](#bangbang-folder-structure) - [快速开始](#toolbox-getting-started) - [截图](#camera-screenshots) - [技术栈](#gear-tech-stack) - [统计](#wrench-stats) - [贡献](#raised_hands-contribute) - [致谢](#gem-acknowledgements) - [请我喝杯咖啡](#coffee-buy-me-a-coffee) - [关注我](#rocket-follow-me) - [了解更多](#books-learn-more) - [部署到 Vercel](#page_with_curl-deploy-on-vercel) - [给个 Star](#star-give-a-star) - [Star 历史](#star2-star-history) - [给个 Star](#star-give-a-star)## :toolbox: 快速开始 1. 确保 **Git** 和 **NodeJS** 已安装。 2. 将此仓库克隆到本地计算机。 3. 在根目录创建 `.env` 文件。 4. `.env` 文件内容： ``` # .env # 在特定端口运行 PORT=3000 # 数据库连接字符串 DATABASE_URI=mongodb://127.0.0.1/payload-template-ecommerce # 用于加密 JWT 令牌 PAYLOAD_SECRET=YOUR_SECRET_HERE # 用于格式化链接和 URL PAYLOAD_PUBLIC_SERVER_URL=http://localhost:3000 NEXT_PUBLIC_SERVER_URL=http://localhost:3000 # 启用 Stripe 集成 STRIPE_SECRET_KEY= PAYLOAD_PUBLIC_STRIPE_IS_TEST_KEY=true NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= # 启用 Stripe Webhook（可选） STRIPE_WEBHOOKS_SIGNING_SECRET= # 允许机器人索引网站（可选） NEXT_PUBLIC_IS_LIVE= # 用于预览草稿 PAYLOAD_PUBLIC_DRAFT_SECRET=demo-draft-secret NEXT_PRIVATE_DRAFT_SECRET=demo-draft-secret # 用于重新验证静态页面 REVALIDATION_KEY=demo-revalation-key NEXT_PRIVATE_REVALIDATION_KEY=demo-revalation-key ``` 5. **Payload Secret**: - `PAYLOAD_SECRET`, `PAYLOAD_PUBLIC_DRAFT_SECRET`, `NEXT_PRIVATE_DRAFT_SECRET`, `REVALIDATION_KEY` 和 `NEXT_PRIVATE_REVALIDATION_KEY` 是随机字符串。你可以随机分配它们为任意字符串，或者使用任何在线密码生成器来生成。 6. **Stripe Secret Key**: - `STRIPE_SECRET_KEY`, `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY` 由 Stripe 提供，用于设置在线支付。你需要在 Stripe（https://stripe.com/）注册一个账户，登录后从账户仪表板获取这些密钥。  7. **Clerk 的 URL**: - `NEXT_PUBLIC_CLERK_SIGN_IN_URL`, `NEXT_PUBLIC_CLERK_SIGN_UP_URL`, `NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL`, 和 `NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL` 是与你的 Clerk 设置相关的端点或 URL。你可以在 Clerk 仪表板中配置这些。 8. **MongoDB 数据库 URL**: - `DATABASE_URI` 是你的 MongoDB 数据库的连接 URL。你可以从 Payload CMS 仪表板获取连接 URL。  9. **公共应用 URL**: - `PAYLOAD_PUBLIC_SERVER_URL` 和 `NEXT_PUBLIC_SERVER_URL` 是与此项目相关的端点或 URL。你可以根据需要配置或复制这些。 10. 在根目录打开终端。运行 `npm install` 或 `yarn install`。 11. 现在应用已完全配置 👍，你可以使用 `npm run dev` 或 `yarn dev` 启动应用。 ### :books: 附加资源 - Payload 文档: https://payloadcms.com/docs/ - Stripe 文档: https://stripe.com/docs/ - MongoDB 文档: https://www.mongodb.com/docs/ - Express API 文档: https://expressjs.com/en/5x/api.html **注意：** 请确保你的 API 密钥和配置值保持安全，不要公开暴露它们。 ## :camera: 截图：     ## :gear: 技术栈 [](https://react.dev/ "React JS") [](https://nextjs.org/ "Next JS") [](https://www.typescriptlang.org/ "Typescript") [](https://vercel.app/ "Vercel") [](https://tailwindcss.com/ "MongoDB") [](https://graphql.org/ "GraphQL") ## :wrench: 统计 [](https://pagespeed.web.dev "Tech Haven 的统计") ## :raised_hands: 贡献 你可能会在使用此应用时遇到一些错误。欢迎你贡献代码。只需提交 Pull Request，我会在合并前进行审核。请确保遵循社区指南。 ## :gem: 致谢 在《我的个人主页》中使用的有用资源和库 - [@next/eslint-plugin-next](https://www.npmjs.com/package/@next/eslint-plugin-next): ^13.1.6 - [@payloadcms/bundler-webpack](https://www.npmjs.com/package/@payloadcms/bundler-webpack): ^1.0.0 - [@payloadcms/db-mongodb](https://www.npmjs.com/package/@payloadcms/db-mongodb): ^1.0.0 - [@payloadcms/eslint-config](https://www.npmjs.com/package/@payloadcms/eslint-config): ^0.0.1 - [@payloadcms/plugin-cloud](https://www.npmjs.com/package/@payloadcms/plugin-cloud): ^2.2.6 - [@payloadcms/plugin-nested-docs](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs): ^1.0.8 - [@payloadcms/plugin-redirects](https://www.npmjs.com/package/@payloadcms/plugin-redirects): ^1.0.0 - [@payloadcms/plugin-seo](https://www.npmjs.com/package/@payloadcms/plugin-seo): ^1.0.10 - [@payloadcms/plugin-stripe](https://www.npmjs.com/package/@payloadcms/plugin-stripe): ^0.0.14 - [@payloadcms/richtext-slate](https://www.npmjs.com/package/@payloadcms/richtext-slate): ^1.0.0 - [@stripe/react-stripe-js](https://www.npmjs.com/package/@stripe/react-stripe-js): ^1.16.3 - [@stripe/stripe-js](https://www.npmjs.com/package/@stripe/stripe-js): ^1.46.0 - [@swc/core](https://www.npmjs.com/package/@swc/core): 1.3.76 - [@types/escape-html](https://www.npmjs.com/package/@types/escape-html): ^1.0.2 - [@types/express](https://www.npmjs.com/package/@types/express): ^4.17.9 - [@types/node](https://www.npmjs.com/package/@types/node): 18.11.3 - [@types/qs](https://www.npmjs.com/package/@types/qs): ^6.9.8 - [@types/react](https://www.npmjs.com/package/@types/react): 18.0.21 - [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin): ^5.51.0 - [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser): ^5.51.0 - [copyfiles](https://www.npmjs.com/package/copyfiles): ^24.1 - [cross-env](https://www.npmjs.com/package/cross-env): ^7.0.3 - [dotenv](https://www.npmjs.com/package/dotenv): ^8.2.0 - [escape-html](https://www.npmjs.com/package/escape-html): ^1.0.3 - [eslint](https://www.npmjs.com/package/eslint): ^8.19.0 - [eslint-config-prettier](https://www.npmjs.com/package/eslint-config-prettier): ^8.5.0 - [eslint-import-resolver-alias](https://www.npmjs.com/package/eslint-import-resolver-alias): ^1.1.2 - [eslint-plugin-filenames](https://www.npmjs.com/package/eslint-plugin-filenames): ^1.3.2 - [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import): 2.25.4 - [eslint-plugin-prettier](https://www.npmjs.com/package/eslint-plugin-prettier): ^4.0.0 - [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks): ^4.6.0 - [eslint-plugin-simple-import-sort](https://www.npmjs.com/package/eslint-plugin-simple-import-sort): ^10.0.0 - [express](https://www.npmjs.com/package/express): ^4.20.0 - [next](https://www.npmjs.com/package/next): 15.5.15 - [nodemon](https://www.npmjs.com/package/nodemon): ^2.0.6 - [payload](https://www.npmjs.com/package/payload): ^3.79.1 - [payload-admin-bar](https://www.npmjs.com/package/payload-admin-bar): ^1.0.6 - [prettier](https://www.npmjs.com/package/prettier): ^2.7.1 - [qs](https://www.npmjs.com/package/qs): 6.14.2 - [react](https://www.npmjs.com/package/react): ^18.2.0 - [react-dom](https://www.npmjs.com/package/react-dom): ^18.2.0 - [react-hook-form](https://www.npmjs.com/package/react-hook-form): ^7.45.1 - [react-router-dom](https://www.npmjs.com/package/react-router-dom): 5.3.4 - [slate](https://www.npmjs.com/package/slate): 0.91.4 - [stripe](https://www.npmjs.com/package/stripe): ^10.2.0 - [ts-node](https://www.npmjs.com/package/ts-node): ^10.9.1 - [typescript](https://www.npmjs.com/package/typescript): ^4.8.4 ## :books: 了解更多 要了解更多关于 Next.js 的信息，请参考以下资源： - [Next.js 文档](https://nextjs.org/docs) - 了解 Next.js 的特性和 API。 - [学习 Next.js](https://nextjs.org/learn) - 一个交互式的 Next.js 教程。 你可以查看 [Next.js 的 GitHub 仓库](https://github.com/vercel/next.js/) - 欢迎提供反馈和贡献！ # Payload E-Commerce 模板 这是官方的 [Payload E-Commerce 模板](https://github.com/payloadcms/payload/blob/main/templates/ecommerce)。使用它来支持各种规模的电子商务业务和在线商店。此仓库包含一个完整的后端、企业级管理面板，以及一个设计精美、生产就绪的网站。 如果你的业务涉及以下产品，此模板适合你： - 服装或商品等实体产品 - 电子书或视频等数字资产 - 课程或付费文章等内容访问权限 核心功能： - [预配置的 Payload 配置](#how-it-works) - [身份验证](#users-authentication) - [访问控制](#access-control) - [购物车](#shopping-cart) - [结账](#checkout) - [付费墙](#paywall) - [布局构建器](#layout-builder) - [SEO](#seo) - [网站](#website) ## 快速开始 要在本地运行此示例，请按照以下步骤操作： ### 克隆 如果你还没有克隆此仓库，请确保在机器上拥有此仓库的独立副本。如果已经克隆了此仓库，请跳过 [开发](#开发)。 #### 方法 1（推荐） 前往 Payload Cloud 并 [克隆此模板](https://payloadcms.com/new/clone/ecommerce)。这将在你的 GitHub 账户中创建一个包含此模板代码的新仓库，然后你可以将其克隆到你的机器上。 #### 方法 2 使用 `create-payload-app` CLI 直接将此模板克隆到你的机器： ``` npx create-payload-app@latest my-project -t ecommerce ``` #### 方法 3 使用 `git` CLI 直接将此模板克隆到你的机器： ``` git clone -n --depth=1 --filter=tree:0 https://github.com/payloadcms/payload my-project && cd my-project && git sparse-checkout set --no-cone templates/ecommerce && git checkout && rm -rf .git && git init && git add . && git mv -f templates/ecommerce/{.,}* . && git add . && git commit -m "Initial commit" ``` ### 开发 1. 首先 [克隆仓库](#clone)，如果尚未完成。 2. `cd my-project && cp .env.example .env` 复制示例环境变量。 3. `yarn && yarn dev` 安装依赖并启动开发服务器。 4. 打开 `http://localhost:3000` 在浏览器中打开应用。 就这样！对 `./src` 的更改将反映在你的应用中。按照屏幕上的说明登录并创建你的第一个管理员用户。要开始接受付款，请遵循 [Stripe](#stripe) 指南。然后在准备好构建和提供应用后，查看 [生产环境](#production)，并在准备上线时查看 [部署](#deployment)。 ## 工作原理 Payload 配置专门针对大多数电子商务业务的需求进行了定制。它以以下方式预先配置： ### 集合 请参阅 [集合](https://payloadcms.com/docs/configuration/collections) 文档了解如何扩展此功能。 - 用户（身份验证） 用户已启用身份验证，并根据其 `roles` 字段同时包含管理员和客户。只有 `admin` 用户可以访问你的管理面板来管理你的商店，而 `customer` 可以在前端进行身份验证以创建 [购物车](#shopping-cart) 并下 [订单](#orders)，但对平台的访问权限有限。有关详细信息，请参阅 [访问控制](#access-control)。 如需更多帮助，请参阅官方 [身份验证示例](https://github.com/payloadcms/payload/tree/main/examples/auth) 或 [身份验证](https://payloadcms.com/docs/authentication/overview#authentication-overview) 文档。 - 产品 产品通过自定义选择字段与 Stripe 关联，该字段在每个产品的侧边栏中动态填充。此字段获取所有可用的产品并将其显示为选项。选择产品后，价格会在 Stripe 和 Payload 之间自动同步，通过 [Payload Hooks](https://payloadcms.com/docs/hooks) 和 [Stripe Webhooks](https://stripe.com/docs/webhooks)。有关详细信息，请参阅 [Stripe](#stripe)。 所有产品都启用了布局构建器，因此你可以使用布局构建块为每个产品生成唯一的页面，请参阅 [布局构建器](#layout-builder) 了解详细信息。 产品还可以限制对内容或数字资产的付费墙访问，请参阅 [付费墙](#paywall) 了解详细信息。 - 订单 当用户成功完成结账时，会创建订单。订单包含订单的所有数据，包括购买的产品、总价格和下单用户。请参阅 [结账](#checkout) 了解详细信息。 - 页面 所有页面都启用了布局构建器，因此你可以使用布局构建块为每个页面生成唯一的布局，请参阅 [布局构建器](#layout-builder) 了解详细信息。 - 媒体 这是一个启用了上传功能的集合，用于存储产品和页面中的媒体，如图像、视频、下载文件和其他资产。 - 分类 一种分类法，用于将产品分组。分类可以嵌套，例如“课程 > 技术”。有关详细信息，请参阅官方 [Payload 嵌套文档插件](https://github.com/payloadcms/plugin-nested-docs)。 ### 全局变量 请参阅 [全局变量](https://payloadcms.com/docs/configuration/globals) 文档了解如何扩展此功能。 - `Header` 前端页面所需的导航链接数据。 - `Footer` 与上述相同，但用于网站页脚。 ## 访问控制 已设置基于角色的访问控制，以确定用户可以或不可以执行的操作，具体取决于其角色，角色包括： - `admin`：他们可以访问 Payload 管理面板来管理你的商店。他们可以查看所有数据并执行所有操作。 - `customer`：他们无法访问 Payload 管理面板，并且只能根据其用户权限执行有限的操作（请参见下文）。 这适用于每个集合，如下： - `users`：只有管理员和用户本人可以访问他们的个人资料。任何人都可以创建用户，但只有管理员可以删除用户。 - `products`：每个人都可以访问产品，但只有管理员可以创建、更新或删除它们。启用了付费墙的产品可能还包含只有购买了该产品的用户才能访问的内容。请参阅 [付费墙](#paywall) 了解详细信息。 有关如何扩展此功能的详细信息，请参阅 [Payload 访问控制文档](https://payloadcms.com/docs/access-control/overview#access-control)。 ## 购物车 已登录用户可以将他们的购物车保存到个人资料中，以便在后续日期或另一设备上继续购物。未登录时，购物车可以保存到本地存储，并在下次登录时同步到 Payload。这通过在 `user` 上维护一个 `cart` 字段来实现： ``` { name: 'cart', label: 'Shopping Cart', type: 'object', fields: [ { name: 'items', label: 'Items', type: 'array', fields: [ // product, quantity, etc ] }, // other metadata like `createdOn`, etc ] } ``` ## Stripe Payload 本身不处理货币兑换。所有支付都使用 [Stripe](https://stripe.com/) 进行处理。这意味着你必须拥有一个 Stripe 账户并通过 API 密钥访问它，请参阅 [连接 Stripe](#connect-stripe) 了解如何获取。在 Payload 中创建要销售的产品时，必须通过选择产品侧边栏中的选项将其连接到 Stripe 产品，请参阅 [产品](#products) 了解详细信息。设置后，数据会在以下方式中自动在两个平台之间同步： 1. Stripe 到 Payload，使用 [Stripe Webhooks](https://stripe.com/docs/webhooks)： - `product.created` - `product.updated` - `price.updated` 2. Payload 到 Stripe，使用 [Payload Hooks](https://payloadcms.com/docs/hooks)： - `user.create` 有关如何扩展此功能的详细信息，请参阅官方 [Payload Stripe 插件](https://payloadcms.com/docs/plugins/stripe)。 ### 连接 Stripe 要集成 Stripe，请按照以下步骤操作： 1. 首先，如果你还没有 Stripe 账户，请创建一个 [Stripe](https://stripe.com/) 账户。 2. 检索你的 [Stripe API 密钥](https://stripe.com/docs/api/authentication) 并将其粘贴到你的 `env` 中： ``` STRIPE_SECRET_KEY= NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY= ``` 3. 在另一个终端中，监听 webhook（可选）： ``` stripe login # 按照提示操作 yarn stripe:webhooks ``` 4. 将给定的 webhook 签名密钥粘贴到你的 `env` 中： ``` STRIPE_WEBHOOKS_SIGNING_SECRET= ``` 5. 重启 Payload 以确保 Stripe 连接并注册 webhook。 ## 结账 一个自定义端点 `POST /api/create-payment-intent` 会启动结账流程。该端点汇总你的购物车并创建一个 [Stripe Payment Intent](https://stripe.com/docs/payment-intents)。总价格会在服务器上重新计算以确保准确性和安全性，完成后将 `client_secret` 返回给前端以完成支付。支付成功后，会在 Payload 中创建一个 [订单](https://payloadcms.com/docs/collections/orders)，其中包含 `stripePaymentIntentID`。每个购买的产品都会记录到用户的个人资料中，并且用户的购物车会自动清空。 ## 付费墙 产品可以可选地限制对内容或数字资产的付费墙访问。这要求在购买产品后才能访问其数据和资源。为此，会在每个用户上维护一个 `purchases` 字段来跟踪他们的购买历史： ``` { name: 'purchases', label: 'Purchases', type: 'array', fields: [ { name: 'product', label: 'Product', type: 'relationship', relationTo: 'products', }, // other metadata like `createdOn`, etc ] } ``` 然后，会在 `product` 中添加一个 `paywall` 字段，其 `read` 访问控制会检查相关的购买记录。每次用户请求产品时，只有已购买的用户才能返回数据： ``` { name: 'paywall', label: 'Paywall', type: 'blocks', access: { read: checkUserPurchases, }, fields: [ // assets ] } ``` ## 布局构建器 使用功能强大的布局构建器为任何类型的内容创建独特的产品和页面布局。此模板预配置了以下布局构建块： - 英雄（Hero） - 内容（Content） - 媒体（Media） - 呼吁行动（Call To Action） - 归档（Archive） 每个块都经过完整设计，并构建在前端网站中。请参阅 [网站](#website) 了解详细信息。 ## 预览草稿 所有页面和产品都启用了草稿模式，以便在发布到网站之前预览它们。为此，这些集合使用了 [版本](https://payloadcms.com/docs/versions) 功能，其中 `drafts` 设置为 `true`。这意味着当你创建新页面或产品时，它会被保存为草稿，并且不会在网站上显示，直到你发布它。这也意味着你可以在发布到网站之前预览你的草稿。为此，我们自动格式化一个自定义 URL，该 URL 会重定向到你的前端以安全地获取内容的草稿版本。 由于前端模板是静态生成的，这也意味着页面和产品在发布文档后需要重新生成。要实现这一点，我们使用 `afterChange` 钩子在文档更改且 `_status` 为 `published` 时重新生成前端。 有关如何扩展此功能的详细信息，请参阅官方 [草稿预览示例](https://github.com/payloadcms/payload/tree/main/examples/draft-preview)。 ## SEO 此模板预先配置了官方的 [Payload SEO 插件](https://payloadcms.com/docs/plugins/seo)，以实现对 SEO 的完全控制。SEO 数据完全集成到前端网站中。请参阅 [网站](#website) 了解详细信息。 ## 重定向 如果你正在迁移现有站点或将内容移动到新 URL，可以使用 `redirects` 集合创建从旧 URL 到新 URL 的适当重定向。这将确保向搜索引擎返回正确的状态码，并且你的用户不会遇到断开的链接。此模板预先配置了官方的 [Payload 重定向插件](https://payloadcms.com/docs/plugins/redirects)，以实现完全的重定向控制。请参阅 [网站](#website) 了解详细信息。 ## 网站 此模板包含一个使用 [Next.js App Router](https://nextjs.org/docs/app) 构建的精美设计、生产就绪的前端，与 Payload 应用一起在一个 Express 服务器中提供。这使得你可以同时部署这两个应用并一起托管。如果你更喜欢不同的前端框架，这种模式适用于任何支持自定义服务器的框架。如果你希望将网站与 Payload 分开，你可以轻松 [弹出](#eject) 前端以替换为你自己的前端，或将其用作独立的 CMS。有关详细信息，请参阅官方 [自定义服务器示例](https://github.com/payloadcms/payload/tree/main/examples/custom-server)。 核心功能： - [Next.js App Router](https://nextjs.org/docs/app) - [Stripe](https://stripe.com/) - [GraphQL](https://graphql.org/) - [TypeScript](https://www.typescriptlang.org/) - [React Hook Form](https://reacthookform.com/) - [Payload Admin Bar](https://payloadcms.com/docs/admin-bar) - 身份验证 - 发布工作流程 - 购物车 - 结账 - 客户账户 - 深色模式 - 预制作的布局构建块 - SEO - 重定向 - 付费墙 ### 缓存 尽管 Next.js 提供了强大的内置缓存策略，Payload Cloud 会通过 Cloudflare 代理并缓存所有文件，使用 [官方 Cloud 插件](https://payloadcms.com/docs/plugins/cloud)。这意味着不需要 Next.js 缓存，并且默认情况下是禁用的。如果你在 Payload Cloud 之外托管应用，可以轻松重新启用 Next.js 缓存机制，通过从 `./src/app/_api` 中删除 `no-store` 指令，并从页面文件中删除所有 `export const dynamic = 'force-dynamic'` 实例，例如 `./src/app/(pages)/[slug]/page.tsx`。有关详细信息，请参阅官方 [Next.js 缓存文档](https://nextjs.org/docs/app/building-your-application/data-fetching/caching)。 ### 弹出 如果你更喜欢另一种前端框架或希望使用 Payload 作为独立的 CMS，可以轻松弹出前端。要弹出，请运行 `yarn eject`。这将卸载所有 Next.js 相关依赖项并删除与 Next.js 前端相关的所有文件和文件夹。它还会从 `server.ts` 文件中删除所有自定义路由，并更新你的 `eslintrc.js`。 ## 开发 要本地运行此示例，请按照 [快速开始](#快速开始) 操作。然后 [连接 Stripe](#连接-stripe) 以启用支付，并使用 [Seed](#seed) 向数据库中添加一些产品和页面。 ### Docker 或者，你可以使用 [Docker](https://docker.com/) 来本地运行此模板。要执行此操作，请按照以下步骤操作： 1. 按照上面的 [步骤 1 和 2](#development)，`docker-compose` 文件将自动使用项目根目录中的 `.env` 文件。 2. 接下来运行 `docker-compose up`。 3. 按照上面的 [步骤 4 和 5](#development) 登录并创建第一个管理员用户。 就这样！Docker 实例将帮助你快速启动并标准化团队中的开发环境。 ### Seed 要向数据库中添加一些产品和页面，你可以运行 `yarn seed`。此模板还提供了一个 `GET /api/seed` 端点，你可以在管理面板中使用它来填充数据库。 ## 生产 要在生产中运行 Payload，你需要构建并管理管理面板。要执行此操作，请按照以下步骤操作： 1. 运行 `payload build` 脚本，通过运行 `yarn build` 或 `npm run build` 在项目根目录中创建生产就绪的管理包。 2. 最后运行 `yarn serve` 或 `npm run serve` 以在 `./build` 目录中运行 Node 并提供 Payload。 3. 准备上线时，请参阅 [部署](#deployment) 获取更多详细信息。 ### 部署 在部署应用之前，你需要： 1. 将 [你的 Stripe 账户切换到生产模式](https://stripe.com/docs/test-mode) 并更新你的 [Stripe API 密钥](https://dashboard.stripe.com/test/apikeys)。有关详细信息，请参阅 [连接 Stripe](#connect-stripe)。 2. 确保你的应用可以构建并在生产环境中运行。请参阅 [生产环境](#production) 获取更多详细信息。 部署项目的最简单方法是使用 [Payload Cloud](https://payloadcms.com/new/import)，这是一个一键式托管解决方案，可直接从 GitHub 仓库部署生产就绪的 Payload 应用实例。你也可以手动部署你的应用，请参阅 [部署文档](https://payloadcms.com/docs/production/deployment) 获取完整详细信息。 ## 问题 如果你有任何问题或疑问，请访问 [Discord](https://discord.com/invite/payload) 或启动 [GitHub 讨论](https://github.com/payloadcms/payload/discussions)。 ## :star: 给个 Star 你也可以给这个仓库一个 Star，以向更多人展示并让他们可以使用此仓库。 ## :star2: Star 历史
(返回顶部)
标签：API, CMS安全, DNS解析, GNU通用公共许可证, JavaScript, MongoDB, Node.js, OSV, Payload, PostgreSQL, React, SEO, SSR, Syscalls, Vercel, 产品目录, 会话管理, 全栈, 前端, 后端, 响应式, 商品管理, 商城, 商店, 在线商店, 威胁情报, 开发者工具, 开源, 开源项目, 快速启动, 支付集成, 数据库, 服务端渲染, 模板, 用户认证, 电商, 电子商务, 移动优先, 自动化攻击, 订单管理, 购物车, 部署, 静态站点生成