Отправка данных вложенных форм и метаданных (стиль / расположение полей ввода) в Node / Express - PullRequest
Новая
       10

Отправка данных вложенных форм и метаданных (стиль / расположение полей ввода) в Node / Express

0 голосов
/ 25 ноября 2018

Я пытаюсь создать веб-приложение, которое позволяет перетаскивать / создавать текстовые поля на холсте, вводить их и сохранять значение и расположение (элементы стиля left, top, width и height) каждого текстового поля.для будущего использования.Я построил функциональность, позволяющую рисовать текстовые поля (каждое из них представляет собой входные данные с пользовательскими именами, которые динамически добавляются на холст во время событий onmouseup и onmousedown).

Где я застрял, так это как на самом делеразместить / отправить данные мне нужно на сервер.Традиционный метод POST, как я понимаю, не отправляет данные о местоположении / стиле фактических полей ввода в форме, поэтому я придумал следующий код (расположенный в index.html), чтобы получить нужные мне данные и создать объект JSONдля отправки на сервер: 

const handleFormSubmit = event => {

      const check = document.body.contains(document.getElementById('myForm'));
      if (check){
        const form = document.getElementById('myForm');
        const formToJSON = {};

        for (var i =0;i <form.length;i++)
        {
          formToJSON[form[i].name] = {"name": `${form[i].name}`, 
          "value": `${form[i].value}`, 
          "left": `${form[i].style.left}`, 
          "top": `${form[i].style.top}`, 
          "width": `${form[i].style.width}`, 
          "height": `${form[i].style.height}`}
        }




      const formStringified = JSON.stringify(formToJSON, null, "  ");

}
};

Пример formStringified выглядит следующим образом: 

    {
  "answer1": {
    "name": "answer1",
    "value": "123",
    "left": "258px",
    "top": "374px",
    "width": "87px",
    "height": "32px"
  },
  "answer2": {
    "name": "answer2",
    "value": "asdf",
    "left": "472px",
    "top": "390px",
    "width": "97px",
    "height": "40px"
  }
}

, где «answer1» и «answer2» - это два разных текстовых поля ввода (создаются динамически какдети в той же форме).

Этот объект является именно тем, что я хочу отправить в БД, потому что он содержит всю необходимую мне информацию в точном формате, в строковом виде в формате JSON.Затем, когда я хочу отобразить сохраненную работу для определенного пользователя, я просто взял бы соответствующие данные из базы данных и динамически поместил текстовые поля ввода на основе значения, местоположения и т. Д.

В настоящее время const handleFormSubmitвызвано щелчком по кнопке (не отправка) в index.html, но теперь я не могу понять, как действовать.

Большинство учебных пособий / документации, которые я вижу в Интернете, вращаются вокруг использования bodyparser с формойу него method = "POST" и соответствующий код app.post, захватывающий req.body в файле app.js, но я не знаю, как / если я могу использовать этот метод, чтобы делать то, что мне нужно.Я был бы счастлив сделать это таким образом, но я хочу иметь возможность получать не только данные формы, но и данные о местоположении текстовых полей ввода (вложенные, конечно, так же, как я делаю это в настоящее время),Другой метод, который я видел, это отправка httpRequest, но большинство учебных пособий, которые я вижу, говорят, что это небезопасный метод для производства (хотя я не слишком много изучал этот метод).

Можно ли отправить данные formStringified прямо в БД, или это действительно глупо / небезопасно / и т.д.?Есть ли способ получить данные formStringified и опубликовать их безопасно и правильно, или, может быть, существует совершенно отдельное решение?

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

...