Express + Mongoose 路由配置与前端 JS 请求协同调试指南-js教程-PHP中文网

Express + Mongoose 路由配置与前端 JS 请求协同调试指南

本文详解 express 后端路由定义、mongoose 连接稳定性及前后端 url 协同问题，涵盖常见 404/500 错误排查、restful 接口规范实践，并提供可直接运行的完整客户端请求示例。

本文详解 express 后端路由定义、mongoose 连接稳定性及前后端 url 协同问题，涵盖常见 404/500 错误排查、restful 接口规范实践，并提供可直接运行的完整客户端请求示例。

在构建基于 Express + Mongoose 的汇率管理应用时，「URL 不生效」问题通常并非单一环节故障，而是后端路由注册、数据库连接状态、静态资源托管路径、以及前端请求上下文四者协同失配所致。以下为系统性解决方案：

✅ 一、确保后端路由已正确注册且无逻辑阻断

你的 Express 代码中已定义 /tasasDeCambio 的 GET、POST、PUT 路由，但需注意：

路由必须在 app.listen() 之前声明（当前代码满足）；
中间件顺序至关重要：bodyParser 必须在路由前注册（✅ 已正确放置）；
未处理 DELETE 路由：若前端调用删除却未实现，将返回 404 —— 建议补全：

// 在现有路由下方添加
app.delete('/tasasDeCambio/:tasaId', (req, res) => {
  TasasDeCambio.findByIdAndDelete(req.params.tasaId)
    .then(tasa => {
      if (!tasa) {
        return res.status(404).send({ message: `No se encontró tasa con ID ${req.params.tasaId}` });
      }
      res.send({ message: "Tasa eliminada exitosamente" });
    })
    .catch(err => {
      if (err.kind === 'ObjectId') {
        return res.status(404).send({ message: "ID inválido" });
      }
      res.status(500).send({ message: "Error al eliminar: " + err.message });
    });
});

✅ 二、验证 MongoDB 连接稳定性与模型定义

错误提示中提到 “mongoose line 20 A+”，极可能指向模型文件 ./server/models/TasasDeCambio.js 存在语法或导出问题。请确认其内容类似：

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

const tasaSchema = new mongoose.Schema({
  moneda: { type: String, required: true, unique: true },
  tasa: { type: Number, required: true, min: 0 }
}, { timestamps: true });

module.exports = mongoose.model('TasaDeCambio', tasaSchema);

⚠️ 关键检查点：

文件路径是否真实存在（./server/models/TasasDeCambio → 注意大小写与扩展名）；
mongoose.model() 名称是否与 require() 路径一致；
是否遗漏 module.exports 或导出非 Model 实例。

✅ 三、前端请求需匹配后端服务上下文

你提供的前端 JS 代码逻辑合理，但存在两个关键修复项：

Miller CSV TSV JSON 数据处理器

Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。

下载

tasa.id 应为 tasa._id（MongoDB 默认主键字段名）：

// ❌ 错误写法
actualizarTasaDeCambio(tasa.id);
// ✅ 正确写法
actualizarTasaDeCambio(tasa._id);

fetch 请求需显式指定 Content-Type 及方法（尤其 PUT/DELETE）：

function actualizarTasaDeCambio(id) {
  const nuevaTasa = document.getElementById('tasa-' + id).value;
  fetch(`/tasasDeCambio/${id}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ moneda: '', tasa: parseFloat(nuevaTasa) }) // 注意：实际应读取原 moneda 值
  }).then(r => r.json()).then(console.log).catch(console.error);
}

function borrarTasaDeCambio(id) {
  fetch(`/tasasDeCambio/${id}`, { method: 'DELETE' })
    .then(r => r.json()).then(console.log).catch(console.error);
}

✅ 四、开发环境必备调试步骤

检查项	验证方式	说明
服务是否启动	`curl http://localhost:3000/tasasDeCambio`	若返回 `Cannot GET /tasasDeCambio` → 路由未注册或端口错误
MongoDB 是否运行	`mongosh --eval "db.runCommand({ping:1})"`	确保本地 `mongod` 进程活跃
静态资源路径	访问 `http://localhost:3000/index.html`	`express.static()` 路径是否包含 HTML 入口？
CORS 限制（开发期）	浏览器控制台 Network 标签页	若出现 `CORS policy` 错误，临时添加中间件： `app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); next(); });`