Fatal编程技术网
  • node.js/
  • Node.js 在HTML中呈现节点API数据

Node.js 在HTML中呈现节点API数据

node.js

Node.js 在HTML中呈现节点API数据,node.js,Node.js,我一直在学习本教程： 我的HTML页面中有以下脚本： ... <script> fetch('http://ec2-22-222-22-22.compute-1.amazonaws.com:8080/fish') .then(function (response) { return response.json(); }) .then(function (data) { append

我一直在学习本教程：

我的HTML页面中有以下脚本：

...
<script>
    fetch('http://ec2-22-222-22-22.compute-1.amazonaws.com:8080/fish')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function appendData(data) {
        var mainContainer = document.getElementById("myData");
        for (var i = 0; i < data.length; i++) {
            var div = document.createElement("div");
            div.textContent = '>> ' + data[i].timestamp + ' ' + data[i].date + ' ' + data[i].time + ' ' + data[i].airt_c + ' ' + data[i].rh + ' ' + data[i].dewp + ' ' + data[i].prec + ' ' + data[i].slrr + ' ' + data[i].parr + ' ' + data[i].netr + ' ' + data[i].bar + ' ' + data[i].wspd + ' ' + data[i].wdir + ' ' + data[i].gspd + ' ' + data[i].s10t;
            mainContainer.appendChild(div);
        }
    }
</script>

</head>
<body>
<div class="bg">
  <div id="myData"></div>
</div>
我的
index.js
文件（运行在ec2上——与HTML页面不同的主机上）如下所示：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 8080
const db = require('./queries')


app.use(bodyParser.json())
app.use(
  bodyParser.urlencoded({
    extended: true,
  })
)

app.get('/', (request, response) => {
  response.json({ info: 'Node.js, Express, and Postgres API' })
})

app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})

app.get('/fish', db.getFish)

const Pool = require('pg').Pool
const pool = new Pool({
  user: 'user',
  host: 'database-1.sdsad2233.rds.amazonaws.com',
  database: 'db',
  password: 'pass',
})


const getFish = (request, response) => {
  pool.query('SELECT * FROM table ORDER BY timestamp DESC LIMIT 10', (error, results) => {
    if (error) {
      throw error
    }
    response.status(200).json(results.rows)
  })
}

module.exports = {
  getFish,
}
我的
querys.js
如下所示：

const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 8080
const db = require('./queries')


app.use(bodyParser.json())
app.use(
  bodyParser.urlencoded({
    extended: true,
  })
)

app.get('/', (request, response) => {
  response.json({ info: 'Node.js, Express, and Postgres API' })
})

app.listen(port, () => {
  console.log(`App running on port ${port}.`)
})

app.get('/fish', db.getFish)

const Pool = require('pg').Pool
const pool = new Pool({
  user: 'user',
  host: 'database-1.sdsad2233.rds.amazonaws.com',
  database: 'db',
  password: 'pass',
})


const getFish = (request, response) => {
  pool.query('SELECT * FROM table ORDER BY timestamp DESC LIMIT 10', (error, results) => {
    if (error) {
      throw error
    }
    response.status(200).json(results.rows)
  })
}

module.exports = {
  getFish,
}
如何在HTML页面中显示该查询的结果

--

编辑

有人提到这个问题可能是因为HTML页面位于不同的主机上，并且没有HTTPS

我试图在同一台ec2服务器上的一个单独的.js文件中创建HTML，但遇到了一个错误

我的代码：

var http=require("http");
var server = http.createServer(function(request, response) {});
var server = http.createServer(function(request, response) {
    response.writeHead(200, {
        'Content-Type': 'text/plain'
    });
});
var server = http.createServer(function(request, response) {
    response.writeHead(200, {
        'Content-Type': 'text/plain'
    });
    response.write("This is Test Message.");
    response.end();
});
server.listen(8082);



