Création d'une application de blogs à l'aide de React, partie 3: Ajouter et afficher les publications

Ce didacticiel montre la création de la page d'accueil utilisateur d'un blog avec des fonctionnalités d'ajout et d'affichage. Les sections précédentes couvraient l'inscription et la connexion. Cette partie se concentre sur le transfert de données entre les pages via le routage, la sauvegarde de la publication et la récupération du post.

Un exemple de page de destination UX est fourni:

PRENDRE:

Clone le référentiel et l'installation des dépendances en utilisant:

npm install
npm start

Améliorations côté serveur:

Les nouveaux points de terminaison du serveur express gèrent la récupération et la création du post. Récupération d'un article spécifique:

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

Ajouter un nouveau message:

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

Développement côté client:

L'application client comprend désormais une page de destination et une page d'affichage de publication. Le routage est mis à jour:

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

Page de destination (landing/index.js):

Une fois la connexion / inscription réussie, les utilisateurs sont redirigées vers la page de destination, recevant des e-mails, des UID et du nom d'utilisateur via la route state.

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

Les variables d'état suivent les poteaux de suivi (posts) et un drapeau de rafraîchissement (refresh). useEffect charge des messages utilisateur:

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

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

L'interface utilisateur itère à travers posts, affichant des titres; Cliquez sur un titre navigue vers /post. Un modal permet une nouvelle création de post. Un composant modal (Modal.js) gère la visibilité:

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

Le style modal est dans modal.css. La page de destination comprend un bouton pour ouvrir le modal, un formulaire pour soumettre de nouveaux messages et la liste des messages. La fonction handleSubmit envoie des données à /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));
};

Page d'affichage de publication (post.js):

Cette page affiche des publications individuelles. Il utilise useLocation pour obtenir post_id, email et username. useEffect récupère les détails du post via /api/get/post.

import { useLocation } from 'react-router-dom';
// ...
const { state } = useLocation();
const { email, username, uid, post_id } = state || { username: 'Tuts+ Envato', email: 'tuts@envato.com', uid: '123', post_id: 1 };
const [post, setPost] = useState();
// ...
useEffect(() => {
  if (post_id && uid) {
    axios.get('/api/get/post', { params: { post_id: post_id } })
      .then(res => res.data.length !== 0 ? setPost({ likes: res.data[0].likes, like_user_ids: res.data[0].like_user_id, post_title: res.data[0].title, post_body: res.data[0].body, post_author: res.data[0].author }) : null)
      .catch((err) => console.log(err));
  }
}, [post_id]);

Conclusion:

Cela complète la mise en œuvre de la publication du blog Ajout et affichage des fonctionnalités. Le prochain tutoriel couvrira l'édition et la suppression du post. L'exemple utilise efficacement les crochets React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!