要使用Node.js實現前后端交互,可以使用Express框架來處理HTTP請求和響應。以下是一個簡單的示例:
首先,確保你已經安裝了Node.js和Express框架,并創建一個新的項目文件夾。
在項目文件夾中創建一個server.js文件,并編寫以下代碼:
const express = require('express');
const app = express();
// 設置靜態文件夾
app.use(express.static('public'));
// 處理GET請求
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello from the server!' });
});
// 啟動服務器
const PORT = 3000;
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
在項目文件夾中創建一個public文件夾,并在其中創建一個index.html文件,用于前端頁面。
在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>
在命令行中進入項目文件夾,運行node server.js
啟動服務器。
在瀏覽器中打開http://localhost:3000
,點擊按鈕可以通過前端頁面發起GET請求獲取來自服務器的數據。
通過以上步驟,你就可以用Node.js實現前后端交互了。在實際項目中,你可以根據需要添加更多的路由和處理邏輯來實現更復雜的交互功能。