fetch('/fish')
        .then(function (response) {
            return response.json();
        })
        .then(function (data) {
            appendData(data);
        })
        .catch(function (err) {
            console.log('error: ' + err);
        });

    function appendData(data) {
        var mainContainer = document.getElementById("myData");
        for (var i = 0; i < data.length; i++) {
            var div = document.createElement("div");
            div.textContent = '>> ' + data[i].timestamp + ' ' + data[i].date + ' ' + data[i].time + ' ' + data[i].airt_c + ' ' + data[i].rh + ' ' + data[i].dewp + ' ' + data[i].prec + ' ' + data[i].slrr + ' ' + data[i].parr + ' ' + data[i].netr + ' ' + data[i].bar + ' ' + data[i].wspd + ' ' + data[i].wdir + ' ' + data[i].gspd + ' ' + data[i].s10t;
            mainContainer.appendChild(div);
        }
    }

var http=require（“http”）；
var server=http.createServer（函数（请求、响应）{}）；
var server=http.createServer（函数（请求、响应）{
书面答复（200{
“内容类型”：“文本/普通”
});
});
var server=http.createServer（函数（请求、响应）{
书面答复（200{
“内容类型”：“文本/普通”
});
写（“这是测试消息”）；
response.end（）；
});
监听服务器（8082）；
获取（“/fish”）
.然后（功能（响应）{
返回response.json（）；
})
.then（功能（数据）{
附加数据（数据）；
})
.catch（函数（err）{
log（'error:'+err）；
});
函数追加数据（数据）{
var mainContainer=document.getElementById（“myData”）；
对于（变量i=0；i
错误：

$ node reality.js 
/home/ubuntu/riapi/webpage.js:19
fetch('/fish')
^

ReferenceError: fetch is not defined
    at Object.<anonymous> (/home/ubuntu/riapi/webpage.js:19:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Function.Module.runMain (module.js:693:10)
    at startup (bootstrap_node.js:188:16)
    at bootstrap_node.js:609:3

$node reality.js
/home/ubuntu/riapi/webpage.js:19
获取（“/fish”）
^
ReferenceError:未定义提取
反对。（/home/ubuntu/riapi/webpage.js:19:1）
编译（Module.js:652:30）
在Object.Module.\u extensions..js（Module.js:663:10）
在Module.load（Module.js:565:32）
在tryModuleLoad时（module.js:505:12）
在Function.Module.\u加载（Module.js:497:3）
位于Function.Module.runMain（Module.js:693:10）
启动时（bootstrap_node.js:188:16）
在bootstrap_node.js:609:3
我认为您有两个问题：

  • 您正在混合服务器端代码和客户端代码
    fetch
    和 DOM API仅在浏览器中可用，而不在NodeJ中可用，因此 您正试图访问获取的第一个错误
    fetch是
未定义
  • 您没有在服务器端启用CORS请求 代码，只需将这两行代码添加到index.js（服务器端代码）
    • const cors=require（'cors'））
app.use（cors（））
    因此，最终的服务器端代码应该如下所示

    const express=require（'express'））
const bodyParser=require（'body-parser'）
const cors=require（'cors'）//首先需要'npm安装cors'
const app=express（）
常数端口=8080
const db=require（“./querys”）
app.use（cors（））//启用cors请求
app.use（bodyParser.json（））
应用程序使用(
bodyParser.urlencoded({
是的，
})
)
app.get（“/”，（请求、响应）=>{
json（{info:'Node.js、Express和Postgres-API'}）
})
应用程序侦听（端口，（）=>{
log（`App running on port${port}.`）
})
app.get（'/fish'，db.getFish）
    当你使用或curl之类的东西向你的API发出请求时会发生什么？@HowlingFantods-当我从终端
    curl
    时，我正确地取回了记录。Chrome的开发工具在这种情况下非常有用。打开控制台（Command+Option+J（Mac）或Control+Shift+J（Windows、Linux、Chrome OS）），查看是否有任何错误。如果没有，请尝试在代码中添加一个“断点”（在新行上，添加
    debugger；
    ），这将允许您在代码中的给定点检查不同变量的值。我将从
    appendData
    函数内部开始。@HowlingFantods-我发现了这个，我正在尝试解码：
    访问以获取http://ec2-22-222-22-22.compute-1.amazonaws.com:8080/fishCORS策略已阻止来自源“null”：请求的资源上不存在“访问控制允许源”标头。如果不透明响应满足您的需要，请将请求的模式设置为“无cors”，以获取禁用cors的资源。