点击登录链接弹出模态框但未跳转/login路由的实现问题咨询

嘿，我来帮你拆解问题，再一步步给出解决思路哈！

首先得先搞清楚你现在的问题根源：你点击带有show-modal类的登录链接时，应该是你的JS代码（虽然没贴出来，但从类名能猜到）调用了event.preventDefault()阻止了链接的默认跳转行为——所以浏览器不会发起GET /login请求，URL自然也不会更新，只是单纯弹出了模态框。而你想要的是既弹出模态框，又让URL同步变成/login，同时表单提交后能正确处理成功跳转、失败提示的逻辑。

下面是具体的实现步骤，咱们一步步来改：

1. 修复点击链接时的URL更新与模态框同步 #

首先要完善你的模态框交互JS，让点击链接时既显示模态框，又更新URL，同时处理用户直接访问/login的场景：

document.addEventListener('DOMContentLoaded', function() {
  const loginLink = document.querySelector('.show-modal');
  const loginModal = document.querySelector('.giris');
  const closeBtn = document.querySelector('.giris-kapat');

  // 显示模态框并同步URL
  function showLoginModal() {
    loginModal.classList.remove('gizle');
    // 只有当前URL不是/login时才更新，避免重复操作
    if (window.location.pathname !== '/login') {
      history.pushState({ modal: 'login' }, 'Giriş', '/login');
    }
  }

  // 隐藏模态框并恢复URL
  function hideLoginModal() {
    loginModal.classList.add('gizle');
    // 如果当前URL是/login，返回上一页（或者改回原URL，看你需求）
    if (window.location.pathname === '/login') {
      history.back();
    }
  }

  // 点击登录链接：阻止默认跳转，显示模态框+更新URL
  loginLink.addEventListener('click', function(e) {
    e.preventDefault();
    showLoginModal();
  });

  // 点击关闭按钮隐藏模态框
  closeBtn.addEventListener('click', hideLoginModal);

  // 处理浏览器前进后退：确保URL和模态框状态一致
  window.addEventListener('popstate', function(e) {
    if (e.state && e.state.modal === 'login') {
      showLoginModal();
    } else {
      hideLoginModal();
    }
  });

  // 处理直接访问/login的情况：页面加载时自动弹出模态框
  if (window.location.pathname === '/login') {
    showLoginModal();
  }
});

2. 完善后端GET /login路由 #

你现在的GET /login是空的，得让它渲染你的主页面（就是包含导航和模态框的页面）——这样当用户直接在地址栏输入/login时，服务端能返回正确的页面，然后前端JS会自动弹出模态框：

router.get("/login", async (req, res) => {
  // 假设你的主页面模板名为"index"，根据你实际的模板名称调整
  res.render("index");
});

3. 用AJAX处理表单提交，实现无刷新验证 #

原来的普通表单提交会刷新页面，体验不好。咱们改成AJAX提交，这样页面不刷新，失败时能在模态框里直接显示错误，成功再跳转：

第一步：给表单加个ID方便JS选择

修改你的HTML表单部分：

<form id="loginForm" action="/login" method="POST">
  <!-- 原来的表单内容不变 -->
</form>

第二步：添加表单提交的AJAX处理（接在之前的DOMContentLoaded代码里）

// 新增错误信息容器
const errorContainer = document.createElement('div');
errorContainer.classList.add('login-error');
loginModal.querySelector('div').appendChild(errorContainer);

// 处理表单提交
const loginForm = document.getElementById('loginForm');
loginForm.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止默认表单提交（避免页面刷新）
  const formData = new FormData(this);

  fetch('/login', {
    method: 'POST',
    body: formData,
    headers: {
      'Accept': 'application/json'
    }
  })
  .then(response => {
    if (response.ok) {
      // 登录成功，跳转到用户页面
      window.location.href = '/user-page';
    } else {
      // 登录失败，解析后端返回的错误信息
      return response.json().then(err => { throw new Error(err.message); });
    }
  })
  .catch(error => {
    // 在模态框里显示错误提示
    errorContainer.textContent = error.message;
    errorContainer.style.color = 'red';
  });
});

第三步：修改后端POST /login路由，返回JSON格式响应

这样后端能和前端AJAX交互，返回成功/失败的状态和信息：

router.post("/login", async (req, res) => {
const { username, password } = req.body;

try {
  const request = new sql.Request();
  const result = await request
    .input("username", sql.VarChar, username)
    .input("password", sql.VarChar, password)
    .query("SELECT * FROM Kullanicilar WHERE kullaniciAdi = @username AND kullaniciSifre = @password");

  if (result.recordset.length > 0) {
    console.log("giriş başarılı");
    // 登录成功，返回成功状态
    res.status(200).json({ success: true });
  } else {
    // 登录失败，返回错误信息
    res.status(401).json({ message: "Geçersiz kullanıcı adı veya şifre" });
  }
} catch (err) {
  console.error("Giriş işlemi sırasında hata oluştu:", err);
  res.status(500).json({ message: "Giriş sırasında bir hata oluştu." });
}
});

4. 可选：给错误信息加个简单样式 #

让错误提示更显眼：

.login-error {
  margin: 12px 0;
  padding: 10px;
  border-radius: 4px;
  background-color: #ffebee;
  color: #c62828;
}

这样改完之后，就能实现你要的所有效果啦：

• 点击登录链接，URL自动变成/login，同时弹出模态框
• 直接访问/login时，页面加载后自动弹出模态框
• 表单提交后，成功跳转到用户页面，失败则在模态框里显示错误提示
• 关闭模态框时，URL会恢复到之前的路径

备注：内容来源于stack exchange，提问作者Richpoort123