将变量从 node.js 传递到 html

IT技术 javascript html node.js
2021-01-20 19:17:58

我试图将一个变量从 node.js 传递到我的 HTML 文件。

app.get('/main', function(req, res) {
  var name = 'hello';
  res.render(__dirname + "/views/layouts/main.html", {name:name});
});
6个回答

我发现我能够传递这样的变量

<script>var name = "<%= name %>";</script>
console.log(name);
你用的什么渲染引擎?
2021-03-15 19:17:58
如何在 html 渲染页面而不是 ejs 中使用相同的东西?
2021-03-19 19:17:58
@AstemirAlmov 他肯定没有使用 HTML,他必须使用 EJS。看看这里:ejs.co这就是我们在 nodejs 中使用的。
2021-04-09 19:17:58
这使用了一个引擎,并且您没有指定您正在使用的引擎
2021-04-12 19:17:58
这如何与对象而不是字符串一起使用?
2021-04-13 19:17:58

您可以使用某种模板引擎,例如 pug(以前称为 jade)。要启用它,您应该执行以下操作:

  1. npm install --save pug - 将其添加到项目和 package.json 文件中
  2. app.set('view engine', 'pug'); - 在 express 中将其注册为视图引擎
  3. 创建一个./views文件夹并添加一个简单的.pug文件,如下所示:
html
  head
    title= title
  body
    h1= message

注意间距很重要!

  1. 创建一个返回处理过的 html 的路由:
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

有关 pug 的更多信息,您还可以查看:https : //github.com/pugjs/pug

抱歉,我知道它与此完全无关,但是在将变量传递给我的视图时遇到了问题,这真的很奇怪。模板呈现得非常好,但是在控制台中(随机地,没有明确的模式),有时会抛出错误can not read property X of undefined......但是,与此同时,UI 完全按照它应该的方式呈现。你有什么想法吗?
2021-03-15 19:17:58
我想通了。以前从未见过这种情况,但只有在打开开发工具时才会发生,所以我意识到服务器抛出了 500 错误,因为开发工具试图访问 jquery.min.map(我在供应商文件夹中没有),所以 500 错误正在中断 express,因此变量没有通过。
2021-03-24 19:17:58
你在页面上有任何 javascript 吗?如果这样做,请检查谁/什么正在尝试访问名为“X”的字段。它应该是类似的东西something.X
2021-04-03 19:17:58

我找到了可能的写作方式。

服务器端 -

app.get('/main', function(req, res) {

  var name = 'hello';

  res.render(__dirname + "/views/layouts/main.html", {name:name});

});

客户端 (main.html) -

<h1><%= name %></h1>
你在这里使用的视图引擎是什么?
2021-03-15 19:17:58
app.engine('html', require('ejs').renderFile);
2021-03-26 19:17:58

使用 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});
});
这使用 ejs 视图引擎
2021-04-11 19:17:58

仅使用 Node 和 HTML,您将无法实现您想要的;这不像使用 PHP,您可以在其中执行类似的操作<title> <?php echo $custom_title; ?>,而无需安装任何其他东西。

要使用 Node 做您想做的事,您可以使用称为“模板”引擎的东西(例如 Jade,请查看此内容)或使用 Javascript 中的一些 HTTP 请求从服务器获取数据并使用它来替换部分HTML 与它。

两者都需要一些额外的工作;在做您想做的事情时,它不像 PHP那样即插即用

我认为 nodejs 中的答案是错误的,你可以使用 <%= %> alert('<%= myVar %>');
2021-03-30 19:17:58
@Bahgat Mashaly 那么你不介意发布一个例子并向世界其他地方展示它是如何工作的?因为你刚才复制粘贴的东西不是原生 nodeJS。看起来像是安装在 nodeJS 之上的模板引擎module。
2021-04-13 19:17:58