Question

我想将从我的 server.js 文件中的 request.headers['x-forwarded-for'] 获得的 IP 变量传递到我的网页 index.html 并显示它。我曾尝试将它传递到 <script> 标签中，甚至在标签内传递以立即显示它。这就是我现在的脚本：

server.js：

    const express = require('express')
    const server = express()
    const engine = require('consolidate');
        server.engine('html', engine.mustache);
        server.use(express.static('./'));
            server.get("/", function (request, response) {
    clientIP = request.headers['x-forwarded-for']
    response.render(__dirname + "/index.html", {
        ip: clientIP
    })
})

index.html：

<body>
    <h1>Wolfram Bot</h1>

    <form method='GET' action="/eval">
        <div class="container">
            <div class="prompt left-pane">
                <span>Enter a command to evaluate:</span>
            </div>

            <br> <br>

            <div class="right-pane">
                <input type="text" name="input" placeholder="" />
                <input type="text" name="code" placeholder="code" />
            </div>
        </div>

        <br>

        <div class="submit-cmd">
            <input type="submit" value="Send Command" />
        </div>

        <div>
            <span>Your IP is begin logged: <a id="ip"></a></span>
        </div>

    </form>
</body>

<script>
    var ip = "<%= name %>"
    console.log(ip)
    document.getElementById('ip').innerHTML = ip
</script>

我已经在谷歌上提出了一些问题，但没有任何帮助；( 这里是完整的代码：https://replit.com/@AnonHexo/wolframV3
提前致谢！

Answer 1

如果您使用 Mustache 作为模板引擎（使用 Consolidate），请查看其有关模板工作原理的文档：https://www.npmjs.com/package/mustache

我认为您需要在脚本中使用 {{ ip }}，例如：

<script>
    var ip = "{{ ip }}"
    console.log(ip)
    document.getElementById('ip').innerHTML = ip
</script>

实际上，您可能希望将 ip 设置到 html 中，摆脱 <script> 的东西：

<span>Your IP is begin logged: {{ ip }}</span>

更新

我在本地运行了一个示例以了解为什么不起作用，以下是我的发现：

server.js

const express = require('express')
const server = express()
const engine = require('consolidate');
const port = 3000;

server.engine('html', engine.mustache);
// set .html as the default extension
server.set('view engine', 'html');
server.set('views', __dirname + '/public');

server.get('/', (req, res) => {
    const acceptHeader = req.get(`Accept`)
    console.log(`Accepting: ${acceptHeader}`);
    
    res.render(`server`, {
        ip: acceptHeader
    })
})

server.listen(port, () => {
    console.log(`running on port ${port}`);
});

我必须设置 view engine 和 views 才能使其工作。此外，我还必须安装 mustache，即使我的代码没有直接使用它（文档说明这是必需的步骤）。

现在，这里有一些有趣的东西：html 文件名为 index.html，当调用 / 时，它被 express 作为默认 html 加载，而没有在 {{1} 运行我的侦听器}.
这通常发生在调用根路径 (/) 时，服务器尝试默认加载 index.html 中的内容作为静态内容，我们可能没有注意到我们设置的侦听器没有被使用。
我在将文件名更改为 / 时发现了它。

现在这个文件，正在渲染没有javascript的动态内容，检查一下：

server.html

server.html

另外，我没有显示 IP，因为它并不总是在请求中，所以我稍微修改了它以显示 <html lang="en"> <head> </head> <body> <h1>Wolfram Bot</h1> <form method='GET' action="/eval"> <div class="container"> <div class="prompt left-pane"> <span>Enter a command to evaluate:</span> </div> <br> <br> <div class="right-pane"> <input type="text" name="input" placeholder="" /> <input type="text" name="code" placeholder="code" /> </div> </div> <br> <div class="submit-cmd"> <input type="submit" value="Send Command" /> </div> <div> <span>Accept Headers: {{ ip }}</span> </div> </form> </body> </html> 标头，但逻辑是相同的。

使用 express 将 Node.js 变量从后端传递到前端

1 个答案:

更新