javascript - 将 node.js 需要模块导入 .html
问题描述
我正在开发一个复杂的程序,其中包括上传 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 函数来确保在将结果传递给另一个函数之前获得结果。例如 GOR_login() 将执行 API GET 请求,如果我不使用 away,则其中的数据console.log(id)
将是未定义的。我不确定这是否是正确的做法。
API 请求函数 GOR_login() 和 Gor_completed_actions 都使用 node.js 模块 fetch-node。我想在创建表后在我的 html 文件中调用这些函数,但我必须以某种方式将 fetch-node 模块导入到 html 文件中。
请检查这个 JS 小提琴:http: //jsfiddle.net/v04k3w7j/。
上传 excel 文档后,它会创建一个表格并填充数组 codes_to_updt [] 。这个数组告诉我需要进行哪些 API 调用。之后,我必须执行 API 调用的函数:
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 文件中使用 fetch 方法的问题。在我的 .js 文件中,我这样做:
var fetch = require("node-fetch");
但它不允许我在 .html 中这样做。
有人可以澄清一下这个问题的最佳解决方案是什么吗?
UPDATE1出于安全原因,我隐藏了 URL
在我的 .html 中,我尝试对我的 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);
}
然后在填充我的数组后调用此函数:
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 输出返回我的数据:
[
{ 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 对象数据 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>
解决方案
我认为你不能在 PureJS 上导入 Node 模块。但是您可以尝试像这样调用 NodeJS 函数:
注意:我使用的是 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”的文件夹中。
如果你愿意,你可以将它们全部组合起来。希望这有帮助。再见!
推荐阅读
- sql - 如果一个表有很多列,如何写一个更清晰的脚本?
- api - 如何使用 Twitter API 向我们授权的用户发送推文?
- javascript - Puppeteer - 滚动时的多个屏幕截图
- javascript - 反应过滤功能
- android - Android SDK 更新站点`https://dl.google.com/android/repository/repository2-1.xml` 和`2-2.xml` 有什么区别?
- python - RNN模型的超参数调优
- terraform - Terraform Cloud cottinuos 部署销毁以前的实例
- python - Beautiful Soup 和 Selenium 无法抓取网站内容
- node.js - 使用 Typescript 创建节点模块时出错
- powershell - 为什么这个 Powershell ForEach 循环每次迭代都会变慢?