Как правильно запушить данные с формы в json файл nuxt 3?

Question

[msdoc11]

Здравствуйте, есть код формы для примера:

<form class="review-form" @submit.prevent="submitForm">
    <div class="form-group">
      <label for="name">Имя</label>
      <input type="text" id="name" v-model="review.name" required />
    </div>
    <div class="form-group">
      <label for="category">Категория</label>
      <select id="category" v-model="review.tag">
        <option value="">Выберите категорию</option>
        <option
          v-for="(category, index) in categories"
          :key="index"
          :value="category"
        >
          {{ category }}
        </option>
      </select>
    </div>
    <div class="form-group">
      <label for="rating">Рейтинг</label>
      <select id="rating" v-model="review.rating">
        <option value="">Выберите рейтинг</option>
        <option v-for="(rating, index) in ratings" :key="index" :value="rating">
          {{ rating }}
        </option>
      </select>
    </div>
    <div class="form-group">
      <label for="text">Текст отзыва</label>
      <textarea id="text" v-model="review.content" required></textarea>
    </div>
    <button type="submit">Отправить</button>
  </form>

export default {
  data() {
    return {
      review: {
        id: new Date().getTime(),
        rating: "",
        name: "",
        content: "",
        tag: "",
      },
      categories: ["Уголовные дела", "Гражданские дела", "Семейное право"],
      ratings: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    submitForm() {
      this.formRequest()
        .then((result) => {
          console.log(result);
        })
        .catch((error) => {
          console.error("Форма не отправлена по причине", error);
        });
    },

    async formRequest() {
      return await $fetch("/reviews.json", {
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
        body: JSON.stringify(this.review),
      });
    },
  },
};

Данные посылает без проблем, но как записать их в файл json без использования библиотек? Есть решения на чистом js которые работают без nuxt, но как это сделать с использованием функционала nuxt 3?

Answer 1

[Антон Антон]

Самое простое - добавить страницу /pages/reviews.json.vue и в ней в хуке async data сохранить файл средствами ноды (то, что "на чистом js"). Но вообще это извращение какое-то, если честно. Немного правильнее было бы сделать два отдельных приложения - апи и фронт и разрулить направление на них средствами реверс прокси - соответствующим модулем apache или nginx (например по префиксу маршрута /api/).

Answer 2

[DREAMHAZE]

Функционал Nuxt 3 предполагает использование собственного веб-сервера Nitro
который требует указания стораджа в настройках
дока: https://nitro.unjs.io/guide/storage#mountpoints
пример (nuxt.config.ts):

export default defineNuxtConfig({
 nitro: {
    storage: {
      db: {
        driver: "fs",
        base: "./.data/db",
      },
    },
  }
})

после этого создай эндпоинт в папке server, например: ./server/api/reviews.post.js
c кодом:

export default defineEventHandler(async event => {

  // получаем тело данных из пост-запроса
  const body = await readBody(event);

  // сохранение
  await useStorage('db').setItem('reviews.json', body);

  return  { msg: 'ok' } 
})

соответственно fetch нужно направить на этот эндпоинт fetch("/api/reviews" , ...) и файл сохранится в .data/db/reviews.json