Question

项目：从4个人群资金链接中剔除募集资金的数量，并在一个页面上实时显示所有这些金额以获得实时结果

我已经使用express创建了一个节点应用程序，并成功地从多个站点中抓取了数据（结果显示在我的终端控制台中），但现在我希望这些数据能够显示在我的主页HTML的特定部分，位于id =＆＃34;＆＃34;。

我不想保存到数据库，因为我希望HTML页面上显示的金额是页面加载和抓取后填充的确切数字。

这里有一些代码（来自我的server.js文件）：

request('https://www.blah.com', function (error, response, html) {
  if (!error && response.statusCode == 200) {
    var $ = cheerio.load(html);
    var unitedData = $('.cta-title').children().first().text();
      console.log("Manchester: " + unitedData);
  } $('#raised-united').append(unitedData);
});

X4（每个链接一个）全部保存在＆＃34;函数scrape（）{}＆＃34;标签。这段代码在我的终端执行：terminal's console.log所以我知道它有效。

但我拥有的HTML（index.html）：

            <div class="col" id="numbers">
                <h2 id="raised-united"></h2>
                <h3 id="outOf"> of $5,000</h3>
            </div>

没有改变......

这是我的server.js文件：

//dependencies
var express = require("express");
var cheerio = require("cheerio");
var request = require("request");
var bodyParser = require("body-parser");
//setting port
var PORT = process.env.PORT || 3000;
//start express
var app = express();
var router = express.Router();
app.use(express.static("public"));
app.use(router);

function scrape(){
//scrapes Gooners crowdrise link
request('https://www.crowdrise.com/o/en/campaign/austin-goonersupperninety', function (error, response, html) {
  if (!error && response.statusCode == 200) {
    var $ = cheerio.load(html);
    var goonersData = $('.cta-title').children().first().text();
      $('#raised-gooners').append(goonersData);
      console.log("Gooners: " +goonersData);
  }
});

//scrapes Austin Reds crowdrise link
request('https://www.crowdrise.com/o/en/campaign/austin-reds-and-upper-ninety', function (error, response, html) {
  if (!error && response.statusCode == 200) {
    var $ = cheerio.load(html);
    var redsData = $('.cta-title').children().first().text();
      $('#raised-reds').append(redsData);
      console.log("Reds: " + redsData);
  }
});

//scrapes Austin Spurs crowdrise link
request('https://www.crowdrise.com/o/en/campaign/austin-spurs-and-upper-ninety', function (error, response, html) {
  if (!error && response.statusCode == 200) {
    var $ = cheerio.load(html);
    var spursData = $('.cta-title').children().first().text();
      $('#raised-spurs').append(spursData);
      console.log("Spurs: " + spursData);

  }
});

//scrapes Austin Manchester crowdrise link
request('https://www.crowdrise.com/o/en/campaign/austinmanch esterunitedupperninety', function (error, response, html) {
  if (!error && response.statusCode == 200) {
    var $ = cheerio.load(html);
    var unitedData = $('.cta-title').children().first().text();
      console.log("Manchester: " + unitedData);
  } $('#raised-united').append(unitedData);
});
};


app.listen(PORT, function() {
 console.log("App running on port" + PORT);
});

//directs server to homepage
module.exports = function(router){
router.get("/", function(req, res){
    res.render("public/index.html");
});
}

scrape();

Answer 1

您必须将Express'模板功能与模板引擎（如Pug，EJS或Handlebars）一起使用，以动态呈现html模板，以显示您的数据。

Node中的Scraped数据不会出现在HTML页面中

1 个答案: