Express SPA中如何将JS文件关联到多个HTML文件中的指定页面

服务端配置修改 #

你现有server.js中app.get('/*')的配置会拦截所有GET请求统一返回index.html，是典型的SPA单页应用配置，优先匹配这个路由会导致你无法访问自定义接口、也无法直接加载contact.html文件，需要先调整：

• 先安装发邮件需要的依赖：npm install nodemailer
• 修改server.js代码如下：

const express = require('express');
const path = require('path');
const nodemailer = require('nodemailer');

const app = express();

// 新增：解析请求体的中间件，必须加才能拿到表单提交的参数
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// 静态资源配置保留，也可以直接把整个frontend目录设为静态资源，方便加载contact.html
app.use('/static', express.static(path.resolve(__dirname, 'frontend', 'static')));
app.use(express.static(path.resolve(__dirname, 'frontend')));

// 新增：处理联系表单提交的接口
const mailTransporter = nodemailer.createTransport({
  // 以下以QQ邮箱为例，其他邮箱修改对应SMTP配置即可
  host: 'smtp.qq.com',
  port: 465,
  secure: true,
  auth: {
    user: '你的发信邮箱@qq.com',
    pass: '你的邮箱SMTP授权码' // 注意不是邮箱登录密码，需要到邮箱后台开启SMTP服务获取授权码
  }
})
app.post('/api/submit-contact', async (req, res) => {
  const { name, contact, content } = req.body
  try {
    await mailTransporter.sendMail({
      from: '你的发信邮箱@qq.com',
      to: '收信的目标邮箱@xxx.com',
      subject: '网站联系表单新提交',
      text: `提交人姓名：${name}\n联系方式：${contact}\n留言内容：${content}`
    })
    res.status(200).json({ code: 0, message: '提交成功' })
  } catch (error) {
    console.error('发信失败：', error)
    res.status(500).json({ code: 1, message: '提交失败，请稍后重试' })
  }
})

// 注意：原有的/*路由要放到所有接口配置的最后面，才不会覆盖其他路由
app.get('/*', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'frontend', 'index.html'));
});

app.listen(process.env.PORT || 8080, () => console.log('Server running...'));

前端代码配置 #

如果是多页应用的contact.html，提交代码有两种存放方式：

1. 直接写在contact.html的<script>标签里
2. 单独存为contact.js放到frontend/static目录下，再在contact.html中通过<script src="/static/contact.js"></script>引入
   前端提交代码示例：

// 假设你的表单DOM的id为contactForm，输入项对应的id分别为name、contact、content
document.querySelector('#contactForm').addEventListener('submit', async (e) => {
  e.preventDefault()
  const submitData = {
    name: document.querySelector('#name').value,
    contact: document.querySelector('#contact').value,
    content: document.querySelector('#content').value
  }
  try {
    const resp = await fetch('/api/submit-contact', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(submitData)
    })
    const result = await resp.json()
    alert(result.message)
  } catch (err) {
    console.error(err)
    alert('提交失败，请稍后重试')
  }
})

如果是单页SPA应用，不需要单独创建contact.html，直接把上面的提交逻辑写到对应联系页的前端组件逻辑中即可。

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