React, Part 2 : 사용자 가입을 사용하여 블로깅 앱 생성

이 자습서는 기능적 반응 구성 요소를 사용하여 블로그의 가입 기능을 구축하는 것을 보여줍니다. 이전 로그인 자습서를 바탕 으로이 섹션은 가입 양식 작성 및 사용자 등록을 처리하는 데 중점을 둡니다.

시작하기

튜토리얼의 첫 부분에서 github 저장소를 클로닝하여 시작하십시오 : 프로젝트 디렉토리로 이동하여 종속성을 설치하십시오 응용 프로그램은

서버 측 (node.js/express example)

서버 측 코드는 사용자 데이터 삽입을 데이터베이스에 처리합니다. 오류 처리가 중요합니다. 이 예제는 PostgreSQL 데이터베이스를 사용합니다 (선택한 데이터베이스에 필요에 따라 적응) :

git clone https://github.com/tutsplus/create-a-blogging-app-using-react

클라이언트 측 (React)

기능적 반응 구성 요소와 를 사용하여 구성 요소의 상태를 관리합니다.

cd my-blog
npm install

형식 값 캡처

상태 변수 가입 양식 필드의 변경 사항 : http://localhost:5000 이 상태 변수는 양식 입력에 바인딩됩니다

핸들러는 입력 값이 변경 될 때마다 상태 변수를 업데이트합니다. 기본 브라우저 입력 유효성 검사 (예 : 이메일 형식 확인)가 사용됩니다. 가입 제출 처리

함수는 또는 axios와 같은 라이브러리를 사용하여 서버로 가입 데이터를 보냅니다 (보안 및 기능에 권장) :

app.post('/api/posts/userprofiletodb', (req, res, next) => {
    const values = [req.body.email, req.body.pwd]; // Corrected to use req.body
    pool.query(`INSERT INTO users(username, email, pwd, date_created)
                VALUES(, , , NOW())
                ON CONFLICT DO NOTHING`, values,
            (q_err, q_res) => {
              if(q_err) return next(q_err);
              res.json(q_res.rows);
    });
});

Axios는 보안 기능이 향상된 보안 기능 (예 : 크로스 사이트 위조 보호) 및 더 나은 오류 처리 기능으로 인해 Fetch API보다 선호됩니다.

작업 데모 useState 작업 데모는 stackblitz (원본 텍스트로 제공되는 링크)에서 사용할 수 있습니다. 결론

이 자습서는 양식 처리, 클라이언트 측 상태 관리, 서버 측 데이터 지속성 및 오류 처리를 포함하여 사용자 가입 구현을 다루었습니다. 다음 부분은 블로그 게시물을 추가하고 표시하는 데 중점을 둡니다.

위 내용은 React, Part 2 : 사용자 가입을 사용하여 블로깅 앱 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!