Question

我是节点js的新手。我正在编写一个nodejs应用程序来从mongoDB获取数据并在表格中显示在页面上。但数据没有显示出来用例是：
用户将导航到localhost:8999/以转到名为Queue的主页面。这里有一个页面HealthReport的链接，点击哪个用户将导航到healthreport.html我需要显示来自mongo的数据。我能够在浏览器中查看json数据，但在所需页面中显示它是行不通的。我需要遵循哪些特定的目录结构？我使用js文件来做到这一点，但它不起作用。该文件位于以下healthreport-db.js：

$(function() {  


    var startTime = new Date();
    startTime.setMonth(startTime.getHours() - 6); 

    $.ajax({
        url : "http://localhost:8999/healthreport/getHealthReport",
        dataType: "json",
        success : function(data) {

            var latest = data.length - 1;
            var snapShotTime = moment.utc(data[latest].snapShotTime).toDate();
            var nfs = data[latest].nfs;
            var hive = data[latest].hive;
            console.log("db.js hit");

            // Add values to Hive Stats Table
            $("#nfs").text("NFS: "+nfs);
            $("#hive").text("HIVE: "+hive);


        },
        error : function() {
            console.log("failed to get hiveInfo data");
        }
    });
});

healthreport.html文件（我需要在“views”目录中显示已解析的json数据）：

<html>
<head>

<title>HealthReport</title></head>
<body>
Health Report
<table>
    <tr>
        <th>value</th>
    </tr>
    <tr>
        <td id="nfs"></td>
    </tr>
    <tr>
        <td id="hive"></td>
    </tr>
</table>
<script src="healthreport-db.js"></script>
</body>
</html>

“views”目录中的

queue.html文件：

<html>
<head>
<title>Queue</title></head>
<body>
Queue<br>
<a href="healthreport.html">Health Report</a>
</body>
</html>

我有一个名为main_web.js的主要js文件：

var mongoose = require('mongoose');
var express = require('express');
var bodyParser = require('body-parser');

var collectorConn = mongoose.createConnection('mongodb://localhost:27017/mongotest3'); 
exports.collectorConn = collectorConn;
var app = express();

var publicOpts = { maxAge: 86400000 }; // Max age of 1 day for static content

// Routes
var route = require('./route.js');
var healthReport = require('./healthReportRoute.js');


app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
app.use(express.static('public', publicOpts)); //all client source will be in public folder
app.use(express.static('views')); //views folder contains html & ejs files
app.set('view engine', 'ejs');  
app.engine('html', require('ejs').renderFile);  //render html files as ejs


// Route handlers
app.use('/', route);
app.use('/healthreport', healthReport);


var port = process.env.PORT || 8999;
app.listen(port);
console.log("open your browser to localhost:" + port);

exports.app = app;

然后我有一个充当路由器的route.js：

var express =require('express'); 
var router = express.Router();

/* Home page */
router.get('/', function(req, res, next) {
    res.render('./queue.html',{title: "Queue"});
    }); 

router.get('/healthreport', function(req, res, next) {
      res.render('./healthreport.html',{title: "HealthReport"});
    });

module.exports = router;

然后我有healthReportRoute.js能够使用网址localhost:8999/healthreport/getHealthReport在网络上获取json数据：

var express =require('express'); //add express
var router = express.Router();
var moment = require('moment'); //add moment

//mongoose schema
var appTableProdSchema = require("./appTableProdSchema.js");

router.get('/getHealthReport', function(req, res) {
    // Return the most recent document
     var records = appTableProdSchema
                   .find()
                   .sort({'_id': -1})
                   .limit(1)
                   .exec(function(err, data) {
                        if (err) return res.sendStatus(500);
                        res.json(data);
                   });
}); 

module.exports = router;

appTableProdSchema.js是：

var conn = require('./main_web').collectorConn;

module.exports = conn.model('AppTableProd', {
    snapShotTime : String,
    nfs: Array,    
    hive: Array
});

我不知道如何将数据导入healthreport.html页面。请帮忙

Answer 1

您正在大量使用jQuery库但尚未导入它。

每次在healthreport-db.js中都有$时，就会尝试引用jQuery库。

您可以下载该库并将其包含在您的项目中，也可以直接链接到托管在众多cdn之一的库中。这是从谷歌的cdn导入的文档和代码：

http://jquery.com/download/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

您的healthreporter.html将如下所示：

<html>
<head>

<title>HealthReport</title></head>
<body>
Health Report
<table>
    <tr>
        <th>value</th>
    </tr>
    <tr>
        <td id="nfs"></td>
    </tr>
    <tr>
        <td id="hive"></td>
    </tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="healthreport-db.js"></script>
</body>
</html>

node js：无法在html表中呈现json数据（显示为空白），但url显示数据

1 个答案: