구성 요소에서 SvelteKit 양식 작업 호출(또는 양식 제출)-JS 튜토리얼-php.cn

구성 요소에서 SvelteKit 양식 작업 호출(또는 양식 제출)

WBOY

풀어 주다： 2024-09-05 22:32:41

원래의

684명이 탐색했습니다.

Calling a SvelteKit form action (or submitting a form) from a component

SvelteKit 구성 요소에서 양식 제출 처리

서버 측 양식 작업에 의해 처리되도록 SvelteKit 구성 요소에서 양식을 제출하는 것은 생각보다 간단합니다. 양식이 페이지 안에 있을 필요는 없습니다. 모든 구성 요소에 존재할 수 있으며 SvelteKit의 서버 측 기능과 계속 상호 작용할 수 있습니다.

이 게시물에서는 구성 요소에서 양식을 제출하고, +page.server.js의 기본 양식 작업을 사용하여 양식을 처리하고, 양식을 바인딩하기 위해 +page.svelte를 설정하는 과정을 안내합니다.

프로젝트 구조
my-sveltekit-project/
├── src/
│ ├── 구성 요소/
│ │ └── FormTestComponent.svelte
│ ├── 경로/
│ │ ├── +page.svelte
│ │ └── 테스트/
│ │ └── +page.server.js
├── 정적/
├── package.json
├── svelte.config.js
├── vite.config.js
└── tsconfig.json

1. FormTestComponent 생성 및 양식 추가

먼저 간단한 양식이 포함된 FormTestComponent를 만들어 보겠습니다.

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  export let form;
</script>

<form>
  <input id="test" name="test" />
  <button type="submit"> Submit </button>
</form>

로그인 후 복사

FormInput 구성 요소는 여기에서 양식에 사용되는 사용자 정의 입력 필드입니다.
{form}은 페이지에서 전달된 양식 개체를 이 구성 요소에 바인딩하는 form={form}의 약어입니다.

이 시점에서 구성 요소 내부에서 사용할 수 있는 기본 양식이 준비되어 있지만 아직 서버 측 양식 처리에 연결되지 않았습니다.

2. 양식 바인딩을 위해 +page.svelte 설정

이제 FormTestComponent를 사용하고 해당 양식 소품을 바인딩하기 위해 +page.svelte 파일을 만듭니다.

<!-- routes/+page.svelte -->
<script>
  import FormTestComponent from "$lib/components/FormTestComponent.svelte";
  export let form; // This comes from the page’s server-side form response
</script>

<FormTestComponent {form} />

로그인 후 복사

핵심 포인트:

export let form;: 양식 개체는 서버의 양식 작업 응답에서 제공되며 FormTestComponent로 전달됩니다. 이는 양식 응답 데이터를 구성 요소의 양식 소품에 바인딩합니다.
반응성: 양식이 서버에 제출되고 업데이트되면 양식 개체가 클라이언트측 변경 사항을 반영하여 모든 것을 동기화합니다.

3. FormTestComponent에서 양식 제출 강화

양식 제출을 효율적으로 처리하기 위해 SvelteKit은 전체 페이지를 다시 로드하지 않고 제출을 처리하는 것과 같은 점진적인 향상 기능으로 양식을 향상시킬 수 있는 use:enhance 지시문을 제공합니다.

FormTestComponent에서 양식 제출을 향상하는 방법은 다음과 같습니다.

<!-- src/lib/components/FormTestComponent.svelte -->
<script>
  import { enhance } from "$app/forms";
  import FormInput from "$components/forms/FormInput.svelte";
  import { page } from "$app/stores";

  let loading = false;
  export let form;
  $: console.log(form); // Log form response for debugging
</script>

<form
  method="POST"
  on:submit|preventDefault
  action="/test"
  use:enhance
>
  <FormInput label="test" id="test" />
  <button type="submit"> Submit </button>
</form>

로그인 후 복사

핵심 포인트:

use:enhance: 이 지시어는 전체를 다시 로드하지 않고도 제출을 처리할 수 있도록 양식을 향상합니다. 또한 클라이언트측에서 오류나 부분 양식 업데이트를 쉽게 처리할 수 있습니다.
on:submit|preventDefault: 이는 브라우저의 기본 양식 제출 동작(페이지 다시 로드)을 방지하여 SvelteKit이 이를 처리할 수 있도록 합니다.
action="/test": 양식은 곧 생성할 /test 경로를 가리킵니다. 가입과 같은 명명된 작업을 사용하는 경우 URL은 /test?/signup과 같습니다.

4. 서버측 액션 생성

서버에서 양식을 처리하려면 +page.server.js(또는 TypeScript를 선호하는 경우 +page.server.ts)를 사용하여 /test에 디렉토리를 생성하세요.

다음은 +page.server.js에서 양식 작업이 어떻게 보일지에 대한 예입니다.

// - /routes/test/+page.server.js
/** @type {import('./$types').Actions} */
export const actions = {
    default: async ({ request }) => {
        const data = await request.formData();
        const formEntries = Object.fromEntries(data.entries()); // Convert form data to an object
        console.log(formEntries); // Log form data on the server
        return {
            success: true,
            message: "Yay!!"
        };
    }
};

로그인 후 복사

핵심 포인트:

request.formData(): 이 메소드는 요청에서 제출된 양식 데이터를 검색합니다.
Object.fromEntries(data.entries()): 양식 데이터를 보다 사용하기 쉬운 개체 형식으로 변환합니다. 여기서 각 양식 필드 이름은 키가 되고 해당 값은 해당 값이 됩니다.

서버가 양식을 처리하는 곳입니다. 이 경우 양식 데이터를 기록하고 성공 메시지를 반환합니다. 실제 시나리오에서는 검증을 수행하고 오류를 처리할 가능성이 높습니다.

5. 양식 응답 보기

양식이 제출되면 터미널(서버 측)과 브라우저 콘솔(클라이언트 측) 모두에 기록된 양식 데이터를 볼 수 있습니다. 이는 컴포넌트의 console.log(form)와 양식 응답 및 양식을 각각 기록하는 +page.server.js의 console.log(formEntries) 덕분입니다.