通过导出访问 HTML 文件中的 JS 变量 (Node.js)

Question

我试图通过单击 HTML 文件中的 bootstrap 按钮来访问变量。

这是我的 app.js 使用 exports 导出变量的代码。

var express = require('express'),                                           // Require express functionality
    app = express(),                                                        // Create variable called app and use the express functionality
    server = require('http').createServer(app),                             // Require http functionality, then create server (app variable)
    io = require('socket.io').listen(server),                               // Create IO variable to listen to server, while requiring socket.io functionality
    userNames = ['J'],                                                      // Array for usernames
    rooms = [];                                                             // Array for different chatrooms

server.listen(3000);                                                        // Listen on PORT 3000
app.use(express.static(__dirname + '/'));

exports.name = userNames;

这是我的 HTML 代码，正文中嵌入了脚本。我已经尝试删除 var app = require('./app.js'); 和 alert("test"); 确实有效，但是一旦我输入添加行 var app = require('./app.js');，我的程序就会冻结。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="css/login.css" type="text/css" rel="stylesheet" />
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">
                    <img alt="Brand" src="http://www.corchurch.org/_assets/css/images/logo.png">
                </a>
            </div>
        </div>
    </nav>
</head>

<body>
    <div class="row">
        <div class="col-sm-4"></div>
        <div class="col-sm-4">
            <h1>Login</h1>
            <div class="input-group">
                <input id="usernameBox" type="text" class="form-control" placeholder="Username">
                <input id="passwordBox" type="text" class="form-control" placeholder="Password">
                <button id="loginButton" type="button" class="btn btn-default">Login</button>
            </div>
        </div>
        <div class="col-sm-4"></div>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script>
        var app = require('./app.js');
        var $loginButton = $('#loginButton');
        $loginButton.on('click', function(e) {
            e.preventDefault();
            alert("test");
            alert(app.name[0]);
        });
    </script>
</body>
<footer class="footer">
    <br>
    <br>
    <br>
    <br>
    <br>
    <center>&copy; 2015 COR Church - Developed by Jerrell Jones</center>
</footer>

</html>

如果您需要更多信息，请告诉我。我目前在 Win7 x64 上使用 IntelliJ IDEA 14.1.4。

下面还有我的packages.json文件。

{
  "name": "CORChat",
  "version": "0.0.2",
  "description": "COR Web Chat",
  "private": "true",
  "dependencies": {
    "socket.io": "",
    "express": "",
    "bootstrap": ""
  }
}

Answer 1

让我解释一下，你不能这样做，因为非常简单的 sever/client 概念。

您的 (index).html 或浏览器客户端环境中的任何运行。服务器上的 node.js 代码运行。

您正在创建运行正在 http://localhost:3000

上的服务器

如果你使用的是快递，你可以创建一个路由

app.get('/users', function(req, res) {
  res.send('Hello Jarrell');
});

然后运行你的服务器脚本

node server.js

并使用 http://localhost:3000/users

从浏览器访问内容

通过导出访问 HTML 文件中的 JS 变量 (Node.js)

Access JS variable in HTML file via export (Node.js)

html

javascript

intellij-idea

node.js

socket.io