Reactを使用してブログアプリの作成、パート3：投稿を追加して表示します

このチュートリアルでは、投稿の追加と表示機能を備えたブログのユーザーホームページの構築を示しています。 前のセクションでは、サインアップとサインインをカバーしました。 このパートは、ルーティング、保存後、および検索後のページ間のデータ転送に焦点を当てています。

サンプルランディングページUXが提供されています：

始めましょう：

リポジトリをクローンし、依存関係をインストールして：

npm install
npm start

サーバー側の拡張機能：

新しいExpress Serverエンドポイントは、検索と作成の投稿を処理します。 特定の投稿の取得：

新しい投稿の追加：

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);
  });
});

クライアント側の開発：

クライアントアプリケーションには、ランディングページと投稿ディスプレイページが含まれるようになりました。 ルーティングが更新されます：

const router = createBrowserRouter([
  { path: "/", element: <app></app> },
  // ...
  { path: "/landing", element: <landing></landing> },
  { path: "/post", element: <post></post> }
]);

ランディングページ（

）：landing/index.js ログイン/サインアップが成功すると、ユーザーはランディングページにリダイレクトされ、ルートの

。

state状態変数は、投稿を追跡（

）と更新フラグ（

import { useLocation } from 'react-router-dom';
// ...
const { state } = useLocation();
const { email, username, uid } = state;

）を追跡します。

ユーザーの投稿を読み込んでください：posts refresh useEffectuiは

を繰り返し、タイトルを表示します。 [タイトル]をクリックすると、

useEffect(() => {
  loadAllPostsOfUser();
}, []);

const loadAllPostsOfUser = () => {
  axios.get('/api/get/allposts')
    .then(res => setPosts(res.data))
    .catch((err) => console.log(err));
};

に移動します。モーダルにより、新しいポスト作成が可能になります。 モーダルコンポーネント（

）は可視性を管理します：posts /post Modal.jsモーダルスタイリングは

です。 ランディングページには、モーダルを開くためのボタン、新しい投稿を送信するフォーム、および投稿リストが含まれています。

const Modal = ({ handleClose, show, children }) => {
  // ...
};

関数はデータを

。modal.cssに送信します handleSubmit /api/post/posttodb

ディスプレイページを投稿（

const handleSubmit = (event) => {
  event.preventDefault();
  const data = { title: event.target.title.value, body: event.target.body.value, username: username, uid: uid };
  axios.post('/api/post/posttodb', data)
    .then(response => console.log(response))
    .catch((err) => console.log(err))
    .then(setTimeout(() => setRefresh(!refresh), 700));
};

）：

このページには個々の投稿が表示されます。 post.js、、

、

を取得するために使用します。 fide useLocation post_id emailusername結論：useEffect/api/get/post

これにより、ブログの投稿の追加および表示機能の実装が完了します。 次のチュートリアルでは、投稿の編集と削除について説明します。 この例は、Reactフックを効果的に利用しています

以上がReactを使用してブログアプリの作成、パート3：投稿を追加して表示しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。