4
votes

Passer des données de Node js vers HTML à l'aide d'EJS

Voici mon code côté serveur:

<div class="row">
    <div class="sm-col-12">
    <h3 contenteditable="true" style="font-family:BentonSans Medium; text-align:center; color:rgb(0,38,99);"><%= name %></h3>                    
    <hr style="border-top: dotted 2px;color:grey" />
    </div>
</div>

Voici mon code côté client (Main.html):

app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.use(express.static('views'));
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

app.get('/',function(req,res){
    var title = "PERFORMANCE OVERVIEW";
    res.render('Main.html',{name:title});
})

Le résultat que je suis accéder à la page Main.html est "". Au lieu de cela, il doit afficher "APERÇU DES PERFORMANCES". Qu'est-ce qui ne va pas exactement dans ce code?

Modifier:

J'ai oublié de mentionner que j'ai également essayé d'autres variantes comme et {{name}} . Mais j'obtiens respectivement la sortie "" et "{{name}}" .

javascript html node.js express ejs

3 commentaires

Cela ne devrait-il pas être <% = name%> ? En un coup d'œil, cela ressemble à une faute de frappe où - est là au lieu de = . - signifie sans échappement (je pense), mais je doute que vous vouliez dire cela

J'ai essayé cela aussi, mais j'obtiens toujours le <% = name%> en sortie. Pas le "APERÇU DES PERFORMANCES"

L'avez-vous fait fonctionner? Si ma réponse n'a pas aidé, pouvez-vous mettre à jour votre code pour afficher tout le code sur votre page app.js ?

4 Réponses :

5
votes

le changer en devrait le corriger.

Si ce n'est pas le cas, vous pouvez essayer de changer app.set ('view engine', 'html' ) à app.set ('view engine', 'ejs'); , puis en supprimant les 2 lignes suivantes.

app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));
app.use(bodyParser.json());

app.get('/',function(req,res){
    var title = "PERFORMANCE OVERVIEW" ;
    res.render('Main',{name:title}) ;
});

Je l'ai toujours écrit de cette façon, donc je ne peux pas dire avec certitude si votre syntaxe est correcte, ou si ejs fonctionnera même sans le configurer comme ça.

Mettre à jour

Faire assurez-vous que le fichier Main.html est dans un dossier appelé views , et renommez ce fichier en Main.ejs.

changement suivant res.render ('Main.html', {name: title}); en res.render ('main', {name: title});

6 commentaires

Salut @Jane! J'ai également essayé le changement ci-dessus que vous avez mentionné. Mais j'obtiens toujours le même résultat.

J'ai compris le problème (je pense). Voir ma mise à jour pour la réponse.

Peut également utiliser app.set ('views', path.join (__ dirname, 'path', 'to', 'views')); si vous voulez un dossier de vues personnalisées

@Lawrence Cherone Je suis presque sûr que ejs définit le dossier views comme emplacement par défaut pour rechercher des modèles car je ne l'ai jamais utilisé.

@Jane, les informations mises à jour ont fonctionné! Mais maintenant, je suis confronté à un autre problème. J'ai une autre page .html. Et en cliquant sur un bouton, il bascule entre ces deux pages html en utilisant window.location.href. Mais maintenant, depuis que j'ai changé Main.html en Main.ejs, il télécharge le fichier .ejs au lieu de l'afficher. Comment gérer le fichier .ejs via javascript?

@Harshkumar pouvez-vous mettre à jour votre question avec du code à ce sujet? Je ne sais pas exactement de quoi vous avez besoin. Si vous essayez simplement d'utiliser , vous devrez configurer un itinéraire pour / somePage sur votre app.js

0
votes

Remplacez <% - name%> par <% = name%> dans votre main.html

1 commentaires

J'ai essayé cela aussi, mais j'obtiens toujours le <% = name%> en sortie. Pas le "APERÇU DES PERFORMANCES".

2
votes

<%- Outputs the unescaped value into the template
<%= Outputs the value into the template (HTML escaped)
As you are looking to print the value instead use <%= tag so change  <%- name%> to <%= name%>The information can be found here-https://ejs.co/#docs

1 commentaires

J'ai essayé cela aussi, mais j'obtiens toujours le <% = name%> en sortie. Pas le "APERÇU DES PERFORMANCES".

0
votes

const express = require('express');
const bodyParser = require('body-parser');

const port = 5000;

const app = express();

app.set('view engine', 'html');
app.engine('html', require('ejs').renderFile);
app.use(express.static('views'));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.get('/', function (req, res) {
  var title = "PERFORMANCE OVERVIEW";
  res.render('Main.html', { name: title });
});

app.listen(port, console.log(`Server is running on port ${port}`))
Try this and it is rendering HTML page and also accessing the variable you pass in it.

4 commentaires

Salut @shareyar! J'ai également essayé les changements ci-dessus que vous avez mentionnés. Mais j'obtiens toujours le même résultat.

Vérifiez ma version de code mise à jour, espérons que cela fonctionnera pour vous.

Pouvez-vous me dire ce que vous avez ajouté de nouveau dans ce code? J'ai aussi ajouté les instructions require et le gestionnaire de route "listen" dans mon code. Mon code fonctionne si je convertis Main.html en Main.ejs. Mais y a-t-il un moyen sans le changer en fichier .ejs?

Ici, vous n'avez pas besoin de changer votre fichier au format EJS, vous pouvez accéder aux données de votre fichier html