使用纯js将数据从node.js发送到前端

Question

我正在尝试将带有数据的对象从 Node.js 服务器发送到 js 文件（以便在前端使用此数据）。

在文件main.js中，我正在操作 DOM。我执行以下请求：

let dataName = [];
let request = async ('http://localhost:3000/') => {
    const response = await fetch(url);
    const data = await response.json();
    dataName = data.name;
}

let name = document.getElementById('name');
name.textContent = dataName;

然后在文件server.js中我有一个对象：

data = [
    {
        "id": 1,
        "name": "Jhon"
    },
    {
        "id": 2,
        "name": "Mike"
    }
];

我想将其作为 json 字符串（或其他方式）发送到main.js作为对我的请求的响应。

问题：我的数据显示在浏览器的窗口上。我怎样才能得到它作为回应？

我试过

let express = require('express');
let app = express();
app.use(express.static(`main`));
app.get('/', function(req, res){
    res.json(data); //also tried to do it through .send, but there data only on window in browser
});
app.listen(3000);

有人可以告诉我要更改代码中的哪些内容或指出我要谷歌搜索的方向吗？（我不想使用模板引擎）。

请帮助我:) 愿你平安。

Answer 1

我认为您正在尝试在同一 URL 上为您的前端和 JSON 数据提供服务/。

您需要调整您的服务器代码如下：

let express = require('express');
let app = express();
app.use(express.static(`main`));
app.get('/api', function(req, res){
    res.json(data); //also tried to do it through .send, but there data only on window in browser
});
app.listen(3000);

现在您的数据将以 JSON 形式从/api. 然后您可以在前端发出请求，如下所示：

let dataName = [];
let request = async () => {
    const response = await fetch('http://localhost:3000/api');
    const data = await response.json();
    dataName = data.name;
}

let name = document.getElementById('name');
name.textContent = dataName;

还有一个问题是url没有被正确定义为参数。我调整了函数，只在正确的位置使用 URL 字符串。