web-dev-qa-db-ja.com

node.jsからhtmlに変数を渡す

Node.jsからHTMLファイルに変数を渡そうとしています。

app.get('/main', function(req, res) {
  var name = 'hello';
  res.render(__dirname + "/views/layouts/main.html", {name:name});
});
javascripthtmlnode.js
13
vic-3

このような変数を渡すことができたことがわかりました

<script>var name = "<%= name %>";</script>
console.log(name);
19
vic-3

利用できるのは、パグ（以前のジェイド）のようなテンプレートエンジンです。有効にするには、次を実行する必要があります。

  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!'}); });

これにより、node.jsで渡された変数が指定した値に変更されたindex.htmlページがレンダリングされます。これは、expressjsテンプレートエンジンページから直接取得されています。 http://expressjs.com/en/guide/using-template-engines.html

パグの詳細については、以下を確認することもできます。 https://github.com/pugjs/pug

13
Vasil Dininski

可能な書き方を見つけました。

サーバ側 -

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

  var name = 'hello';

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

});

クライアント側（main.html）-

<h1><%= name %></h1>
6
Pritam Jana

NodeとHTMLのみでは、目的を達成することはできません。PHPを使用するのとは異なり、他のものをインストールせずに<title> <?php echo $custom_title; ?> 。

Nodeを使用してやりたいことを行うには、「テンプレート」エンジンと呼ばれるもの（Jade、check this outなど）を使用するか、JavascriptでHTTPリクエストを使用してサーバーからデータを取得し、これを使用して、HTMLの一部を置き換えます。

どちらもいくつかの追加作業が必要です。それはplug'n'playではなくPHPあなたが望むようなことをするときです。

6
Tudor Leustean

Expressを使用する場合、View Engineを使用する必要はまったくありません。次のようなものを使用します。

<h1>{{ name }} </h1>

これは、View Engineの代わりにHTMLを使用するようにアプリケーションを以前に設定した場合に機能します

4
Bryam42

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});
});
4
Codemaker

res.json、ajax、promiseを使用し、localStorageの素敵なひねりを加えて任意の場所で使用し、その珍しいアーケード愛のトークンを追加します。 PS、Cookieを使用できますが、Cookieはhttpsで噛むことができます。

webpage.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)});
});
2
Patrick Knott

クライアントのHTMLページのノードオブジェクトから必要なオブジェクトを返すhttp API nodeリクエストによってこれを達成しました。

例：API: localhost:3000/username

ノードAppオブジェクトによるキャッシュからログインしているユーザーを返します。

ノードルートファイル、

app.get('/username', function(req, res) {
    res.json({ udata: req.session.user });
    });
2
Sainudheen Sahib

上部にあるもの以外に、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 回答のソース

0
zaffar