如何用Node实现前后端交互

   2024-10-13 3810
核心提示:要使用Node.js实现前后端交互,可以使用Express框架来处理HTTP请求和响应。以下是一个简单的示例:首先,确保你已经安装了Node.j

要使用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实现前后端交互了。在实际项目中,你可以根据需要添加更多的路由和处理逻辑来实现更复杂的交互功能。

 
举报打赏
 
更多>同类维修大全
推荐图文
推荐维修大全
点击排行

网站首页  |  关于我们  |  联系方式网站留言    |  赣ICP备2021007278号