vue前后端分离怎么实现

<code class="javascript">const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.json({ data: 'Hello from the backend!' });
});</code>

<code class="python">from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/api/data')
def data():
  return jsonify({ data: 'Hello from the backend!' })</code>

<code class="javascript">import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });</code>

<code class="javascript">fetch('/api/data')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });</code>

<code class="javascript">export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    fetchData() {
      axios.get('/api/data')
        .then(response => {
          this.data = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};</code>

<code class="html"><template>
  <div v-if="data">
    {{ data }}
  </div>
</template></code>