如何在页面加载之前使用 NODE 更改一些 HTML？

Question

您好，我一直在尝试使用 NODE 更改我的一些 HTML 元素。

所以我使用 Node 模块 request 和 cheerio 在页面加载之前获取特定的 html 元素。

我想要实现的是从我的数据库中获取一些数据并在加载之前修改 html。这是我所拥有的：

app.js：

router.get('/goToSettings', (req, res) => {

    //get session id
    const id = 1;

    //prepare SQL query
    const sqlQuery = "SELECT first_name, last_name, username, email FROM myTable WHERE id = ?";

    //Get data from DB by using the id retrieved from SESSION
    getConnection().query(sqlQuery, [id], async (err, results, fields) => {

        //Catch error with MySQL connection
        if(err){
            console.log("    > The connection have failed :( >" + err);
            res.sendStatus(500);      
        }

        var url = "http://host.com/settings.html";
        request(url, async function(error, response, html){

            if(!error){

                var $ = cheerio.load(html);
                
                //DEFAULT VALUES FROM HTML:
                //a.value = Johnny
                //b.value = Blue
                //c.value = j.b@email.com

                //Set new values from my DB
                var a = $('input.settings_1').val(results[0].first_name);
                var b = $('input.settings_2').val(results[0].last_name);
                var c = $('input.settings_3').val(results[0].email);

                console.log(a.val()); //myNewFirstName
                console.log(b.val()); //myNewLastName
                console.log(c.val()); //myNewEmail

                await res.redirect('/accountSettings.html'); //VALUES of a,b,c remain (Johnny, Blue, j.b@email.com)
            }else{
                console.log("WRONG URL");
            }
        });
    });
});

console.log 上的数据似乎发生了变化，一切看起来都还不错，但是当页面被重定向时，一切都恢复了默认值。我尝试在更改之前加载页面但没有运气。这就是我发现我必须使用await/async 以便进行更改然后调用redirect 的地方，但同样没有任何变化。加载时重定向是否会重置html文件？

其他人建议使用 AJAX 来执行此任务，但我以前没有这方面的经验。我想如果这是不可能的，我会尝试使用它。也有人建议我，这不应该是这种方式（节点不应该处理这个），如果你同意，请告诉我。

---

解决方案：

//cmd
    npm i ejs

//app.js
    app.set('view engine', 'ejs');
    
    //Save Data in list of objects
    let objects = [
        { value: results[0].first_name },
        { value: results[0].last_name },
        { value: results[0].email }
    ];
    
    //REDIRECT PAGE WITH SOME DATA
    res.render('accountSettings', {object: objects})

//REMEMBER TO CHANGE HTML TO .ejs EXTENSION.
//MOVE settings.ejs TO DIR:
//yourAppDir > views > settings.js

//settings.ejs
    <input value="<%= object[0].value %>">
    <input value="<%= object[1].value %>">
    <input value="<%= object[2].value %>">

Answer 1

您的方法不起作用的核心原因是您正在从 settings.html 的内容创建一个 DOM，并对其进行操作，但从未将其保存回文件中。

但是，这种方法本身存在严重缺陷。它效率低下并且受制于竞争条件。你需要改变你的方法。

1. 摆脱cheerio
2. 将 HTML 文档转换为 template。有plenty to choose from。
3. 将重定向替换为渲染调用，将您的数据传递到模板中：

这样的：

res.render('accountSettings.ejs', { settings: results[0] });