繁体   English   中英

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

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

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

这是我的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": ""
  }
}

让我向您解释,由于服务器/客户端的概念非常简单,您无法以这种方式进行操作。

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

您正在创建在http:// localhost:3000上运行的服务器

如果您使用快递,则可以创建一条路线

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

然后运行您的服务器脚本

节点server.js

并使用http:// localhost:3000 / users从浏览器访问内容

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM