Node Express中如何为单HTML页内的不同功能div配置不同访问URL

你可以根据场景选择以下两种方案：

方案1：服务端多路由匹配，返回同页面 + 状态标识 #

该方案URL语义化无Hash，对SEO更友好。

1. 首先在Express中定义三个路由，均返回对应表单页面，同时传入激活表单的标识：

const express = require('express')
const app = express()
// 配置静态资源访问或者模板引擎根据你的项目架构调整
app.use(express.static('public'))

app.get('/login', (req, res) => {
  // 如果用模板引擎（如EJS）可以直接传变量到模板
  // res.render('auth', { activeForm: 'login' })
  // 纯静态HTML直接返回文件即可，前端读取URL判断要激活的表单
  res.sendFile(__dirname + '/public/auth.html')
})

app.get('/signup', (req, res) => {
  res.sendFile(__dirname + '/public/auth.html')
})

app.get('/forgot-password', (req, res) => {
  res.sendFile(__dirname + '/public/auth.html')
})

2. 前端增加页面加载时的表单切换逻辑，和你现有点击切换逻辑兼容：

document.addEventListener('DOMContentLoaded', () => {
  // 先隐藏所有表单
  const allForms = document.querySelectorAll('#login-form, #signup-form, #forgot-password')
  allForms.forEach(form => form.style.display = 'none')
  // 读取当前路径匹配对应表单
  const path = window.location.pathname
  switch(path) {
    case '/login':
      document.getElementById('login-form').style.display = 'block'
      break
    case '/signup':
      document.getElementById('signup-form').style.display = 'block'
      break
    case '/forgot-password':
      document.getElementById('forgot-password').style.display = 'block'
      break
    default:
      // 默认显示登录表单
      document.getElementById('login-form').style.display = 'block'
  }
})

方案2：Hash路由实现，仅需服务端单路由 #

该方案实现成本更低，前端切换表单无需重新请求服务端。

1. Express侧仅需要定义一个路由返回页面即可：

const express = require('express')
const app = express()
app.use(express.static('public'))

app.get('/auth', (req, res) => {
  res.sendFile(__dirname + '/public/auth.html')
})

2. 前端通过Hash值判断要显示的表单，同时监听Hash变化实现切换：

// 封装表单切换逻辑
function toggleActiveForm() {
  const hash = window.location.hash.slice(1) || 'login'
  const allForms = document.querySelectorAll('#login-form, #signup-form, #forgot-password')
  allForms.forEach(form => form.style.display = 'none')
  document.getElementById(`${hash}-form`).style.display = 'block'
}
// 页面加载时执行一次
document.addEventListener('DOMContentLoaded', toggleActiveForm)
// 监听Hash变化自动切换
window.addEventListener('hashchange', toggleActiveForm)

对应的三个访问URL分别为：/auth#login、/auth#signup、/auth#forgot-password

注意事项 #

• 两种方案都可以和你现有前端点击切换逻辑兼容，点击切换时如果用方案1可以调用history.pushState修改URL不刷新页面，方案2直接修改window.location.hash即可
• 表单提交逻辑单独对应三个POST路由即可，比如POST /login、POST /signup、POST /forgot-password，和常规表单处理逻辑一致

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