Express项目index.js如何调用home.html中定义的test函数

你当前的实现方式完全无法达成目标，核心错误是混淆了服务端与前端代码的运行边界：

• index.js 是运行在服务器端的Node.js/Express代码，运行环境没有浏览器DOM API、没有jQuery对象，也无法访问用户打开的页面对应的DOM节点
• home.html 中<script>标签包裹的代码是运行在用户本地浏览器环境的，Node.js的require()方法无法直接解析HTML文件内的前端脚本，就算强行把函数提取到服务端，操作DOM的逻辑在服务端运行也会直接报错

原有代码的具体问题 #

• 用require('./home.html')加载HTML文件无效：Node.js默认只会将CommonJS规范的JS文件识别为可执行模块，加载HTML文件只会得到字符串内容，根本无法获取到脚本里导出的test函数
• 响应逻辑顺序错误：代码里提前执行了res.send()向客户端返回响应，后续逻辑和当前请求的前端页面上下文已经断开
• 前端代码本身存在bug：使用jQuery语法但未引入jQuery依赖，appendTo('sendMusics')选择器写法错误，没有对应id/class标识，就算函数执行也找不到DOM挂载点

可行落地方案 #

不要尝试在服务端调用前端的DOM渲染函数，正确的逻辑是服务端只负责存储、返回数据，前端拿到数据后自行调用渲染函数，具体修改步骤如下：

1. 调整Express服务端逻辑 #

托管静态页面资源，服务端仅处理数据存储、接口返回逻辑，不涉及任何DOM操作：

const express = require('express');
const app = express();
const Port = 8080;
const path = require('path');

app.use(express.json());
// 托管public目录下的静态文件，home.html放在public目录即可直接通过http://localhost:8080/home.html访问
app.use(express.static(path.join(__dirname, 'public')));

// 存储提交数据的变量
const musicList = [];
const userList = [];

app.post('/tshirt/:id', (req, res) => {
    if (req.body.Request === "NovaMusica") {
        // 存储新提交的歌曲、用户数据
        musicList.push(req.body.Musica);
        userList.push(req.body.User);
        // 返回全量数据给前端，由前端完成渲染
        res.send({
            code: 0,
            list: musicList.map((music, index) => ({
                music: music,
                user: userList[index]
            }))
        });
    } else {
        res.send({code: 1, msg: "请求参数错误"});
    }
});

// 新增列表查询接口，供页面首次加载时拉取历史数据
app.get('/getMusicList', (req, res) => {
    res.send({
        code: 0,
        list: musicList.map((music, index) => ({
            music: music,
            user: userList[index]
        }))
    });
});

app.listen(Port, () => console.log('service running on http://localhost:' + Port));

2. 调整home.html前端逻辑 #

将渲染逻辑完全放在浏览器端执行，不管是首次加载拉取历史数据，还是提交POST请求拿到最新数据，都直接调用前端环境内的test函数完成渲染：
把home.html放到项目根目录下新建的public文件夹中，代码修改如下：

<html>
<head>
    <!-- 提前引入本地jQuery依赖，原代码使用jQuery语法但未引入对应依赖 -->
</head>
<body>
    <!-- 补全渲染挂载的DOM节点，原代码没有对应节点 -->
    <div id="sendMusics"></div>

    <script>
        // 前端渲染函数，仅在浏览器环境运行
        function test(dataList) {
            // 先清空容器避免重复渲染
            const container = document.getElementById('sendMusics');
            container.innerHTML = '';
            
            // 如果你要继续用jQuery，保留原有写法即可，注意选择器加#标识id
            dataList.forEach((item, index) => {
                const label = document.createElement('label');
                label.style.marginTop = '15px';
                label.style.display = 'inline-block';
                label.style.marginLeft = '5%';
                label.innerHTML = `${item.music} (time)<br><br>&emsp;&emsp;&emsp;${item.user}`;
                container.appendChild(label);
                container.appendChild(document.createElement('br'));
            })
        }

        // 页面首次加载时拉取历史数据渲染
        fetch('/getMusicList')
            .then(res => res.json())
            .then(res => {
                if(res.code === 0) {
                    test(res.list);
                }
            });

        // 你原有的POST提交逻辑中，拿到接口返回的全量列表后，直接调用test(res.list)即可完成页面更新
    </script>
</body>
</html>

逻辑说明 #

这套方案完全符合前后端分离的运行规则：服务端只做数据处理，前端拿到数据后在浏览器环境里执行DOM渲染，不需要跨环境调用函数，稳定性和可维护性更高。

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