如何在EJS中引入本地JS文件 解决404报错及数据库适配问题

问题核心原因 #

• 你没有配置Express静态资源服务，默认Express禁止直接访问views目录下的文件，所以请求/views/Quiz.js返回404
• 你写的Quiz.js混淆了前后端代码，包含require、mongoose等仅Node服务端支持的语法，就算能请求到文件浏览器也无法运行

修复步骤 #

1. 配置静态资源目录 #

在项目根目录创建public文件夹，再在里面创建js子文件夹，专门存放给前端使用的JS文件。
在入口index.js中添加静态资源中间件：

// 加到现有所有app.use配置的前面即可
app.use(express.static(path.join(__dirname, 'public')))

2. 修改EJS中的JS引入路径 #

把原来的引入代码替换为：

<script src="/js/Quiz.js"></script>

3. 拆分前后端代码，修正Quiz.js逻辑 #

浏览器运行的前端JS无法直接操作数据库，你需要在后端写API接口提供数据，前端通过请求获取数据：

后端新增接口（加到index.js中）

// 示例：提供题目查询接口
app.get('/api/get-question', async (req, res) => {
  // 这里写你的mongoose查询逻辑
  const question = await flash_card.findOne({/* 你的查询条件 */})
  res.json(question)
})

前端Quiz.js（放到public/js下）删除所有服务端相关代码，仅保留前端逻辑：

console.log('I am working 2');

document.getElementById("quizStart").addEventListener("click", async function() {
  // 向后端请求数据
  const response = await fetch('/api/get-question')
  const questionData = await response.json()
  // 替换页面内容，字段名和你Schema定义的保持一致
  document.getElementById("question").innerText = questionData.questionContent
})

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