写出前后端分离项目怎么实现交互的代码
时间: 2023-07-10 16:06:26 浏览: 188
前后端分离项目中,前端和后端通过 API 接口进行交互。以下是一个简单的示例代码:
前端代码:
```javascript
fetch('/api/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'example',
password: 'password'
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```
后端代码:
```javascript
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
app.post('/api/user', (req, res) => {
const { username, password } = req.body;
// 处理请求数据
res.json({ success: true });
});
app.listen(3000, () => console.log('App listening on port 3000!'));
```
在这个示例代码中,前端使用 `fetch` 函数向后端发送一个 POST 请求,请求的路径为 `/api/user`,请求的数据是一个 JSON 对象。后端使用 Express 框架创建一个 HTTP 服务器,监听 3000 端口。当收到 `/api/user` 的 POST 请求时,后端解析请求数据,处理请求并返回一个 JSON 对象。
需要注意的是,前后端交互的 API 接口需要事先约定好,包括请求方式、请求路径、请求数据格式、响应数据格式等。同时,在生产环境中,需要考虑安全性和性能等问题。
阅读全文