2017-06-26 5 views
0

フォームデータを別のhtmlページに表示しようとしています。これは私のserver.jsnode.jsサーバーからhtmlページへのデータ表示

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

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

 

 
app.use(express.static(path.join(__dirname, '/'))); 
 
app.post('/myaction.html', function(req, res) { 
 
    res.send('You sent the name "' + req.body.name + '".'); 
 
}); 
 

 
app.listen(8080, function() { 
 
    console.log('Server running at http://127.0.0.1:8080/'); 
 
});
であり、これが私の 'index.htmlを' 今

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8" /> 
 
<title>Demo Form</title> 
 
</head> 
 
<body> 
 
<div id="contact"> 
 
    <h1>Enter the values</h1> 
 
    <form action="/myaction.html" method="post"> 
 
     <fieldset> 
 
      <label for="name">Name:</label> 
 
      <input type="text" id="name" name="name" placeholder="Enter your full name" /> 
 

 
      <label for="email">Email:</label> 
 
      <input type="email" id="email" placeholder="Enter your email address" /> 
 

 
      <label for="message">Message:</label> 
 
      <textarea id="message" placeholder="What's on your mind?"></textarea> 
 
      
 
      <input type="submit" value="Send message" /> 
 

 
     </fieldset> 
 
    </form> 
 
</div> 
 
</body> 
 
</html>

あり、それが正常に動作していると名前がに反映されますmyaction.htmlページしかし、私は 'myaction.html'ページを少し書式化してより見やすくしたいと思っています。 HTMLタグやテキストをページに追加したり、既存のページにフォームデータを表示する方法はありますか?

+0

https://expressjs.com/en/guide/using-template-engines.html – Quentin

答えて

0

テンプレートエンジンを使用します。良いものはEJSです。まず、npm install ejs、次にapp.set('view engine', 'ejs');をserver.js内に使用する必要があります。その後、viewsという名前のプロジェクト内に新しいフォルダを作成することができ、index.ejsやその他のビューファイルを作成することができます。あなたのserver.js内にはres.render('index.ejs', {data: aJavascriptVariable, data1: moreVars});を使用できます。最後に.ejsファイル内でこの変数を使用するには、<%= data%>または<%= data1%>を使用できます。もちろん、htmlは.ejsファイルの中に書くことができます。

関連する問題