Express REST方法路由异常：CRUD公告板请求全部触发show操作

首先，你的Express路由定义本身是没有问题的——router.get("/:id")、router.patch("/:id")、router.delete("/:id")这三个路由的写法完全合规，问题出在前端的表单提交逻辑上。

核心问题：HTML原生表单不支持PATCH/DELETE请求方法 #

HTML标准里，<form>标签的method属性只认两个值：GET和POST。你在视图里写的：

<form action=`/board/${board._id}` method="patch">
<form action=`/board/${board._id}` method="delete">

浏览器根本不识别patch和delete这两个值，会直接把它们降级为GET请求发送。这就导致不管你提交哪个表单，最终都是发送GET /board/:id，自然只会触发show操作。

解决方案 #

有两种常用的方式解决这个问题：

方案1：使用method-override中间件（传统表单方案）

这是Express生态里处理非GET/POST请求的标准方案，步骤如下：

1. 先安装依赖：

npm install method-override

2. 在你的Express应用中引入并配置中间件：

const methodOverride = require('method-override');
// 配置中间件，指定通过表单里的`_method`字段覆盖请求方法
app.use(methodOverride('_method'));

3. 修改前端表单代码，把method改成POST，并添加一个隐藏字段_method来指定实际要使用的HTTP方法：

<!-- 更新操作的表单 -->
<form action=`/board/${board._id}` method="POST">
  <input type="hidden" name="_method" value="PATCH">
  <!-- 其他表单字段 -->
  <button type="submit">更新公告</button>
</form>

<!-- 删除操作的表单 -->
<form action=`/board/${board._id}` method="POST">
  <input type="hidden" name="_method" value="DELETE">
  <button type="submit">删除公告</button>
</form>

提交表单时，浏览器会发送POST请求，method-override中间件会读取_method字段的值，把请求方法转换成对应的PATCH/DELETE，就能正确匹配到你定义的路由了。

方案2：使用AJAX请求（现代前端方案）

如果你的项目允许使用前端JS（比如fetch、axios），可以直接通过AJAX发送PATCH/DELETE请求，不需要依赖中间件：

// 示例：用fetch发送更新请求
document.querySelector('.update-btn').addEventListener('click', async (e) => {
  e.preventDefault();
  const boardId = /* 获取目标公告ID */;
  const formData = new FormData(document.querySelector('.update-form'));
  
  await fetch(`/board/${boardId}`, {
    method: 'PATCH',
    body: formData
  });
  
  // 请求完成后的逻辑，比如刷新页面
  window.location.reload();
});

// 示例：用fetch发送删除请求
document.querySelector('.delete-btn').addEventListener('click', async (e) => {
  e.preventDefault();
  const boardId = /* 获取目标公告ID */;
  
  await fetch(`/board/${boardId}`, {
    method: 'DELETE'
  });
  
  window.location.reload();
});

这种方式更符合现代前端开发模式，也不需要额外的中间件依赖。

补充验证 #

确认你的路由挂载是正确的——比如你是否把这个路由模块挂载到了/board路径下：

app.use('/board', boardRouter);

如果这一步没问题，按上面的方案修改后，就能正常触发对应的update和delete操作了。

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