مبارزه با Node.js – انجمن DEV

ek3nk4r 2024-07-06

0 0 خواندن این مطلب 6 دقیقه زمان میبرد

پیشنهاد ویژه

خرید فالوور واقعی خرید لایک اینستاگرام خرید ویو اینستاگرام خرید فالوور اینستاگرام

Summarize this content to 400 words in Persian Lang
من سعی می کنم اولین سرور Node.js خود را برای سایتی که برای یک کلاینت می سازم با React Front-end کار کند. من بیشتر در مواقعی که به سرور نیاز دارم با Django REST سروکار داشته ام اما شنیده ام که Node.js ساده تر است و شاید برای این دلیل مناسب تر است، من با جاوا اسکریپت نیز راحت تر هستم.

ساختار اصلی وب سایت:

– فرمی برای آپلود حجم زیادی از اسناد PDF، تصاویر، ارائه های پاور پوینت.
– قابلیت جستجو برای پایگاه داده برای یافتن PDF های خاص بر اساس نویسنده، کشور، تاریخ آپلود و مقادیر دیگر.
– من از React DocViewer برای نمایش اسناد PDF استفاده می کنم.

مشکل:

مشکلی که اکنون دارم این است که می توانم تمام داده های ذخیره شده را به صورت JSON بازیابی کنم اما PDF را از یک ستون بر اساس FileId با DocViewer در ViewPdf.js نمایش نمی دهم..این صفحه برای DocViewer است:

import React, { useState, useEffect } from ‘react’;
import { useParams } from ‘react-router-dom’;
import DocViewer, { PDFRenderer, HTMLRenderer } from “react-doc-viewer”;

const ViewPdf = () => {
const { fileId } = useParams();
const [fileUrl, setFileUrl] = useState(”)

useEffect(() => {
// Construct the URL to fetch the file
const url = `/api/uploads/:fileId`;

setFileUrl(url);
}, [fileUrl, fileId]);

const docs = [
{ uri: fileUrl }
];

return (

);
}

export default ViewPdf;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

ViewPdf با این صفحه جستجو باز می شود:

import React, { useEffect, useState } from ‘react’;
import { useNavigate } from ‘react-router-dom’;
import ‘@cds/core/select/register.js’;

function Search() {
const navigate = useNavigate();
const [uploads, setUploads] = useState([]);
const [filter, setFilter] = useState({
category: ”,
uploadDate: ”,
author: ”,
country: ”
});

useEffect(() => {
fetch(‘http://localhost:8000/api/uploads’)
.then(response => response.json())
.then(data => setUploads(data))
.catch(error => console.error(‘Error:’, error));
}, []);

const handleFilterChange = (event) => {
const { name, value } = event.target;
setFilter(prevFilter => ({
…prevFilter,
[name]: value
}));
};

const filteredUploads = uploads.filter(upload => {
const { category, uploadDate, author, country } = filter;
return (
(category === ” || upload.category === category) &&
(uploadDate === ” || upload.uploaddate === uploadDate) &&
(author === ” || upload.author === author) &&
(country === ” || upload.country === country)
);
});

const handleFileClick = (upload) => {
const fileId = upload.id;
navigate(`/api/uploads/${fileId}`);
};

return (

Category:

Upload Date:

Author:

Country:

All
USA
Canada
UK
Albania
Andorra
Austria
Belarus
Belgium
Bosnia and Herzegovina
Bulgaria
Croatia
Cyprus
Czech Republic
Denmark
Estonia
Finland
France
Germany
Greece
Hungary
Iceland
Ireland
Italy
Kosovo
Latvia
Liechtenstein
Lithuania
Luxembourg
Malta
Moldova
Monaco
Montenegro
Netherlands
North Macedonia (formerly Macedonia)
Norway
Poland
Portugal
Romania
Russia
San Marino
Serbia
Slovakia
Slovenia
Spain
Sweden
Switzerland
Ukraine
United Kingdom (UK)
Vatican City (Holy See)

{filteredUploads.sort((a, b) => new Date(b.uploaddate) – new Date(a.uploaddate)).map((upload, index) => (
handleFileClick(upload)}>
Upload Date: {upload.uploaddate}
Category: {upload.category}
Country: {upload.country}
Author: {upload.author}
ID: {upload.id}

))}

);
}

export default Search;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نقطه پایانی API برای این در Server.js به شکل زیر است:

