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});
});
J'ai compris que j'étais capable de passer une variable comme celle-ci
<script>var name = "<%= name %>";</script>
console.log(name);
Ce que vous pouvez utiliser est une sorte de moteur de gabarit comme pug (anciennement jade). Pour l'activer, procédez comme suit:
npm install --save pug
- pour l'ajouter au projet et au fichier package.jsonapp.set('view engine', 'pug');
- enregistrez-le en tant que moteur de visualisation dans Express./views
et ajoutez un simple fichier .pug
comme ceci:html
head
title= title
body
h1= message
Notez que l'espacement est très important!
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
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>
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.
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.
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});
});
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)});
});
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 });
});
À 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