Как отправить данные из html в mongodb

Я использую следующее form для отправки данных на мой сервер mongodb.

  <form action = "/tasks" method = "post">
    <input type = "text" name = "test">
    <button>Add Data</button>
  </form>

Эта форма подключается к моему запросу POST через следующее

const express = require('express');
const taskController = require("./controllers/TaskController");
require("./config/db");
const app = express();
const port = 3000;
const path = require('path');

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app
  .route("/tasks")
  .get(taskController.listAllTasks)
  .post(taskController.createNewTask);

...

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '../frontend/index.html'));
});

app.listen(port, () => {
  console.info(`Listening at port ${port}`);
});

Запросы POST обрабатываются функцией createNewTask в моем контроллере.

const Task = require("../models/Task");
...
// Create a new task and save it to database
exports.createNewTask = (req, res) => {
  let test = res.json(req.body.test)
  let newTask = new Task(test);
  console.info(newTask)
  newTask.save((err, task) => {
    if (err) {
      res.status(500).send(err);
    }
    res.status(201).json(task);
  });
};

Контроллер получает следующую схему

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const TaskSchema = new Schema({
  taskName: {
    type: String,
    required: true
  },
  createdOn: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model("Tasks", TaskSchema);

После просмотра урока я интуитивно понял, что form action = "/tasks" в index.html соотносится с app.route("tasks") в index.js.

Мой input name = "test", кажется, также коррелирует с res.json(req.body.test).

Я выбрал res.json, потому что решил, что мне придется отправлять JSON данные из ввода вместо строки на сервер.

Однако после того, как я отправлю {"taskName": "lol"} в свой ввод от http://localhost:3000/, меня отправят на http://localhost:3000/tasks со следующим результатом

"{\"taskName\": \"lol\"}"

с ошибкой

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

Как мне правильно отправить свои html-данные на сервер?

Мой гитхаб

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
0
358
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны сделать здесь if / else

 newTask.save((err, task) => {
    if (err) {
      res.status(500).send(err);
    }
    res.status(201).json(task);
  });

К этому

 newTask.save((err, task) => {
    if (err) {
      res.status(500).send(err);
    }else{
    res.status(201).json(task);
    }
  });

В случае ошибки ваш код сначала отправит ошибку 500, а затем отправит res.status(201).json(task);

Я попробовал это, и ошибка остается той же.

dev_el 13.12.2020 11:08

Я попытался воспроизвести ошибку, но застрял на другой ошибке. Я клонировал ваш репозиторий и получаю эту ошибку MongooseError: The uri` параметр для openUri() должен быть строкой, получил «undefined». Убедитесь, что первым параметром mongoose.connect() или mongoose.createConnection() является строка.`

Aalexander 13.12.2020 11:18

Это потому, что я использую process.env.MONGO_URI для первого параметра mongoose.connect, потому что я не хотел раскрывать свои dbname и dbpassword и решил сохранить их в .env файле, который не отслеживается git через gitignore

dev_el 13.12.2020 11:52

о, лол, конечно, у меня есть собственный аккаунт в атласе, тогда я попробую его с этим

Aalexander 13.12.2020 11:53
Ответ принят как подходящий

Проблема была

let test = res.json(req.body.test)

Это отправляет один ответ на сервер и

res.status(201).json(task);

Отправляет второй ответ. Таким образом, ошибка возникает из-за отправки двух ответов, когда мне разрешен только один.

Переписать код на

exports.createNewTask = (req, res) => {
  let newTask = new Task(JSON.parse(req.body.test));
  newTask.save((err, task) => {
    if (err) {
      res.status(500).send(err);
    } else {
      res.status(201).json(task);
    }
  });
};

Решает проблему, передавая JSON жало на вход и преобразовывая его в объект Javascript.

Другие вопросы по теме