如何将Node js DB查询绑定到Web窗体



我使用的是node和postgres,我是编写异步函数的新手,我想做的是一个非常简单的查询,它将对数据库中的记录进行计数,添加一个并返回结果。在生成DOM之前,结果将是可见的。我不知道如何做到这一点,因为异步函数不会向调用方返回值(也可能我仍然有同步思维(。功能如下:

function generateRTA(callback){
var current_year = new Date().getFullYear();
const qry = `SELECT COUNT(date_part('year', updated_on)) 
FROM recruitment_process
WHERE date_part('year', updated_on) = $1;` 
const value = [current_year]
pool.query(qry, value, (err, res) => {
if (err) {
console.log(err.stack)
} else {
var count = parseInt(res.rows[0].count) + 1
var rta_no = String(current_year) + '-' + count
callback(null, rta_no)        
}
})
}

对于前端,我使用带有简单HTML表单的pug。

const rta_no = generateRTA(function (err, res){
if(err){
console.log(err)
}
else{
console.log(res)
}
})

app.get('/new_application', function(req, res){
res.render('new_application', {rta_number: rta_no})
});

我可以在console.log中看到rta_no,但当值准备好时,我如何将其传递回DOM?

基于ajax调用异步响应,当它从Node js获得响应时,它会更新div id"div1"。

app.js

app.get("/webform", (req, res) => {
res.render("webform", {
title: "Render Web Form"
});
});

app.get("/new_application", (req, res) => {
// Connect to database.
var connection = getMySQLConnection();
connection.connect();
// Do the query to get data.
connection.query('SELECT count(1) as cnt FROM test ', function(err, rows, fields) {
var person;
if (err) {
res.status(500).json({"status_code": 500,"status_message": "internal server error"});
} else {
// Check if the result is found or not
if(rows.length==1) {
res.status(200).json({"count": rows[0].cnt});
} else {
// render not found page
res.status(404).json({"status_code":404, "status_message": "Not found"});
}
}
});
// Close connection
connection.end();
});

webform.pug-通过异步调用

html
head
script(src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js')
script.
$(document).ready(function(){
$.ajax({url: "/new_application", success: function(result){
$("#div1").html(result.count);
}});
});
body
div
Total count goes here  : 
#div1
value loading ...

这似乎没问题,我只是不确定:

在生成DOM 之前,结果将可见

这个约束违背了异步的目的,因为您的DOM应该等待返回的值出现。您不必等待它,只需呈现页面,一旦函数返回并运行回调,就会更新值。

此外,也许值得一看的承诺

最新更新