vue前端+nodejs后端通信-简单demo

要实现Vue前端与Node.js后端的通信，你可以通过创建一个简单的REST API接口来完成。下面是一个简单的示例，展示了如何使用Vue前端发送HTTP请求到Node.js后端，并处理响应。

后端 (Node.js + Express)

首先，你需要设置一个简单的Node.js后端来接收请求并返回响应。你可以使用Express框架来简化这个过程。

1. 安装Express

npm install express

2. 创建简单的Express服务器 (server.js):

const express = require('express');
const app = express();
const PORT = 3000;

app.get('/api/hello', (req, res) => {
  res.send('Hello from Node.js backend!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

前端 (Vue)

在Vue前端，你可以使用axios库来发送HTTP请求。

1. 安装axios

如果你还没有安装axios，可以通过npm进行安装：

npm install axios

2. 在Vue组件中发送请求 (App.vue):

<template>
  <div>
    <button @click="fetchData">Fetch Data from Backend</button>
    <p>{{ responseData }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      responseData: ''
    };
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:3000/api/hello')
        .then(response => {
          this.responseData = response.data;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>

在这个示例中，当你点击“Fetch Data from Backend”按钮时，Vue前端会发送一个GET请求到http://localhost:3000/api/hello，这是你在Node.js后端设置的API端点。然后，后端会响应这个请求，发送回一个字符串'Hello from Node.js backend!'，这个字符串会被显示在Vue组件的<p>标签中。