리믹스 및 새 게시물 만들기

좋습니다. 그래서 우리는 Remix 앱에 Postgres를 추가했습니다. 웹 인터페이스를 통해 데이터베이스에 새 게시물을 추가하는 방법을 살펴보겠습니다.

이 기사의 결과는 Postgres 데이터베이스에 새 게시물을 추가할 수 있는 훌륭한 웹 양식이 될 것입니다.

양식 만들기

먼저 routes/posts/new.tsx라는 매우 간단한 경로를 만듭니다.

내부에서 지금 양식을 작성하십시오.

import { Form } from '@remix-run/react';

const inputClassName = `w-full rounded border border-gray-500 px-2 py-1 text-lg`;

export default function NewPost() {
  return (
    <Form method='post'>
      <p>
        <label>
          Post Title:{' '}
          <input type='text' name='title' className={inputClassName} />
        </label>
      </p>
      <p>
        <label>
          Post Slug:{' '}
          <input type='text' name='slug' className={inputClassName} />
        </label>
      </p>
      <p className='text-right'>
        <button
          type='submit'
          className='rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400 disabled:bg-blue-300'
        >
          Create Post
        </button>
      </p>
      <p>
        <label>
          Content:{' '}
          <input type='text' name='content' className={inputClassName} />
        </label>
      </p>
    </Form>
  );
}

Note how the <Form> tag is a remix module?

앱을 실행하여 어떻게 보이는지 살펴보겠습니다.



좋아요, 양식이 있습니다!

데이터 처리

Remix 형식 사용의 멋진 부분은 우리가 후킹할 수 있는 작업이 자동으로 제공된다는 것입니다.

다음과 같이 표시됩니다.

export const action = async ({ request }) => {
  // Do a action
};

우리의 경우 이 작업은 이미 만든 post.server.ts 파일을 활용할 수 있는 게시물을 만드는 것입니다.

export const action = async ({ request }) => {
  const formData = await request.formData();

  const title = formData.get('title');
  const slug = formData.get('slug');
  const content = formData.get('content');

  await createPost({ title, slug, content });
  return redirect('/posts');
};

여기서는 양식에서 모든 특정 필드를 가져오고 모든 소품을 설정하여 createPost 메서드를 호출합니다.

함수 자체는 다음과 같습니다.

export async function createPost(post) {
  return prisma.post.create({ data: post });
}

그리고 네, 그게 여러분이 필요한 전부일 것입니다!

앱을 다시 실행하고 양식을 작성하고 마법이 일어나는 것을 확인하세요.

Note: It won't catch any error; I'll leave that to you to add.

완성된 코드는 GitHub에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나