wqertAnna
@wqertAnna

Как сделать записать в уже существующий файл json (я фронт)?

У меня есть маленькое приложение для собственных нужд, созданное на react, настроенное с помощью create react app.
Локально в этой же папке с проектом лежит файл json, я его в начале импортирую, потом меняю и мне нужно перезаписать его на то, что у меня получилось. Я пишу на js на стороне клиента, но не знакома с бекендом, поэтому очень смутно представляю, каким образом я могу перезаписать файл.

т.к. приложение для себя, то меня абсолютно не интересует, чтобы это решение работало на всех устройствах или было кроссбраузерное. Оно должно работать только на моем компе (ubuntu)

Я прошу не направить меня по нужном пути, т.к. это все равно, что указать мне путь в темноте, а насколько можно точнее указать, что я должна сделать.

В общем, буду рада любой помощи.
  • Вопрос задан
  • 903 просмотра
Решения вопроса 1
KodyWiremane
@KodyWiremane
Пони, Debian, LEMP, LAN, любитель
Понимаю задачу следующим образом: из JS на клиенте надо скинуть JSON в один определённый файл на "бэкенде" ^ω^

рецепт велосипеда
В корне React-проекта (наверное) выполняем npm i express cors body-parser

В корне React-проекта создаём файл server.js следующего содержания:
// импорты
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const path = require('path');
const fs = require('fs');

// пользовательские настройки:
// на каком порту слушать по умолчанию, можно заоверрайдить через переменную окружения PORT
const DEFAULT_PORT = 3001;
// полный путь файла, который перезаписываем (тут, относительно файла server.js)
const UPDATE_JSON_FILE = path.join(__dirname, 'rel/path/to/file.json');
// URL на сервере, в которую будем кидать POST-запрос
const UPDATE_JSON_ENDPOINT = '/api/update_json';

// конфигурирование обработчиков сервера и запуск на заданном порту
const server = express();

server.use(cors());

const rawParser = bodyParser.raw({type: '*/*'});
server.post(UPDATE_JSON_ENDPOINT, rawParser, (req, res) => {
    const data = req.body instanceof Buffer ? req.body : Buffer.alloc(0);
    fs.writeFile(UPDATE_JSON_FILE, data, (err) => {
        if (!err) {
            console.log(`Wrote ${Buffer.byteLength(data)} bytes`);
            res.status(200).send('Success!');
        } else {
            console.log(err.toString());
            res.status(500).send(err.toString());
        }
    });
});
server.get(UPDATE_JSON_ENDPOINT, (req, res) => { res.status(400).send('POST requests only!'); });

const port = process.env.PORT || DEFAULT_PORT;
console.log(`Listening on port ${port}`);
server.listen(port);


Запускаем этот "бэкенд":
node server.js

Альтернативно, с другим портом (по крайней мере, в bash такой синтаксис)
PORT=8080 node server.js

В общем, порт можно задать через переменную окружения PORT. Это так, подцепил из примеров для сервера Express.

Собственно, теперь можно отправить этому серверу JSON в POST-запросе, просто в тело засунуть. Как я понимаю, что-то вроде
fetch('http://localhost:3001/api/update_json', {method: 'POST', body: JSON.stringify(data)})…


Сервер возвращает 404 на неправильный путь, 400 на не-POST запрос на /api/update_json, 500 при ошибке записи в файл, ну и 200 если всё прошло успешно.

"Сервер" пишет в консоль, на каком порту начал слушать, и число записанных байтов при каждом правильном запросе (или ошибку при ошибке записи). Выключается, соответственно, Ctrl+C в консоли.

Также, если в package.json прописать "proxy": "http://localhost:3001"
(с портом, соответствующим объективной реальности), то в React'е запрос можно посылать прямо на '/api/update_json', т. е. относительный запрос, без хостнейма, а Реакт догадается, что запрос внешний относительно приложения, и пойдёт к нашему серверу.

Ну и да, никакой валидации JSON на стороне бэка нет, что в запросе — то и в файл.

Проверил на NodeJS v10.15.2
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
rockon404
@rockon404 Куратор тега React
Frontend Developer
Напишите простой сервер на express. Добавьте два эндпоинта получения и отправки данных. Можно использовать утилиту для работы с JSON jsonfile.
Уберите на клиенте импорт JSON файла и добавьте запросы.
Ответ написан
@m_frost
без бекенда никак, если работаете с js то рекомендую node.js и уже через 1 - 2 недели обучения сможеш сделать себе что-то простенькое
Ответ написан
@dmitrass
Используй пакет directory tree, он рекурсивно проходит по директории и пишет в джейсон что нашел.
поставь коллбек ему и условие, если найдет путь к джейсону, в коллбеке fs.readFileSync читаешь джейсон и пишешь его содержание в например вместо поля пути.
Примерно так у меня было на ангуляре, где не комильфо было http request пилить, записываешь вначале в скрипте например в package
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
21 янв. 2021, в 20:39
60000 руб./за проект
25 янв. 2021, в 11:12
2000 руб./за проект
25 янв. 2021, в 10:22
4000 руб./за проект