将数据从 node.js 附加到现有的 html
Posted
技术标签:
【中文标题】将数据从 node.js 附加到现有的 html【英文标题】：Append data from node.js to existing html 【发布时间】：2017-04-26 02:49:33 【问题描述】：我是 node.js 的菜鸟。可能这是一个微不足道的问题。 我有 server.js：
var express = require('express');
var cors = require('cors');
var app = express();
var path = require('path');
var request = require('request');
var cheerio = require("cheerio");
request(
uri: "http://ptnpnh.ua",
, function(error, response, body)
var $ = cheerio.load(body);
$("[data-tab=toDay] .weatherNow .temp .temperature_value").each(function()
var link = $(this);
var text = link.text();
console.log(text);
);
);
app.use(cors());
app.use(function(req, res, next)
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
);
app.get('/', function(req, res, next)
res.sendFile(path.join(__dirname + '/index.html'));
app.use(express.static('public'));
app.use("/css", express.static(__dirname + '/css'));
app.use("/color", express.static(__dirname + '/color'));
app.use("/fontaw", express.static(__dirname + '/font-awesome'));
app.use("/fonts", express.static(__dirname + '/fonts'));
app.use("/img", express.static(__dirname + '/img'));
app.use("/js", express.static(__dirname + '/js'));
app.use("/node", express.static(__dirname + '/node_modules'));
);
app.post('/', function(req, res, next)
);
app.listen(8080);
如何修改此代码以将“文本”字符串放入现有“/index.html”的 dom 元素（例如，带有 id="appendedText"）？
【问题讨论】：
【参考方案1】：你猜对了
var express = require('express');
var cors = require('cors');
var app = express();
var path = require('path');
var request = require('request');
var cheerio = require("cheerio");
var fs = require('fs') // notice this
request(
uri: "http://ptnpnh.ua",
, function(error, response, body)
var $ = cheerio.load(body);
$("[data-tab=toDay] .weatherNow .temp .temperature_value").each(function()
var link = $(this);
var text = link.text();
console.log(text);
);
);
app.use(cors()); // isnt this the same as below:
app.use(function(req, res, next)
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
);
// you put it here, not assign it every request to /
app.use(express.static('public'));
app.use("/css", express.static(__dirname + '/css'));
app.use("/color", express.static(__dirname + '/color'));
app.use("/fontaw", express.static(__dirname + '/font-awesome'));
app.use("/fonts", express.static(__dirname + '/fonts'));
app.use("/img", express.static(__dirname + '/img'));
app.use("/js", express.static(__dirname + '/js'));
app.use("/node", express.static(__dirname + '/node_modules'));
app.get('/', function(req, res, next)
//res.sendFile(__dirname + '/index.html'); // just send file
fs.readFile(__dirname + '/index.html'), 'utf8', function (err,data)
if (err)
return console.log(err);
//console.log(data);
var $ = cheerio.load('<h2 class="title">Hello world</h2>')
$('h2.title').text('Hello there!')
$('h2').addClass('welcome')
res.set('Content-Type', 'text/html; charset=utf-8');
res.send($.html());
);
);
app.post('/', function(req, res, next)
);
app.listen(8080);
【讨论】：
【参考方案2】：如果您不关心 SEO（即登录/等），而不是每次都修改文件（即通过cheerio 等）...
使用 JSONP
在您的 index.html 中
<head>
...
<script>function getServerData(data) window.__SERVER_DATA__ = data; </script>
<script src="/api/server-data.json?callback=getServerData"></script>
</head>
在您的 Node Express 路由定义中
const app = express();
// ...
app.get('/api/server-data.json', (req, res) =>
res.jsonp(
foo: 'foo',
bar: 'bar'
);
);
然后只需从应用中的任何位置访问window.__SERVER_DATA__ 即可添加到您想要的任何位置的 DOM。
【讨论】：
以上是关于将数据从 node.js 附加到现有的 html的主要内容，如果未能解决你的问题，请参考以下文章
Jackson 不会将新的 JSON 对象附加到现有的 Json 文件中