Question

我正在尝试将req.params发送到前端并与各种js函数一起使用，但是我不知道如何在js的客户端访问它。

具体来说，我正在尝试抓取用户使用req.param输入的namespace

app.get('/:namespace', function(req,res){
  res.render('chatLayout', { title: 'Welcome to the ' + 
  req.params.namespace +" room!"}), {namespace: req.params.namespace };

});

，然后在客户端js文件中设置一个名为room的变量，如下所示： var room= io.connect('http://localhost:3000/' +namespace);

但是，由于我不知道如何使req.params.namespace可以被客户端js文件访问，因此名称空间是不确定的。

注意：我使用pug作为模板语言

我尝试了一些事情。

尝试从客户端js文件中调用req.params.namespace或namespace，但两者都抛出错误，表明它们未定义
在调用js文件并设置var a=namespace或var a=req.params.namespace之前，使用脚本标记在pug文件中创建全局变量，但这似乎并不能使变量访问js文件。似乎应该像这个问题Can I access variables from another file?一样工作，所以也许这种方法可能行得通，但我只是做得不正确

后端

    var express= require('express');
    var socket= require('socket.io');

    //App setup
    var app= express();
    app.set('view engine', 'pug');
    var server= app.listen(3000, function(){
    });

   //Static files
    app.get('/:namespace', function(req,res){
      res.render('chatLayout', { title: 'Welcome to the ' + 
    req.params.namespace +" room!"}), {namespace: req.params.namespace };

    });

客户端js

   var room= io.connect('http://localhost:3000/' +namespace);

哈巴狗文件

    doctype html
    html(lang='en')
      head
        title= title
        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1')
        <script 
    src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'> 
   </script>
    <script src="/gameChat.js"></script>
    link(rel='stylesheet', href='/style.css')
  body
   <h1>#{title} </h1>
   <div id= "chat">
        <div id= "chat-window">
            <div id= "output"></div>
            <div id= "feedback"></div>
        </div>
        <form id ="form">
            <input id= "handle" type= "text" placeholder="Handle"/>
            <input id= "message" type = "text" placeholder="Message"/>
            <button id= "send">Send</button>
        </form>
  </div>

Answer 1

您应该将变量发送到res.render的第二个参数：

app.get('/:namespace', function(req, res) {
    res.render('chatLayout', {
        title: 'Welcome to the ' + req.params.namespace + " room!",
        namespace: req.params.namespace
    });

});

并从模板调用namespace

Answer 2

在使用变量之前，必须在head标签中定义namespace变量（在<script src="/gameChat.js"></script>行之前）。

只需使用Pug语法：

script.
  loginName="#{namespace}";

完整的模板代码：

doctype html
    html(lang='en')
      head
        title= title
        meta(charset='utf-8')
        meta(name='viewport', content='width=device-width, initial-scale=1')

        <script  src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'></script>
        script.
          var namespace="#{namespace}";

        <script src="/gameChat.js"></script>
    link(rel='stylesheet', href='/style.css')
  body

<h1>#{title} </h1>
<div id= "chat">
    <div id= "chat-window">
        <div id= "output"></div>
        <div id= "feedback"></div>
    </div>
    <form id ="form">
        <input id= "handle" type= "text" placeholder="Handle"/>
        <input id= "message" type = "text" placeholder="Message"/>
        <button id= "send">Send</button>
    </form>
</div>

在服务器端，您必须使用包含chatLayout数据的对象来渲染namespace模板：

app.get("/:namespace", function(req, res) {
  res.render("chatLayout", {
    title: "Welcome to the " + req.params.namespace + " room!",
    namespace: req.params.namespace
  });
});

如何将req.params传递/使用到前端js

2 个答案: