axiosを使用して、フロントエンドとバックエンドのやり取りをどのように実現するか。

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を変更し、バックエンドサーバーのルート設定に合わせてください。