web-dev-qa-db-fra.com

Passer une variable de node.js à html

J'essaie de transmettre une variable de node.js à mon fichier HTML.

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

J'ai compris que j'étais capable de passer une variable comme celle-ci

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

Ce que vous pouvez utiliser est une sorte de moteur de gabarit comme pug (anciennement jade). Pour l'activer, procédez comme suit:

  1. npm install --save pug - pour l'ajouter au projet et au fichier package.json
  2. app.set('view engine', 'pug'); - enregistrez-le en tant que moteur de visualisation dans Express
  3. créez un dossier ./views et ajoutez un simple fichier .pug comme ceci:

html head title= title body h1= message Notez que l'espacement est très important!

  1. créer un itinéraire qui renvoie le code HTML traité:

app.get('/', function (req, res) { res.render('index', { title: 'Hey', message: 'Hello there!'}); });

Cela rendra une page index.html avec les variables passées dans node.js remplacées par les valeurs que vous avez fournies. Cela a été directement repris de la page du moteur de templates Expressjs: http://expressjs.com/fr/guide/using-template-engines.html

Pour plus d'informations sur le carlin, vous pouvez également consulter: https://github.com/pugjs/pug

10
Vasil Dininski

J'ai trouvé le moyen d'écrire possible.

Du côté serveur - 

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

  var name = 'hello';

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

});

Côté client (main.html) - 

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

Avec Node et HTML seul, vous ne pourrez pas atteindre vos objectifs. ce n'est pas comme si vous utilisiez PHP, où vous pourriez faire quelque chose comme <title> <?php echo $custom_title; ?>, sans aucun autre logiciel installé.

Pour faire ce que vous voulez avec Node, vous pouvez utiliser un moteur appelé "moteur de templates" (comme Jade, vérifiez this out) ou utilisez des requêtes HTTP en Javascript pour extraire vos données du serveur remplacer des parties du code HTML avec.

Les deux nécessitent un travail supplémentaire; ce n'est pas aussi plug'n'play que PHP lorsqu'il s'agit de faire ce que vous voulez.

5
Tudor Leustean

Si vous utilisez Express, il n'est pas nécessaire d'utiliser un moteur de visualisation, utilisez ce qui suit:

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

Cela fonctionne si vous avez précédemment défini votre application pour utiliser HTML au lieu de n'importe quel moteur de vue.

4
Bryam42

Pour passer des variables de node.js au HTML à l'aide de la méthode res.render ().

Exemple:

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

utilisez res.json, ajax, and promises, avec une jolie touche de localStorage, pour l’utiliser n'importe où, avec des jetons pour cet amour d'arcade rare. PS, vous pouvez utiliser des cookies, mais les cookies peuvent mordre sur 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, en utilisant 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

J'ai réalisé ceci par une requête http API node qui renvoie l'objet requis de l'objet node pour la page HTML chez le client

pour par exemple: API: localhost:3000/username

renvoie l'utilisateur connecté à partir du cache par objet App noeud.

fichier de route de noeud, 

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

À part ceux du haut, vous pouvez utiliser JavaScript pour extraire les détails du serveur. fichier 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");
})

La meilleure réponse que j'ai trouvée sur le débordement de pile sur ledit sujet, ce n'est pas ma réponse. Je l'ai trouvée quelque part pour à peu près la même question ... source source de réponse

0
zaffar