阅读量:9
要实现前后端交互,可以使用axios来发送HTTP请求和接收响应。
在前端,可以使用以下代码来发送请求:
import axios from 'axios'; axios.get('/api/data') // 发送GET请求 .then(response => { console.log(response.data); // 处理响应数据 }) .catch(error => { console.error(error); // 处理错误 }); axios.post('/api/data', { name: 'John', age: 25 }) // 发送POST请求 .then(response => { console.log(response.data); // 处理响应数据 }) .catch(error => { console.error(error); // 处理错误 });
在后端,可以使用以下代码来处理请求并发送响应:
const express = require('express'); const app = express(); app.get('/api/data', (req, res) => { // 处理GET请求 res.send({ message: 'Hello World!' }); // 发送响应数据 }); app.post('/api/data', (req, res) => { // 处理POST请求 const { name, age } = req.body; // 获取请求体中的数据 // 处理数据 res.send({ message: `Hello ${name}, you are ${age} years old!` }); // 发送响应数据 }); app.listen(3000, () => { console.log('Server started on port 3000'); });
以上代码使用了Express框架来创建一个简单的服务器。通过使用app.get
和app.post
方法来定义不同的路由,然后通过res.send
方法发送响应数据。
在前端的axios请求中,请求的URL需要根据实际情况进行修改,以匹配后端服务器的路由设置。