導入 node.js 需要模塊到.html

Question

我正在開發一個復雜的程序，其中涉及上傳 excel 表，創建一個表，然后使用表中的數據。

我必須讀取所有行的第一列，並且對於每個字符串，我必須對服務器執行 API 調用。

API 請求執行如下：

async function main()
{
    var id = await GOR_login();
    console.log(id)
    var result = await Gor_completed_actions(id,"RUT240");
    console.log("emmiting result123=",result)
    
}

我使用 async 和 await 函數來確保在將結果傳遞給另一個 function 之前獲得結果。 例如 GOR_login() 將執行 API GET 請求，如果我不使用 away， console.log(id)中的數據將是未定義的。 我不確定這是否是正確的做法。

API 請求函數 GOR_login() 和 Gor_completed_actions 都使用 node.js 模塊獲取節點。 在創建表后，我想在我的 html 文件中調用這些函數，但我必須以某種方式將 fetch-node 模塊導入 html 文件。

請檢查這個 JS 小提琴： http://jsfiddle.net/v04k3w7j/ 。

上傳excel文檔后，會創建一個表並填充數組codes_to_updt[]。 這個數組告訴我 API 調用我需要做什么。 之后，我必須為 API 調用執行 function ：

async function main()
{
    var id = await GOR_login();
    console.log(id)

    var result = await Gor_completed_actions(id,codes_to_updt); // call with codes_to_updt one by one
    console.log("emmiting result123=",result)

}

對我來說，我無法在.html 文件中使用獲取方法的問題。 在 my.js 文件中，我這樣做：

var fetch = require("node-fetch");

但它不允許我在.html 中這樣做。

有人可以澄清一下這個問題的最佳解決方案是什么嗎？

UPDATE1出於安全原因，我隱藏了 URL

在 my.html 中，我嘗試將以下 function 用於我的 html 獲取請求：

function httpGetAsync(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

然后這個 function 在我的數組被填充后被調用：

    httpGetAsync(URL_start_session);

返回錯誤：

Access to XMLHttpRequest at 'my_url' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

嘗試在節點（服務器）端上傳和解析 excel。

我已經下載了一個 xlsx 模塊並使用以下代碼，我能夠解析 excel 文檔：

var XLSX = require('xlsx')
var workbook = XLSX.readFile('gor_plan2.xlsx');
var sheet_name_list = workbook.SheetNames;
var xlData = XLSX.utils.sheet_to_json(workbook.Sheets[sheet_name_list[0]]);
console.log(xlData);

console.log output 返回我的數據：

[
  { Produkto_kodas: 'Product1', Kiekis: 50 },
  { Produkto_kodas: 'Product2', Kiekis: 295 },
  { Produkto_kodas: 'Product3', Kiekis: 244 },
  { Produkto_kodas: 'Product4', Kiekis: 225 },
  { Produkto_kodas: 'Product5', Kiekis: 17 }
]

現在我嘗試用這些數據構建一個表。

如何將 JSON object 數據 xlData 轉換為 html 之類的東西：

    <tbody>
        <tr>
            <th>Produkto kodas</th>
            <th>Kiekis</th>
        </tr>
        <tr>
            <td>Product1</td>
            <td>50</td>
            </tr>
            <tr>
            <td>Product2</td>
            <td>295</td>
            </tr>
            <tr>
            <td>Product3</td>
            <td>244</td>
            </tr>
            <tr>
            <td>Product4</td>
            <td>225</td>
            </tr>
            <tr>
            <td>Product5</td>
            <td>17</td>
            </tr>
            </tbody>
            </table>

Answer 1

我認為你不能在 PureJS 上導入 Node 模塊。 但是您可以嘗試像這樣調用 NodeJS function：

注意：我使用的是 express.js，希望這對您來說不是問題。

//index.js
const expressjs = require("express")
const app = expressjs();

app.set('view engine', 'html');
app.set('views', __dirname + '/views');

app.get("/", (req, res) => {
   res.render("index.html");
});
app.get("/resources", (req, res) => {
   func()
});

function func() {
   var XLSX = require("xlsx")
}

app.listen(port, () => {
   console.log("Listening")
}

HTML 服務器端：

<script>
    var url = "http://ip:port/resources"
        async function nodecall() {
            fetch(url)
        }
</script>
<button id="tap" onclick="nodecall()">Call NodeJS</button>

如果要將變量從服務器端傳遞到客戶端，可以執行以下操作：

節點：

app.get("/resources", (req, res) => {
   var variable = req.query.var
   var variable2 = req.query.var2
});

HTML：

var url = "http://ip:port/resources?var=hello&var2=world"

如果你想做相反的事情。 客戶端到服務器...

節點：

app.get("/resources", (req, res) => {
   var string = "Hello World"
   return res.send(string)
});

HTML：

let variable = await(await fetch(url)).text()

請記住將 HTML 文件放在名為“views”的文件夾中。

如果你願意，你可以將它們全部組合起來。 希望這有幫助。 再見！