我正在尝试将一个变量从 node.js 传递到我的 HTML 文件。
app.get('/main', function(req, res) {
var name = 'hello';
res.render(__dirname + "/views/layouts/main.html", {name:name});
});
【问题讨论】：
标签： javascript html node.js
我发现我可以像这样传递一个变量
<script>var name = "<%= name %>";</script>
console.log(name);
【讨论】：
您可以使用某种模板引擎，例如 pug（以前是玉）。要启用它，您应该执行以下操作：
npm install --save pug - 将其添加到项目和 package.json 文件中app.set('view engine', 'pug'); - 在 express 中注册为视图引擎./views 文件夹并添加一个简单的.pug 文件，如下所示：html
head
title= title
body
h1= message
注意间距很重要！
app.get('/', function (req, res) {
res.render('index', { title: 'Hey', message: 'Hello there!'});
});
这将呈现一个 index.html 页面，将 node.js 中传递的变量更改为您提供的值。这直接取自 expressjs 模板引擎页面：http://expressjs.com/en/guide/using-template-engines.html
有关哈巴狗的更多信息，您还可以查看：https://github.com/pugjs/pug
【讨论】：
can not read property X of undefined 的错误......但是，同时 UI 完全按照它应该的方式渲染。你对此有什么想法吗？
something.X
我找到了可能的写作方式。
服务器端 -
app.get('/main', function(req, res) {
var name = 'hello';
res.render(__dirname + "/views/layouts/main.html", {name:name});
});
客户端（main.html） -
<h1><%= name %></h1>
【讨论】：
使用 res.render() 方法将 node.js 中的变量传递给 html。
例子：
var bodyParser = require('body-parser');
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/'));
app.use(bodyParser.urlencoded({extend:true}));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.set('views', __dirname);
app.get('/', function(req, res){
res.render('index.html',{email:data.email,password:data.password});
});
【讨论】：
仅使用 Node 和 HTML，您将无法实现您的目标；这不像使用 PHP，您可以在没有安装任何其他东西的情况下执行 <title> <?php echo $custom_title; ?> 之类的操作。
要使用 Node 做你想做的事，你可以使用所谓的“模板”引擎（如 Jade，检查 this out）或使用 Javascript 中的一些 HTTP 请求从服务器获取数据并使用它用它替换部分 HTML。
两者都需要一些额外的工作；在做你想做的事情时，它不像 PHP 那样 plug'n'play。
【讨论】：
如果使用 Express，则根本不需要使用视图引擎，请使用以下内容：
<h1>{{ name }} </h1>
如果您之前将应用程序设置为使用 HTML 而不是任何视图引擎，则此方法有效
【讨论】：
Unexpected token < 错误。
使用 res.json、ajax 和 promises，加上 localStorage 的一个很好的转折，可以在任何地方使用它，并为这种罕见的街机爱添加了令牌。 PS，你可以使用cookies，但是cookies会咬https。
网页.js
function (idToken) {
$.ajax({
url: '/main',
headers: {
Authorization: 'Bearer ' + idToken
},
processData: false,
}).done(function (data) {
localStorage.setItem('name', data.name);
//or whatever you want done.
}).fail(function (jqXHR, textStatus) {
var msg = 'Unable to fetch protected resource';
msg += '<br>' + jqXHR.status + ' ' + jqXHR.responseText;
if (jqXHR.status === 401) {
msg += '<br>Your token may be expired'
}
displayError(msg);
});
server.js，使用 express()
app.get('/main',
passport.authenticate('oauth2-jwt-bearer', { session: false }),
function (req, res) {
getUserInfo(req) //get your information to use it.
.then(function (userinfo) { //return your promise
res.json({ "name": userinfo.Name});
//you can declare/return more vars in this res.json.
//res.cookie('name', name); //https trouble
})
.error(function (e) {console.log("Error handler " + e)})
.catch(function (e) {console.log("Catch handler " + e)});
});
【讨论】：
我通过http API node 请求实现了这一点，该请求从节点对象返回所需对象，用于客户端的HTML 页面，
例如：API: localhost:3000/username
通过节点 App 对象从缓存中返回登录用户。
节点路由文件，
app.get('/username', function(req, res) {
res.json({ udata: req.session.user });
});
【讨论】：
除了上面的那些，您还可以使用 JavaScript 从服务器获取详细信息。 html文件
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="test">
</div>
<script type="text/javascript">
let url="http://localhost:8001/test";
fetch(url).then(response => response.json())
.then( (result) => {
console.log('success:', result)
let div=document.getElementById('test');
div.innerHTML=`title: ${result.title}<br/>message: ${result.message}`;
})
.catch(error => console.log('error:', error));
</script>
</body>
</html>
server.js
app.get('/test',(req,res)=>{
//res.sendFile(__dirname +"/views/test.html",);
res.json({title:"api",message:"root"});
})
app.get('/render',(req,res)=>{
res.sendFile(__dirname +"/views/test.html");
})
我在关于上述主题的堆栈溢出中找到的最佳答案，这不是我的答案。在几乎相同的问题的某个地方找到它......来源 source of answer
【讨论】：