如何使用 node.js 更改前端 html

Posted 2023-03-07

【中文标题】如何使用 node.js 更改前端 html

【英文标题】：How to change front-end html using node.js

【发布时间】：2016-04-11 03:46:10

【问题描述】：

所以我想从我的 node.js 后端对我的前端 html 文件进行更改。我该怎么做？ （任何带有示例的建议将不胜感激）

这里是我想修改的地方：

router.post('/change', function(req, res)
    console.log(req.body.list);
    //modify html DOM here!!
    //preferably using jQuery
)

【问题讨论】：

您不能只从那里修改它。您可以返回一些内容，然后对客户端的响应执行一些操作，或者您可以将客户端重定向到新页面。

你能解释一下你所说的前端 HTML 文件是什么意思吗？

我有一个 index.html 文件，我想对使用带有 node.js 的服务器端脚本应用永久更改。

【参考方案1】：

您不能以我认为您正在尝试做的方式从节点端进行修改。您可以向客户端发送回响应，在该响应上，您可以触发一个函数（您可以在 JQuery 中编写），该函数将更改 DOM 并将需要更改的内容保存在本地存储中......这是一个例子...

//server.js
router.post('/change',function(req,res)

    // the message being sent back will be saved in a localSession variable
    // send back a couple list items to be added to the DOM
    res.send(success: true, message: '<li>New list item number 1</li><li>New list item number 2</li>');
);

这里是前端...

//index.html
//body
<h1>Hello World</h1>
    <ul>
        <li>List item 1</li>
         //li items with class change will be changed on button click
        <li class='change'>List item 2</li>
        <button class="trigger">Trigger Change</button>
    </ul>

<script>

   //if we have data stored in the session variable, then use the data to change the DOM text
    if(window.localStorage.permanentData)
        $('li.change').replaceWith(window.localStorage.permanentData);
    

    //change DOM function
    function changeDom()
        //ajax call
         $.ajax(
                  url: 'http://localhost:8080/change',
                  method:'POST',
                  data: list: "some info"
                ).done(function(data)
                    //if we have a successful post request ... 
                    if(data.success)
                        //change the DOM &
                        //set the data in local storage to persist upon page request
                        localStorage.setItem("permanentData", data.message);
                        var savedText = localStorage.getItem("permanentData");
                        $('li.change').replaceWith(savedText);

                        return;
                    
                ).fail(function()
                   //do nothing ....
                    console.log('failed...');
                    return;
                );
        ;

    //trigger change DOM  function
    $('.trigger').click(function()
        changeDom();
    );

</script>

【讨论】：

但是如果我希望我对 DOM 的更改是永久性的呢？ （即刷新不会使更改消失）你知道我该怎么做吗？

@DannyLiu 抱歉这么晚才回复您；我出去吃饭过生日。我提供了一些示例代码，以帮助您深入了解您正在尝试做什么。