网页存在多个表单时action属性应如何取值？Express如何处理同路径多表单请求？

1. 网页存在多个表单时action属性的设置方式 #

优先按表单的业务场景设置不同的action路径，比如用户登录表单设置action="/user/login"，内容搜索表单设置action="/search"，这种方式和服务端路由天然匹配，代码可读性和可维护性最高。
如果有特殊业务要求必须复用同一路径，也可以保留相同action，通过其他参数区分不同表单。

2. 两个表单均设置action="/"时的Express处理方案 #

你存在的认知误区是Express路由仅匹配路径，实际上Express路由会同时匹配请求方法和请求路径两个条件，根路径下可以定义多个不同请求方法的处理逻辑，互不冲突：

• 如果两个表单提交方法不同：比如一个是GET提交，一个是POST提交，直接分别定义app.get("/", () => {})处理GET类型的表单提交，app.post("/", () => {})处理POST类型的表单提交即可。
• 如果两个表单提交方法相同：可以在表单内部新增隐藏字段做标识，示例代码如下：

<!-- 第一个表单 -->
<form action="/" method="post">
  <input type="hidden" name="form_flag" value="login">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

<!-- 第二个表单 -->
<form action="/" method="post">
  <input type="hidden" name="form_flag" value="search">
  <input type="text" name="keyword" placeholder="搜索关键词">
  <button type="submit">搜索</button>
</form>

服务端处理逻辑示例：

// 提前配置body解析中间件，否则无法读取req.body
app.use(express.urlencoded({ extended: true }))

app.post('/', (req, res) => {
  // 根据隐藏字段判断表单类型走对应逻辑
  switch(req.body.form_flag) {
    case 'login':
      // 执行登录校验逻辑
      break
    case 'search':
      // 执行搜索查询逻辑
      break
    default:
      // 非法请求处理
      res.status(400).send('请求参数异常')
  }
})

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