Membuat Aplikasi Blogging Menggunakan React, Bahagian 3: Tambah & Paparan Paparkan

Tutorial ini menunjukkan membina halaman rumah pengguna blog dengan fungsi penambahan dan paparan pos. Bahagian sebelumnya meliputi pendaftaran dan log masuk. Bahagian ini memberi tumpuan kepada pemindahan data antara halaman melalui penghalaan, penjimatan pos, dan pengambilan semula.

halaman pendaratan sampel ux disediakan:

Bermula:

klon repositori dan pasang kebergantungan menggunakan:

npm install
npm start

Penambahbaikan sisi pelayan:

Titik akhir pelayan Express New mengendalikan pengambilan dan penciptaan pos. Mendapatkan jawatan tertentu:

Menambah catatan baru:

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

Pembangunan sisi klien:

Aplikasi klien kini termasuk halaman pendaratan dan halaman paparan pos. Routing dikemas kini:

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

halaman pendaratan ():

landing/index.js Setelah masuk/pendaftaran yang berjaya, pengguna diarahkan ke halaman pendaratan, menerima e -mel, UID, dan nama pengguna melalui laluan .

state Posting Track Variables State (

) dan bendera refresh (

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

).

memuatkan catatan pengguna: posts refresh useEffect UI melangkah melalui

, memaparkan tajuk; Mengklik tajuk menavigasi ke

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

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

. Modal membolehkan penciptaan pasca baru. Komponen modal () menguruskan penglihatan:

posts /post gaya modal berada di Modal.js. Halaman pendaratan termasuk butang untuk membuka modal, borang untuk menyerahkan jawatan baru, dan senarai pos. Fungsi

menghantar data ke

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

.

modal.css handleSubmit /api/post/posttodb halaman paparan pos (

):

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

Halaman ini memaparkan jawatan individu. Ia menggunakan post.js untuk mendapatkan ,

, dan

. useLocation mengambil butiran pos melalui post_id. email username useEffect /api/get/post Kesimpulan:

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

Ini melengkapkan pelaksanaan post dan ciri paparan pos blog. Tutorial seterusnya akan merangkumi penyuntingan dan penghapusan pos. Contohnya menggunakan cangkuk reaksi dengan berkesan.

Atas ialah kandungan terperinci Membuat Aplikasi Blogging Menggunakan React, Bahagian 3: Tambah & Paparan Paparkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!