Автоматическое подключение фронтенда к JSON-файлу [закрыто]

Вопрос или проблема

Ответ или решение

Для автоматического сохранения информации из вашего React-приложения в JSON-файл, вам нужно будет настроить серверную часть, так как браузер не может напрямую записывать файлы на диск пользователя по соображениям безопасности. Вот примерный план действий и реализация, включая код.

План действий:

1. Создание серверной части: Мы будем использовать Node.js и Express для обработки запросов от вашего React-приложения.
2. Настройка маршрутов: Сначала создадим маршрут для получения данных и их сохранения в JSON-файл.
3. Отправка данных с клиента: Используйте fetch или axios в вашем React-приложении для отправки данных на сервер.

Шаг 1: Создание серверной части

1. Установите необходимые пакеты:

   npm install express body-parser fs

2. Создайте файл server.js:

   const express = require('express');
   const bodyParser = require('body-parser');
   const fs = require('fs');
   const app = express();
   const PORT = 3001; // Порт для серверной части
   
   // Middleware
   app.use(bodyParser.json());
   
   // Создание маршрута для сохранения данных
   app.post('/save-data', (req, res) => {
      const data = req.body; // Данные из тела запроса
   
      // Чтение текущего содержимого JSON-файла
      fs.readFile('data.json', 'utf8', (err, fileData) => {
          if (err) {
              return res.status(500).send('Ошибка при чтении файла');
          }
          // Парсинг существующих данных
          let jsonData = [];
          if (fileData) {
              jsonData = JSON.parse(fileData);
          }
          // Добавление новых данных
          jsonData.push(data); 
   
          // Запись обратно в файл
          fs.writeFile('data.json', JSON.stringify(jsonData, null, 2), (err) => {
              if (err) {
                  return res.status(500).send('Ошибка при записи в файл');
              }
              res.status(200).send('Данные успешно сохранены');
          });
      });
   });
   
   app.listen(PORT, () => {
      console.log(`Сервер запущен на http://localhost:${PORT}`);
   });

Шаг 2: Отправка данных с клиента

Теперь в вашем React-приложении добавьте код для отправки данных на сервер:

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
    const [generateTime, setGenerateTime] = useState('');

    const handleGenerate = () => {
        const currentTime = new Date().toLocaleString();
        setGenerateTime(currentTime);

        // Отправка данных на сервер
        axios.post('http://localhost:3001/save-data', { time: currentTime })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.error('Ошибка при сохранении данных:', error);
            });
    };

    return (
        <div>
            <button onClick={handleGenerate}>Сгенерировать время</button>
            {generateTime && <table>
                <thead>
                    <tr>
                        <th>Сгенерированное время</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{generateTime}</td>
                    </tr>
                </tbody>
            </table>}
        </div>
    );
};

export default App;

Итоги

При каждом нажатии на кнопку "Сгенерировать время" ваше приложение будет отправлять текущее время на сервер, который в свою очередь сохранит это время в data.json. Убедитесь, что у вас есть соответствующий data.json файл в корневом каталоге вашего проекта, или его можно создать программно.

Таким образом, вы сможете автоматически сохранять данные из вашего React-приложения в JSON-файл.