溫馨提示×

如何用Node實(shí)現(xiàn)前后端交互

小億
93
2024-05-25 19:04:12
欄目: 編程語言

要使用Node.js實(shí)現(xiàn)前后端交互，可以使用Express框架來處理HTTP請求和響應(yīng)。以下是一個(gè)簡單的示例：

  1. 首先，確保你已經(jīng)安裝了Node.js和Express框架，并創(chuàng)建一個(gè)新的項(xiàng)目文件夾。

  2. 在項(xiàng)目文件夾中創(chuàng)建一個(gè)server.js文件，并編寫以下代碼：

const express = require('express');
const app = express();

// 設(shè)置靜態(tài)文件夾
app.use(express.static('public'));

// 處理GET請求
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the server!' });
});

// 啟動(dòng)服務(wù)器
const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

  1. 在項(xiàng)目文件夾中創(chuàng)建一個(gè)public文件夾，并在其中創(chuàng)建一個(gè)index.html文件，用于前端頁面。

  2. 在index.html文件中編寫以下代碼：

<!DOCTYPE html>
<html>
<head>
  <title>Frontend</title>
</head>
<body>
  <h1>Frontend</h1>
  <button onclick="getData()">Get Data</button>
  <div id="data"></div>

  <script>
    async function getData() {
      const response = await fetch('/api/data');
      const data = await response.json();
      document.getElementById('data').innerText = data.message;
    }
  </script>
</body>
</html>

  1. 在命令行中進(jìn)入項(xiàng)目文件夾，運(yùn)行node server.js啟動(dòng)服務(wù)器。

  2. 在瀏覽器中打開http://localhost:3000，點(diǎn)擊按鈕可以通過前端頁面發(fā)起GET請求獲取來自服務(wù)器的數(shù)據(jù)。

通過以上步驟，你就可以用Node.js實(shí)現(xiàn)前后端交互了。在實(shí)際項(xiàng)目中，你可以根據(jù)需要添加更多的路由和處理邏輯來實(shí)現(xiàn)更復(fù)雜的交互功能。

0 踩