Как сохранить данные в БД с помощью nodejs, если данные поступают в результате в Javascript?

Я создаю приложение nodejs, в котором в результате появляется некоторая логика и вычисления с использованием JS. Я знаю, нужно ли нам сохранять данные из HTML, мы используем переменную имени, чтобы упростить и поместить данные в БД, но я хочу знать в приведенном ниже коде, как должен ли я создавать маршруты для вставки данных.

HTML файл: -

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "section1" class = "tab-pane fade">
  <div class = "section-1-questions">
    <fieldset class = "form-group">
      <div class = "row">
        <legend class = "col-form-label col-sm-2 pt-0">Question 1:</legend>
        <div class = "col-sm-10">
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question1" id = "gridRadios1" value = "1">
            <label class = "form-check-label" for = "gridRadios1">1</label>
          </div>
          <div class = "form-check section-1">
            <input class = "form-check-input " type = "radio" name = "question1" id = "gridRadios2" value = "2">
            <label class = "form-check-label" for = "gridRadios2">2</label>
          </div>
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question1" id = "gridRadios3" value = "3">
            <label class = "form-check-label" for = "gridRadios3">3</label>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class = "form-group">
      <div class = "row">
        <legend class = "col-form-label col-sm-2 pt-0">Question 2:</legend>
        <div class = "col-sm-10">
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question2" id = "gridRadios4" value = "1">
            <label class = "form-check-label" for = "gridRadios4">1</label>
          </div>
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question2" id = "gridRadios5" value = "2">
            <label class = "form-check-label" for = "gridRadios5">2</label>
          </div>
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question2" id = "gridRadios6" value = "3">
            <label class = "form-check-label" for = "gridRadios6">3</label>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class = "form-group">
      <div class = "row">
        <legend class = "col-form-label col-sm-2 pt-0">Question 3:</legend>
        <div class = "col-sm-10">
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question3" id = "gridRadios7" value = "1">
            <label class = "form-check-label" for = "gridRadios7">1</label>
          </div>
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question3" id = "gridRadios8" value = "2">
            <label class = "form-check-label" for = "gridRadios8">2</label>
          </div>
          <div class = "form-check section-1">
            <input class = "form-check-input" type = "radio" name = "question3" id = "gridRadios9" value = "3">
            <label class = "form-check-label" for = "gridRadios9">3</label>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <a class = "btn btn-primary btnNext">Next</a>
  <a class = "btn btn-primary btnPrevious">Previous</a>
</div>
<div id = "section2" class = "tab-pane fade">
  <div class = "section-2-question">
    <fieldset class = "form-group">
      <div class = "row">
        <legend class = "col-form-label col-sm-2 pt-0">Question 4:</legend>
        <div class = "col-sm-10">
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question4" id = "gridRadios10" value = "1">
            <label class = "form-check-label" for = "gridRadios10">1</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question4" id = "gridRadios11" value = "2">
            <label class = "form-check-label" for = "gridRadios11">2</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question4" id = "gridRadios12" value = "3">
            <label class = "form-check-label" for = "gridRadios12">3</label>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class = "form-group">
      <div class = "row">
        <legend class = "col-form-label col-sm-2 pt-0">Question 5:</legend>
        <div class = "col-sm-10">
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question5" id = "gridRadios13" value = "1">
            <label class = "form-check-label" for = "gridRadios13">1</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question5" id = "gridRadios14" value = "2">
            <label class = "form-check-label" for = "gridRadios14">2</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question5" id = "gridRadios15" value = "3">
            <label class = "form-check-label" for = "gridRadios15">3</label>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class = "form-group">
      <div class = "row">
        <legend class = "col-form-label col-sm-2 pt-0">Question 4:</legend>
        <div class = "col-sm-10">
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question6" id = "gridRadios16" value = "1">
            <label class = "form-check-label" for = "gridRadios16">1</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question6" id = "gridRadios17" value = "2">
            <label class = "form-check-label" for = "gridRadios17">2</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question6" id = "gridRadios18" value = "3">
            <label class = "form-check-label" for = "gridRadios18">3</label>
          </div>
        </div>
      </div>
    </fieldset>
    <fieldset class = "form-group">
      <div class = "row">
        <legend class = "col-form-label col-sm-2 pt-0">Question 4:</legend>
        <div class = "col-sm-10">
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question7" id = "gridRadios19" value = "1">
            <label class = "form-check-label" for = "gridRadios19">1</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question7" id = "gridRadios20" value = "2">
            <label class = "form-check-label" for = "gridRadios20">2</label>
          </div>
          <div class = "form-check section-2">
            <input class = "form-check-input" type = "radio" name = "question7" id = "gridRadios21" value = "3">
            <label class = "form-check-label" for = "gridRadios21">3</label>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
  <a class = "btn btn-primary btnNext">Next</a>
  <a class = "btn btn-primary btnPrevious">Previous</a>

JS файл: -

function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type = "radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type = "radio"]')
  let fullName = document.querySelector('#fullName').value
  let email = document.querySelector('#email').value
  let age = document.querySelector('#age').value
  var ctx = document.querySelector('#resultsChart').getContext('2d');
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  var options = {
    type: 'bar',
    data: {
      labels: ["Section 1", "Section 2"],
      datasets: [{
          label: 'Total Scored',
          data: [section1Question, section2Question, 30],
          backgroundColor: '#E91E63',
          borderWidth: 1
        },
        {
          label: 'Percentage %',
          data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30],
          backgroundColor: '#004D40',
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        responsive: true,
        yAxes: [{
          ticks: {
            reverse: false
          }
        }]
      }
    }
  }

  //Final Results and validation
  if (fullName.value != '' && email.value != '' && age.value != '') {
    if (section1Total > 0 && section2Total > 0) {
      finalResults.innerHTML += genDetails(fullName, email, age)
      finalResults.innerHTML += "<h2>Results</h2>"
      finalResults.innerHTML += genTable(section1Question, section1Total, 1)
      finalResults.innerHTML += genTable(section2Question, section2Total, 2)
      finalResults.innerHTML += "<h2>Chart Results</h2>"
      document.getElementById("control").style.display = "block";
      document.getElementById("resultsChart").style.display = "block";
      document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
      new Chart(ctx, options); //show chart
    } else {
      finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
    }
  } else {
    finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section '
  }
}

function genDetails(name, email, age) {
  var result = "<h2>Personal Info</h2>"
  result += "<b>Full name:</b> <span>" + name + "</span><br>"
  result += "<b>Email name:</b> <span>" + email + "</span><br>"
  result += "<b>Age: </b> <span>" + age + "</span><br>"
  return result
}

function genTable(ques, total, section) {
  var result = "<b>Section " + section + ":</b><br>"
  var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>"
  result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"
  return result
}
$('.btnNext').click(function() {
  $('.nav-tabs .active').closest('li').next('li').find('a').trigger('click');
});

$('.btnPrevious').click(function() {
  $('.nav-tabs .active').closest('li').prev('li').find('a').trigger('click');
});

Я хочу знать, что мне добавить route.js, чтобы сохранить результат опроса.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
18
1

Ответы 1

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

Таким образом, вы должны использовать БД в бэкэнде. Я вижу, что вы используете NodeJS, поэтому, если вы хотите сохранить его в БД, вы можете использовать тип поля столбца, например строку. И когда вы отправляете это значение во внешнее приложение, вы можете проанализировать его в представлении HTML.

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