Vue 3与Express.js集成：Node.js后端开发基础

Vue 3 是一个现代化的前端框架，而 Express.js 是 Node.js 的一种流行后端框架。将 Vue 3 与 Express.js 集成在一起可以构建全栈应用，使开发者能够同时处理前端和后端逻辑。本文将深入解析如何在 Node.js 环境下集成 Vue 3 和 Express.js，并探讨相关的技术细节。

1. 前置条件

在开始之前，请确保您已经安装了以下工具：

• Node.js（建议版本 >= 14）
• npm 或 yarn

2. 创建项目结构

我们首先创建一个基本的项目结构，分为前端（Vue 3）和后端（Express.js）两部分。

项目结构示例

my-app/
├── backend/      # Express.js 后端代码
│   ├── app.js    # 主入口文件
│   └── ...
├── frontend/     # Vue 3 前端代码
│   ├── src/
│   │   ├── main.js
│   │   ├── App.vue
│   │   └── ...
│   ├── public/
│   └── ...
├── package.json  # 整体项目的依赖管理
└── README.md

3. 设置 Express.js 后端

初始化后端

进入 backend 文件夹并初始化一个新的 Node.js 项目。

cd my-app/backend
npm init -y

安装依赖

安装 Express.js 及其他必要的依赖项。

npm install express cors body-parser

编写后端代码

创建 app.js 文件，编写基础的 Express.js 服务器代码。

const express = require('express');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

// 中间件
app.use(cors());
app.use(express.json());

// 示例 API 路由
app.get('/api/data', (req, res) => {
    res.json({ message: 'Hello from Express!' });
});

// 启动服务器
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

运行后端服务：

node app.js

此时，访问 http://localhost:5000/api/data 将返回 { "message": "Hello from Express!" }。

4. 设置 Vue 3 前端

初始化前端

进入 frontend 文件夹并使用 Vue CLI 或 Vite 创建一个新的 Vue 3 项目。

cd ../frontend
npm init vite@latest .

选择 Vue 3 框架，并安装相关依赖。

npm install

修改 Vue 3 前端代码

打开 src/main.js 并确保正确引入 Vue 3。

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

在 src/App.vue 中，添加从后端获取数据的功能。

<template>
  <div id="app">
    <h1>Data from Backend:</h1>
    <p>{{ dataFromBackend }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      dataFromBackend: null,
    };
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('http://localhost:5000/api/data');
        this.dataFromBackend = response.data.message;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

运行前端开发服务器

npm run dev

访问 http://localhost:3000，您应该能够看到来自后端的数据。

5. 处理跨域问题

由于前端和后端运行在不同的端口上，默认情况下会遇到跨域问题。我们在后端中通过 cors 中间件解决了这个问题。

如果需要更复杂的跨域配置，可以在 app.js 中自定义 CORS 设置：

const corsOptions = {
  origin: 'http://localhost:3000', // 允许的前端域名
  credentials: true,               // 支持带 cookies 的请求
};

app.use(cors(corsOptions));

6. 流程图：前后端交互流程

以下是前后端交互的基本流程图：

sequenceDiagram
participant Frontend as Vue 3 Frontend
participant Backend as Express.js Backend
Frontend->>Backend: GET /api/data
Backend-->>Frontend: { "message": "Hello from Express!" }

7. 扩展讨论

• 环境变量管理：使用 .env 文件来管理敏感信息，例如数据库连接字符串或 API 密钥。
• 生产部署：结合 PM2 或 Docker 来部署后端服务，同时使用 Nginx 反向代理前端静态资源。
• 安全性：为 API 添加身份验证机制（如 JWT）以保护敏感数据。