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

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) 덕분입니다.

---

결론

이제 서버 측 양식 작업에 데이터를 제출하는 SvelteKit 구성 요소 내에 양식을 성공적으로 만들었습니다. 양식에 전체 페이지를 사용할 필요가 없었고 SvelteKit의 use:enhance를 활용하여 페이지를 다시 로드하지 않고도 제출을 원활하게 처리했습니다.

사용자 정의 유효성 검사를 추가하거나 오류를 처리하거나 파일 업로드와 같은 더 복잡한 작업을 수행하여 이를 확장할 수 있습니다.

---

해킹을 즐겨보세요!

위 내용은 구성 요소에서 SvelteKit 양식 작업 호출(또는 양식 제출)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!