PayLoad项目快速搭建

Alice◆Deng

已于 2024-06-22 16:58:04 修改

阅读量704

点赞数 26

分类专栏： PayLoad 文章标签： javascript mongodb yarn

于 2024-06-22 16:09:41 首次发布

本文链接：https://blog.csdn.net/weixin_65391267/article/details/139859355

版权

PayLoad 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

设计实体结构（mongodb 集合），添加配置（图二）

启动本地项目（图三）

环境要求

Any JavaScript package manager (Yarn, NPM, or pnpm)
Node.js version 16+
Any compatible database (MongoDB or Postgres)

Node.js

文档 Node.js安装与入门指南-百度开发者中心
实践

安装node

vscode新建app.js

运行程序

Yarn

cmd执行（图一）
```
npm install -g yarn
```

yarn常用命令

yarn init 初始化yarn项目（图二）

yarn install添加或更新依赖包后重新载入

yarn add [package]

yarn remove [package]

图一

图二

MongoDB

文档 https://www.cnblogs.com/TM0831/p/10606624.html
实践

2.1 本地图形化界面使用bin目录下mongod.exe

2.2 vscode中安装mongodb插件，重启vscode后建立本地连接，PlayGround修改demo语句，执行操作mongodb的命令

2.3 mongodb插件中实用操作

新建db，新建集合快捷操作

快速插入、快速查询操作

简单示例项目（public-demo）

GitHub - payloadcms/public-demo: The official public demo for Payload

本地项目实践（VSCode）

创建简单项目（图一，代码一）
设计实体结构（mongodb 集合），添加配置（图二）
启动本地项目（图三）

代码一

npx create-payload-app@latest

图一

图二

创建数据集添加到项目（demo）

import { CollectionConfig } from 'payload/types';

export const Demo: CollectionConfig = {
  slug: 'demo',
  fields: [
    {
      name: 'title',
      type: 'text',
      required: true,
      label: '标题',
      //description: 'The title of the video.',
    },
   
    {
      name: 'link',
      type: 'text',
      required: true,
      label: '链接',
      //description: 'The link to the video.',
    },
    {
      name: 'price',
      type: 'number',
      required: true,
      label: '视频价格',
      //description: 'The price associated with the video.',
    },
    {
      name: 'paymentMethod',
      type: 'text',
      required: true,
      label: '支付方式',
      //description: 'The payment method for the video.',
    },
    {
      name: 'views',
      type: 'number',
      required: true,
      label: '播放量',
      //description: 'The number of views the video has received.',
    },
    {
      name: 'status',
      type: 'select',
      required: true,
      label: '状态',
      //description: 'The current status of the video.',
      options: [
        {
          label: '制作中',
          value: 'inProduction',
        },
        {
          label: '已发布',
          value: 'published',
        },
        {
          label: '已下架',
          value: 'unpublished',
        },
      ],
    },
    {
      name: 'notes',
      type: 'textarea',
      label: '备注',
      //description: 'Additional notes about the video.',
    },
  ],
};

export default Demo;

import path from 'path'

import { payloadCloud } from '@payloadcms/plugin-cloud'
import { mongooseAdapter } from '@payloadcms/db-mongodb'
import { webpackBundler } from '@payloadcms/bundler-webpack'
import { slateEditor } from '@payloadcms/richtext-slate'
import { buildConfig } from 'payload/config'

import Users from './collections/Users'
import Demo from './collections/Demo'

export default buildConfig({
  admin: {
    user: Users.slug,
    bundler: webpackBundler(),
  },
  editor: slateEditor({}),
  collections: [Users,Demo],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
  plugins: [payloadCloud()],
  db: mongooseAdapter({
    url: process.env.DATABASE_URI,
  }),
})