当前位置：首页 > 行业动态 > 正文

html如何调用nodejs

admin
行业动态
2024-04-07
1

要在HTML中调用Node.js，你需要遵循以下步骤：

1、安装Node.js

2、创建一个简单的Node.js服务器

3、在HTML中使用JavaScript发起请求到Node.js服务器

1. 安装Node.js

访问Node.js官网（https://nodejs.org/）下载并安装适合你操作系统的Node.js版本。

2. 创建一个简单的Node.js服务器

创建一个名为server.js的文件，并在其中输入以下代码：

const http = require('http');
const server = http.createServer((req, res) => {
  res.writeHead(200, { 'ContentType': 'text/plain' });
  res.end('Hello from Node.js server!');
});
const port = 3000;
server.listen(port, () => {
  console.log(Server running at http://localhost:${port}/);
});

保存文件后，打开终端或命令提示符，导航到包含server.js的文件夹，然后运行以下命令启动服务器：

node server.js

3. 在HTML中使用JavaScript发起请求到Node.js服务器

创建一个名为index.html的文件，并在其中输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF8">
  <meta name="viewport" content="width=devicewidth, initialscale=1.0">
  <title>Call Node.js from HTML</title>
</head>
<body>
  <h1>Call Node.js from HTML</h1>
  <button id="callNodeJs">Call Node.js Server</button>
  <script>
    document.getElementById('callNodeJs').addEventListener('click', async () => {
      try {
        const response = await fetch('http://localhost:3000');
        const data = await response.text();
        alert(data);
      } catch (error) {
        console.error('Error calling Node.js server:', error);
      }
    });
  </script>
</body>
</html>

保存文件后，用浏览器打开index.html文件，点击“Call Node.js Server”按钮，你应该会看到一个弹出窗口显示“Hello from Node.js server!”。