Erstellen einer Blogging -App mit React, Teil 3: Hinzufügen und Anzeigen von Beiträgen

Dieses Tutorial zeigt, dass das Erstellen der Benutzer -Homepage eines Blogs mit dem Hinzufügen von Funktionen und Anzeigefunktionen erstellt wird. Vorherige Abschnitte wurden Anmeldung und Anmeldung abgedeckt. Dieser Teil konzentriert sich auf die Datenübertragung zwischen Seiten durch Routing, Post -Speichern und Nachabend

Eine Beispiel -Landing -Seite ux wird bereitgestellt:

Erste Schritte:

klonen Sie das Repository und installieren Sie Abhängigkeiten mit:

npm install
npm start

Serverseitige Verbesserungen:

Neue Express -Server -Endpunkte verarbeiten das Abrufen und Erstellen nach dem Abrufen. Abrufen eines bestimmten Beitrags:

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

Hinzufügen eines neuen Beitrags:

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

clientseitige Entwicklung:

Die Client -Anwendung enthält jetzt eine Zielseite und eine Postanzeigepage. Das Routing wird aktualisiert:

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

Landing Page (): landing/index.js

Nach erfolgreichem Anmeldung/Anmeldung werden Benutzer über die Route

auf die Zielseite umgeleitet, die E -Mail, UID und Benutzername erhalten. state

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

State Variablen verfolgen Beiträge (

) und ein Aktualisierungsflag (posts). refresh lädt Benutzerbeiträge: useEffect

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

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

Die UI iteriert durch

und zeigt Titel an; Klicken auf einen Titel navigiert zu posts. Ein Modal ermöglicht eine neue Posterstellung. Eine modale Komponente (/post) verwaltet die Sichtbarkeit: Modal.js

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

Modales Styling befindet sich in

. Die Zielseite enthält eine Schaltfläche zum Öffnen des Modals, ein Formular zum Senden neuer Beiträge und die Postliste. Die Funktion modal.css sendet Daten an 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));
};

Postanzeige Seite (): post.js

Diese Seite zeigt einzelne Beiträge an. Es verwendet

, um useLocation, post_id und email zu erhalten. username holt Postdetails über useEffect. /api/get/post ab

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

Schlussfolgerung:

Dies vervollständigt die Implementierung des Beitrags des Blogs Hinzufügen und Anzeigen von Funktionen. Das nächste Tutorial behandelt die Bearbeitung und Löschung nach der Post. Das Beispiel verwendet React -Hooks effektiv.

Das obige ist der detaillierte Inhalt vonErstellen einer Blogging -App mit React, Teil 3: Hinzufügen und Anzeigen von Beiträgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!