时间戳

首页 > 解决方案 > 如果数据来自 Javascript，如何使用 nodejs 将数据保存在数据库中？

javascript - 如果数据来自 Javascript，如何使用 nodejs 将数据保存在数据库中？

问题描述

我正在创建 nodejs 应用程序，结果将使用 JS 进行一些逻辑和计算。我知道我们是否需要从 HTML 中保存数据，我们使用 name 变量来简化并将数据放入 DB 但我想知道下面的代码如何我应该创建插入数据的路线吗？

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 以便能够保存调查结果。

标签： javascripthtmlnode.jsdatabase

解决方案

了解后端和前端之间的区别很重要。前端用于用户交互和信息呈现。后端用于数据处理，使用户想做的事情。

所以你应该在后端使用一个 Db。我可以看到你正在使用 NodeJS，所以如果你想将它存储在数据库中，你可以使用像字符串这样的列字段类型。当您将此值发送到前端应用程序时，您可以将其解析为 HTML 视图。

推荐阅读