app.get(“/api/uploads/:fileId”, async (req, res) => {
const { fileId } = req.params;
try {
console.log([fileId]);
const queryResult = await pool.query(
“SELECT filename FROM uploads WHERE id = $1”,
[fileId] );
if (queryResult.rows.length > 0) {
const { filename } = queryResult.rows[0];
const filePath = path.join(__dirname, “uploads”, filename);
res.sendFile(filePath);
} else {
res.status(404).json({ message: “File not found” });
}
} catch (err) {
console.error(err);
res.status(500).json({ message: “Internal server error” });
}
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

من DocViewer را در قسمت جلویی نصب کرده ام. حدس من این است که مشکل از پیکربندی اشتباه نقطه پایانی و همچنین آنچه که سرور باید نمایش دهد، نه JSON بلکه PDF، ناشی می شود. یا اینکه مونتاژ به نحوی در یک حلقه گیر کرده و اتصال را زودتر می بندد.

هنگام تلاش برای باز کردن یک فایل PDF، این خطا را دارم:

ERROR
signal is aborted without reason
at http://localhost:3000/static/js/bundle.js:23248:18
at safelyCallDestroy (http://localhost:3000/static/js/bundle.js:43291:9)
at commitHookEffectListUnmount (http://localhost:3000/static/js/bundle.js:43429:15)
at commitPassiveUnmountOnFiber (http://localhost:3000/static/js/bundle.js:45051:15)
at commitPassiveUnmountEffects_complete (http://localhost:3000/static/js/bundle.js:45031:11)
at commitPassiveUnmountEffects_begin (http://localhost:3000/static/js/bundle.js:45022:11)
at commitPassiveUnmountEffects (http://localhost:3000/static/js/bundle.js:44976:7)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:46797:7)
at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:46751:18)
at http://localhost:3000/static/js/bundle.js:46566:13

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این صفحه بعد از خطا در صفحه ViewPdf.jsx است:

نوشته شده است: برای اجرای این برنامه باید جاوا اسکریپت را فعال کنید.

از آنجایی که این اولین تلاش من با Node.js است، از هرگونه پیشنهادی استقبال می کنم. با تشکر !

من سعی می کنم اولین سرور Node.js خود را برای سایتی که برای یک کلاینت می سازم با React Front-end کار کند. من بیشتر در مواقعی که به سرور نیاز دارم با Django REST سروکار داشته ام اما شنیده ام که Node.js ساده تر است و شاید برای این دلیل مناسب تر است، من با جاوا اسکریپت نیز راحت تر هستم.

ساختار اصلی وب سایت:

– فرمی برای آپلود حجم زیادی از اسناد PDF، تصاویر، ارائه های پاور پوینت.
– قابلیت جستجو برای پایگاه داده برای یافتن PDF های خاص بر اساس نویسنده، کشور، تاریخ آپلود و مقادیر دیگر.
– من از React DocViewer برای نمایش اسناد PDF استفاده می کنم.

مشکل:

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import DocViewer, { PDFRenderer, HTMLRenderer } from "react-doc-viewer";


const ViewPdf = () => {
    const { fileId } = useParams();
    const [fileUrl, setFileUrl] = useState('')

  useEffect(() => {
    // Construct the URL to fetch the file
    const url = `/api/uploads/:fileId`;

    setFileUrl(url);
  }, [fileUrl, fileId]);

  const docs = [
    { uri: fileUrl }
  ];

  return (

      

    );
}



export default ViewPdf;

ViewPdf با این صفحه جستجو باز می شود:

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import '@cds/core/select/register.js';

function Search() {
  const navigate = useNavigate();
  const [uploads, setUploads] = useState([]);
  const [filter, setFilter] = useState({
    category: '',
    uploadDate: '',
    author: '',
    country: ''
  });


  useEffect(() => {
    fetch('http://localhost:8000/api/uploads')
      .then(response => response.json())
      .then(data => setUploads(data))
      .catch(error => console.error('Error:', error));
  }, []);

  const handleFilterChange = (event) => {
    const { name, value } = event.target;
    setFilter(prevFilter => ({
      ...prevFilter,
      [name]: value
    }));
  };

  const filteredUploads = uploads.filter(upload => {
    const { category, uploadDate, author, country } = filter;
    return (
      (category === '' || upload.category === category) &&
      (uploadDate === '' || upload.uploaddate === uploadDate) &&
      (author === '' || upload.author === author) &&
      (country === '' || upload.country === country)
    );
  });

  const handleFileClick = (upload) => {
    const fileId = upload.id;
    navigate(`/api/uploads/${fileId}`);
  };

  return (
    
      
        
          Category:
          
        
        
          Upload Date:
          
        
        
          Author:
          
        
        
          Country:
          
        
        
          {filteredUploads.sort((a, b) => new Date(b.uploaddate) - new Date(a.uploaddate)).map((upload, index) => (
             handleFileClick(upload)}>
              Upload Date: {upload.uploaddate}
              Category: {upload.category}
              Country: {upload.country}
              Author: {upload.author}
              ID: {upload.id}
            
          ))}
        
      
    
  );
}

export default Search;

نقطه پایانی API برای این در Server.js به شکل زیر است:

app.get("/api/uploads/:fileId", async (req, res) => {
  const { fileId } = req.params;
  try {
    console.log([fileId]);
    const queryResult = await pool.query(
      "SELECT filename FROM uploads WHERE id = $1",
      [fileId]
    );
    if (queryResult.rows.length > 0) {
      const { filename } = queryResult.rows[0];
      const filePath = path.join(__dirname, "uploads", filename);
      res.sendFile(filePath);
    } else {
      res.status(404).json({ message: "File not found" });
    }
  } catch (err) {
    console.error(err);
    res.status(500).json({ message: "Internal server error" });
  }
});

هنگام تلاش برای باز کردن یک فایل PDF، این خطا را دارم:

ERROR
signal is aborted without reason
    at http://localhost:3000/static/js/bundle.js:23248:18
    at safelyCallDestroy (http://localhost:3000/static/js/bundle.js:43291:9)
    at commitHookEffectListUnmount (http://localhost:3000/static/js/bundle.js:43429:15)
    at commitPassiveUnmountOnFiber (http://localhost:3000/static/js/bundle.js:45051:15)
    at commitPassiveUnmountEffects_complete (http://localhost:3000/static/js/bundle.js:45031:11)
    at commitPassiveUnmountEffects_begin (http://localhost:3000/static/js/bundle.js:45022:11)
    at commitPassiveUnmountEffects (http://localhost:3000/static/js/bundle.js:44976:7)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:46797:7)
    at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:46751:18)
    at http://localhost:3000/static/js/bundle.js:46566:13

این صفحه بعد از خطا در صفحه ViewPdf.jsx است:

توضیحات تصویر
نوشته شده است: برای اجرای این برنامه باید جاوا اسکریپت را فعال کنید.