Я создаю приложение 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, чтобы сохранить результат опроса.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


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