如何将Express后端变量传递至前端JS？课程内容加载优化咨询

针对你提到的现有方案（隐藏DOM元素）的痛点，以下是几种更优的通用解决方案，尤其适配课程课时内容一次性加载、前端无刷新切换的场景：

1. 模板引擎直接注入全局JS变量 #

这是替代隐藏DOM元素最直接的方案，适合一次性传递结构化数据（比如完整的课时问题列表），无需DOM查询即可直接在前端JS中使用。

实现示例： #

后端（Express + EJS）：

// 路由中查询数据库获取完整课时数据
app.get('/course/:id', async (req, res) => {
  const lessonContent = await LessonModel.findById(req.params.id).populate('questions');
  // 将数据转为JSON字符串，避免模板渲染时的语法问题
  res.render('course-page', {
    lessonData: JSON.stringify(lessonContent)
  });
});

前端模板（EJS）：

<script>
  // 直接将后端传递的JSON字符串转为JS对象
  const globalLessonData = <%= lessonData %>;
  
  // 初始化时渲染第一个问题
  renderQuestion(globalLessonData.questions[0]);
</script>

前端切换逻辑：

function switchQuestion(questionIndex) {
  const targetQuestion = globalLessonData.questions[questionIndex];
  // 渲染问题到页面（更新标题、选项等）
  document.getElementById('question-title').textContent = targetQuestion.title;
  document.getElementById('question-options').innerHTML = targetQuestion.options.map(opt => 
    `<div class="option">${opt.content}</div>`
  ).join('');
}

优势： #

• 无额外HTTP请求，页面加载即可获取所有数据
• 无需DOM查询，直接操作内存中的数据，性能更优
• 结构化数据处理更方便，适配课程这类多问题的场景

2. 页面初始化时发起API请求 #

如果数据量极大，或需要后续动态更新数据，这种前后端分离的方式更灵活，也更符合现代前端开发模式。

实现示例： #

后端新增API接口：

// 权限验证中间件（确保只有合法用户访问）
const authMiddleware = (req, res, next) => {
  if (!req.user) return res.status(401).json({ msg: '未授权' });
  next();
};

app.get('/api/course/:id', authMiddleware, async (req, res) => {
  const lessonContent = await LessonModel.findById(req.params.id).populate('questions');
  res.json(lessonContent);
});

前端JS：

// 页面加载完成后请求数据
document.addEventListener('DOMContentLoaded', async () => {
  // 课时ID可通过模板引擎注入（比如EJS的<%= lessonId %>）
  const lessonId = '<%= lessonId %>';
  const response = await fetch(`/api/course/${lessonId}`);
  const lessonData = await response.json();
  
  // 将数据存入局部状态（替代全局变量更安全）
  const lessonStore = {
    currentQuestionIndex: 0,
    questions: lessonData.questions
  };
  
  // 渲染初始问题
  renderCurrentQuestion(lessonStore);
  
  // 绑定切换按钮事件
  document.getElementById('next-btn').addEventListener('click', () => {
    if (lessonStore.currentQuestionIndex < lessonStore.questions.length - 1) {
      lessonStore.currentQuestionIndex++;
      renderCurrentQuestion(lessonStore);
    }
  });
});

function renderCurrentQuestion(store) {
  const question = store.questions[store.currentQuestionIndex];
  document.getElementById('question-title').textContent = question.title;
  // 渲染选项等逻辑
}

优势： #

• 前后端职责分离，代码结构更清晰
• 数据可缓存（比如存入localStorage），用户刷新页面无需重新从数据库查询
• 后续可扩展分页、数据更新等功能，灵活性更高

3. 小量数据的直接变量注入 #

针对用户ID、用户名这类小体量数据，可直接在模板的<script>标签中定义变量，比隐藏DOM元素更简洁：

<script>
  const currentUser = {
    id: <%= user.id %>,
    username: '<%= user.username %>'
  };
</script>

针对课程场景的推荐 #

如果你的课时数据量中等，且页面加载时就需要完整数据，优先选择方案1（模板注入全局变量），实现成本最低且性能最优；如果数据量极大或需要后续动态更新，选择方案2（API请求）更合适。

注意事项 #

• 模板注入JSON时，必须使用JSON.stringify处理数据，避免XSS攻击和语法错误
• API请求方式需做好权限验证，防止未授权用户访问课程数据

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