堆棧內存溢出
  簡體   English   中英

如何在Node.js Azure Web應用程序中加載HTML依賴項

[英]How to load html dependencies in node.js azure web app

 原文  2018-01-12 17:39:53  1   2    html/ node.js/ azure/ azure-web-sites

問題描述

作為免責聲明，我對javascript和Azure還是陌生的。 我的目標是建立一個Tableau Web數據連接器。 我有以下腳本。 

<html>
<head>
    <title>Facebook Likes</title>
    <meta http-equiv="Cache-Control" content="no-store" />

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
    <script src="FacebookLikes.js" type="text/javascript"></script>
</head>

<body>
    <div class="container container-table">
        <div class="row vertical-center-row">
            <div class="text-center col-md-4 col-md-offset-4">
                <button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Facebook Likes!</button>
            </div>
        </div>
    </div>
</body>
</html>

和 

var http = require('http');
http.createServer((function() {
    // Create the connector object
    var myConnector = tableau.makeConnector();

    // Define the schema
    myConnector.getSchema = function(schemaCallback) {
        var cols = [{
            id: "id",
            dataType: tableau.dataTypeEnum.int
        }, {
            id: "link",
            dataType: tableau.dataTypeEnum.string
        }, {
            id: "likes",
            dataType: tableau.dataTypeEnum.int
        }];

        var tableSchema = {
            id: "Facebook",
            alias: "real-time likes",
            columns: cols
        };

        schemaCallback([tableSchema]);
    };

    // Download the data
    myConnector.getData = function(table, doneCallback) {
        var username = 'xxx'; 
        var password = 'xxx'; 
        var url = 'xxxx';
        var xhttp = new XMLHttpRequest();
        xhttp.open('POST', url, true);

        xhttp.onreadystatechange = function() {//Call a function when the state changes.
            if(xhttp.readyState == 4 && xhttp.status == 200) {
                var response = JSON.parse(xhttp.responseText)
                tableData = [];

                tableData.push({
                    "id": response.id,
                    "link": response.link,
                    "likes": response.likes,
                    });

                table.appendRows(tableData);
                doneCallback();
                }
            }

        params = username + ';' + password
        xhttp.send(params)
        };

    tableau.registerConnector(myConnector);

    // Create event listeners for when the user submits the form
    $(document).ready(function() {
        $("#submitButton").click(function() {
            tableau.connectionName = "Facebook Likes"; // This will be the data source name in Tableau
            tableau.submit(); // This sends the connector object to Tableau
        });
    });
})).listen(process.env.PORT || 1337);

我在本地構建和測試了html和javascript，並且一切正常。 從開發版本中添加的唯一內容是createServer調用。 如果我根據Azure文檔進行git push，則該推成功執行，並且可以在我的應用程序的“部署選項”下看到部署； 但是，當我打開網頁時，收到消息：“您無權查看此目錄或頁面。” 我的研究使我包括如下的package.json和web.config文件。 

{
  "name": "azure-facebook-likes",
  "author": "Xander",
  "version": "1.0",
  "description": "application for use with Tableau web data connector to return facebook likes",
  "tags": [
    "facebook",
    "tableau"
  ],
  "license": "MIT",
  "scripts": {
    "start": "node FacebookLikes.js"
  }
}

- 

<configuration>
    <system.webServer>

        <handlers>
            <!-- indicates that the app.js file is a node.js application to be handled by the iisnode module -->
            <add name="iisnode" path="FacebookLikes.js" verb="*" modules="iisnode" />
        </handlers>

        <rewrite>
            <rules>
                <!-- Don't interfere with requests for logs -->
                <rule name="LogFile" patternSyntax="ECMAScript" stopProcessing="true">
                    <match url="^[a-zA-Z0-9_\-]+\.js\.logs\/\d+\.txt$" />
                </rule>

                <!-- Don't interfere with requests for node-inspector debugging -->
                <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">                    
                    <match url="^FacebookLikes.js\/debug[\/]?" />
                </rule>

                <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
                <rule name="StaticContent">
                    <action type="Rewrite" url="public{REQUEST_URI}" />
                </rule>

                <!-- All other URLs are mapped to the Node.js application entry point -->
                <rule name="DynamicContent">
                    <conditions>
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True" />
                    </conditions>
                    <action type="Rewrite" url="FacebookLikes.js" />
                </rule>
            </rules>
        </rewrite>

    </system.webServer>

    <security>
        <ipSecurity allowUnlisted="true"> 
    </security>

</configuration>

使用這種配置，當我瀏覽到網頁時，收到消息：“由於發生內部服務器錯誤，因此無法顯示該頁面。” Logging-errors.txt顯示以下內容：“應用程序引發了未捕獲的異常並被終止：ReferenceError：未定義tableau。” tableau定義來自html文件中的connector.tableau.com依賴項，但是根據我的判斷，當我指定 

"scripts": {
    "start": "node FacebookLikes.js"
}

在package.json文件中，html文件中的腳本未加載。 我已經為此工作了兩天，並沒有想法。 有人對如何獲取依賴項有建議嗎？ 還是有人可以向我正確的方向推動我前進？ 任何見識將不勝感激。

謝謝！

2 個解決方案

解決方案1
 1  2018-01-15 03:02:34

您正在使用的代碼應從瀏覽器而不是Node.js運行。 您可以將代碼從FacebookLikes.js移至HTML文件，如下所示： 

<html>
<head>
    <title>Facebook Likes</title>
    <meta http-equiv="Cache-Control" content="no-store" />

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

    <script src="https://connectors.tableau.com/libs/tableauwdc-2.3.latest.js" type="text/javascript"></script>
    <script src="FacebookLikes.js" type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            $("#submitButton").click(function() {
                tableau.connectionName = "Facebook Likes"; // This will be the data source name in Tableau
                tableau.submit(); // This sends the connector object to Tableau
            });
        });
    </script>
</head>

<body>
    <div class="container container-table">
        <div class="row vertical-center-row">
            <div class="text-center col-md-4 col-md-offset-4">
                <button type = "button" id = "submitButton" class = "btn btn-success" style = "margin: 10px;">Get Facebook Likes!</button>
            </div>
        </div>
    </div>
</body>

<script>

    var myConnector = tableau.makeConnector();

    // Define the schema
    myConnector.getSchema = function(schemaCallback) {
        // ...
    };

    // Download the data
    myConnector.getData = function(table, doneCallback) {
        // ...
    };

    tableau.registerConnector(myConnector);

</script>

</html>

然后刪除FacebookLikes.js ， web.config和package.json文件。

解決方案2
 0 已采納  2018-01-23 15:28:23

Azure在應用程序設置下具有默認文檔列表。 我已經將我的html文件命名為FacebookLikes.html，這（毫無疑問）不是默認的文檔名稱。 我將文件重命名為index.html，刪除了web.config和package.json文件，並從javascript代碼中刪除了創建服務器調用（並添加了尾隨（）），並且Web應用程序正常運行。 可以想象，我可以將FacebookLikes.html添加到默認文檔中，它應該可以正常工作。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 主機 html 與 javascript 依賴於 node.js 如何使用node.js在html上加載javascript文件 在HTML中使用node.js應用 Node.js：如何將Node.js嵌入到HTML中？ 從Express / node.js Web應用程序預填充HTML / Jade Node.js和HTML 直接從該node.js應用靜態提供的html訪問node.js應用功能 Node.js - 如何創建 html 表？ node.js和HTML頁面？ 如何結合？ 如何在 Node.js/html 中使用 React
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM