Geformtes Formular von NodeJS in HTML implementieren

Ich wechselte vor kurzem von PHP zu NodeJS, da ich mehr Kenntnisse in JS habe. Meine Frage ist, wie kann ich gepostete Formulardaten in eine HTML-Datei anzeigen?Geformtes Formular von NodeJS in HTML implementieren

server.js

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

app.use(bodyParser.urlencoded({extended: true})); 
app.use(bodyParser.json()); 

app.get('/', (req, res) => res.sendFile(path.join(__dirname, 'html/index.html'))); 
app.post('/student', (req, res) => res.send(req.body.user.name)); 

app.listen(3000, (req, res) => console.log('Listening on port 3000.'));

html/index.html

<body> 
    <form method='post' action='post'> 
     <input type='text' name = 'user[name]'> 
     <input type='submit' value='submit'> 
    </form> 
</body>

jedoch in der Post Methode, ich möchte eine HTML-Datei senden, statt req.body.user.name die Ich könnte natürlich so machen, wie ich es auf der Homepage getan habe (/), ich möchte einige Variablen in das neue HTM einbinden können L Datei, vielleicht etwas zu suchen entlang der Linien von:

<body> 
    <h1><? req.body.user.name + 's page. ?></h1> 
    <!-- rest of code --> 
</body>

Quelle

2017-09-11 jake-ruston

Sie für Templating suchen? https://expressjs.com/en/guide/using-template-engines.html – skirtle

Ich verwende ejs Vorlage für diesen Zweck und es ist sehr einfach zu bedienen.

Zunächst einmal, laden Sie EJS mit npm install ejs -s und erstellen Sie einen views Ordner in Ihrem Hauptverzeichnis. Erstellen Sie in diesem Ordner eine normale HTML-Datei, aber dieses Mal mit einer Erweiterung von .ejs.

App Directory 

-views/myFile.ejs 
     /post.ejs 
-html/index.html 
-server.js

Jetzt gehen wir zu Ihrer server.js-Datei. Sie müssen app.set('view engine', 'ejs') verwenden, um ejs auszuführen. Wenn Sie res.render() tun, haben Sie den Pfad nicht angegeben, da das Programm bereits nach dem Ordner views/ im Hauptverzeichnis sucht.

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

app.use(bodyParser.urlencoded({extended: true})); 
app.use(bodyParser.json()); 

app.set('view engine', 'ejs'); 

app.get('/', (req, res) => res.render('myFile.ejs', {username: 'myUser'})); 
app.post('/student', function(req, res){ 
    var username = req.body.user.name; 
    res.render('post.ejs', {user: username}); 
}); 

app.listen(3000, (req, res) => console.log('Listening on port 3000.'));

Dies ist unsere Probe myFile.ejs

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <p><%=username%></p> 
    </body> 
</html>

Und das ist unsere Probe post.ejs

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    </head> 
    <body> 
    <p><%=user%></p> 
    </body> 
</html>

Quelle

2017-09-11 19:25:07 turmuka

Sie sollten einige Template-Engine verwenden, gibt es Tutorial auf Express-Seite https://expressjs.com/en/guide/using-template-engines.html. Es besteht immer die Möglichkeit, dass Sie ein eigenes Modul für den Umgang damit schreiben können.

Sie können auch installieren express Generator

npm install express-generator -g

dann rufen:

express

Dank dieses Sie Setup-Express-Projekt mit Jade als Template-Engine (es ist Standard), sollte es Ihnen ermöglichen, um weiter zu kommen.

Quelle

2017-09-11 18:57:01 Kieper

Geformtes Formular von NodeJS in HTML implementieren

Antwort

Verwandte Themen