如何实现Vue与Node.js Express的对接？项目协作方案咨询

一、三者核心协作逻辑 #

• Vue：作为前端层，专注用户界面渲染、交互逻辑处理，通过HTTP请求（axios/fetch）调用Express提供的API完成数据交互。
• Express：作为后端服务层，处理前端请求、执行业务逻辑，通过ODM工具（如Mongoose）与MongoDB交互实现数据增删改查，同时可在生产环境托管Vue静态资源，实现访问控制。
• MongoDB：作为非关系型数据库，存储项目的结构化/非结构化数据，与Express通过数据模型完成数据读写。

二、Express实现对Vue的核心控制方式 #

1. 提供数据交互API接口 #

Express编写RESTful API，作为Vue与数据库之间的中间层，处理所有数据请求。示例代码：

// Express路由文件（routes/api.js）
const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');
const User = require('../models/User');

// 获取用户列表接口
router.get('/users', async (req, res) => {
  try {
    const users = await User.find();
    res.json(users);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

// 创建用户接口
router.post('/users', async (req, res) => {
  const user = new User({
    name: req.body.name,
    email: req.body.email
  });
  try {
    const newUser = await user.save();
    res.status(201).json(newUser);
  } catch (err) {
    res.status(400).json({ message: err.message });
  }
});

module.exports = router;

Vue中调用API的示例：

// Vue组件内代码
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    }
  },
  async mounted() {
    const response = await axios.get('/api/users');
    this.users = response.data;
  }
}

2. 生产环境托管Vue静态资源 #

Vue项目执行npm run build生成dist打包文件夹后，Express可直接托管该文件夹，作为前端静态资源服务器，同时处理单页应用的路由兼容。示例代码：

// Express主文件（app.js）
const express = require('express');
const app = express();
const path = require('path');
const mongoose = require('mongoose');

// 托管Vue打包后的静态资源
app.use(express.static(path.join(__dirname, 'vue-project/dist')));

// 解析JSON请求体
app.use(express.json());

// 挂载API路由
const apiRoutes = require('./routes/api');
app.use('/api', apiRoutes);

// 处理所有非API请求，返回Vue入口文件（兼容单页路由）
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'vue-project/dist/index.html'));
});

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/your-db-name')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('MongoDB连接失败:', err));

// 启动服务
app.listen(3000, () => {
  console.log('服务运行在 http://localhost:3000');
});

3. 权限与请求校验控制 #

Express可通过中间件实现身份验证、权限校验，限制Vue前端的资源访问范围。示例：

// 身份验证中间件
const jwt = require('jsonwebtoken');
const authMiddleware = (req, res, next) => {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) {
    return res.status(401).json({ message: '未授权访问' });
  }
  try {
    const decoded = jwt.verify(token, 'your-secret-key');
    req.user = decoded;
    next();
  } catch (err) {
    res.status(401).json({ message: '无效的身份令牌' });
  }
};

// 受保护的API路由
router.get('/protected-data', authMiddleware, (req, res) => {
  res.json({ message: '这是受保护的数据', user: req.user });
});

三、MongoDB与Express的对接 #

使用Mongoose作为ODM工具简化数据操作，步骤如下：

1. 定义数据模型：

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  name: {
    type: String,
    required: true
  },
  email: {
    type: String,
    required: true,
    unique: true
  }
});

module.exports = mongoose.model('User', userSchema);

2. 在Express路由中调用模型完成数据增删改查（如前面API示例中的User.find()、user.save()）。

内容的提问来源于stack exchange，提问作者choi2j