使用Node.js与Express如何将JavaScript代码部署在后端以避免浏览器查看？

首先得明确：像alert()这种前端专属的API，必须在浏览器里执行，没法完全移到后端。但你可以把不想暴露的核心逻辑（比如数据计算、业务规则判断等）放到后端，前端只负责触发请求和处理后端返回的结果，这样后端的代码就不会被浏览器查到。

下面是针对你的示例代码的具体改造步骤：

1. 改造Express后端，添加API接口 #

在你的Express项目中（比如app.js或者单独的路由文件），新增一个处理请求的接口：

const express = require('express');
const app = express();

// 解析前端发送的JSON数据
app.use(express.json());

// 定义后端接口，处理前端的按钮点击请求
app.post('/api/get-alert-message', (req, res) => {
  // 这里写你不想暴露的核心逻辑，比如从数据库拿数据、计算结果等
  // 示例中我们生成要显示的消息
  const secretMessage = "I am an alert box!";
  // 把结果返回给前端
  res.json({ success: true, message: secretMessage });
});

// 托管前端静态文件（比如你的HTML、CSS、前端JS都放在public目录下）
app.use(express.static('public'));

// 启动服务器
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

2. 修改前端代码，通过请求后端获取数据 #

调整HTML按钮 #

去掉原来的onclick属性，换成通过JS绑定事件：

<button id="alertBtn" type="button" class="btn btn-primary">Primary</button>

重写前端JS文件（test.js） #

原来的myFunction改成请求后端接口，拿到结果后再执行alert：

// 给按钮绑定点击事件
document.getElementById('alertBtn').addEventListener('click', async () => {
  try {
    // 发送请求到后端接口
    const response = await fetch('/api/get-alert-message', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      }
    });
    // 解析后端返回的JSON数据
    const result = await response.json();
    // 如果请求成功，显示alert
    if (result.success) {
      alert(result.message);
    }
  } catch (error) {
    console.error('请求失败:', error);
  }
});

3. 效果说明 #

• 后端的代码（比如生成secretMessage的逻辑）运行在Node.js环境中，浏览器完全访问不到，就算打开开发者工具也看不到这部分代码。
• 前端只有请求后端的逻辑，核心的业务逻辑被藏在了后端，达到了代码保护的目的。

注意事项 #

• 确保你的前端文件（HTML、前端JS、CSS）都放在Express配置的静态目录下（示例中是public目录），这样服务器才能正确返回这些文件。
• 如果有更敏感的逻辑（比如操作数据库、验证权限），全部放在后端接口里处理，前端只负责传递必要的参数和展示结果。

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