React, Part 3 : 게시물 추가 및 디스플레이를 사용하여 블로깅 앱 생성

이 자습서는 게시물 추가 및 표시 기능이있는 블로그 사용자 홈페이지를 구축하는 것을 보여줍니다. 이전 섹션에서 가입 및 로그인을 다루었습니다. 이 부분은 라우팅, 사후 저장 및 후 검색을 통한 페이지 간의 데이터 전송에 중점을 둡니다. 샘플 랜딩 페이지 ux가 제공됩니다 :

시작하기 :

리포지토리를 복제하고 다음을 사용하여 종속성을 설치하십시오

서버 측 향상 :

새로운 Express Server 엔드 포인트는 사후 검색 및 생성을 처리합니다. 특정 게시물 검색 : 새 게시물 추가 :

클라이언트 측 개발 : 클라이언트 응용 프로그램에는 이제 방문 페이지와 게시물 표시 페이지가 포함되어 있습니다. 라우팅이 업데이트됩니다 :

npm install
npm start

랜딩 페이지 () : 로그인/가입을 성공적으로 할 때 사용자는 랜딩 페이지로 리디렉션되어 경로의 를 통해 이메일, UID 및 사용자 이름을 수신합니다.

State 변수 추적 () 및 새로 고침 플래그 (는 사용자 게시물을로드합니다 :

UI는 를 통해 반복되어 제목을 표시합니다. 제목을 클릭하면

로 탐색합니다. 모달은 새로운 포스트 창작물을 허용합니다. 모달 구성 요소 ()는 가시성을 관리합니다 :

app.get('/api/get/post', (req, res, next) => {
  const post_id = req.query.post_id;
  pool.query(`SELECT * FROM posts WHERE pid=`, [post_id], (q_err, q_res) => {
    res.json(q_res.rows);
  });
});

모달 스타일링은

에 있습니다. 방문 페이지에는 모달을 열 수있는 버튼, 새 게시물을 제출하기위한 양식 및 게시물 목록이 포함되어 있습니다. 함수는 데이터를

app.post('/api/post/posttodb', (req, res, next) => {
  const values = [req.body.title, req.body.body, req.body.uid, req.body.username];
  pool.query(`INSERT INTO posts(title, body, user_id, author, date_created) VALUES(, , , , NOW())`, values, (q_err, q_res) => {
    if (q_err) return next(q_err);
    res.json(q_res.rows);
  });
});

게시 페이지 () :

이 페이지에는 개별 게시물이 표시됩니다. , 및 를 얻기 위해 를 사용합니다.

결론 :

이것은 블로그의 게시물 추가 및 디스플레이 기능의 구현을 완료합니다. 다음 튜토리얼은 포스트 편집 및 삭제를 다룹니다. 이 예제는 반응 후크를 효과적으로 사용합니다

위 내용은 React, Part 3 : 게시물 추가 및 디스플레이를 사용하여 블로깅 앱 생성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!