Node.jsからHTMLファイルに変数を渡そうとしています。
app.get('/main', function(req, res) {
var name = 'hello';
res.render(__dirname + "/views/layouts/main.html", {name:name});
});
このような変数を渡すことができたことがわかりました
<script>var name = "<%= name %>";</script>
console.log(name);
利用できるのは、パグ(以前のジェイド)のようなテンプレートエンジンです。有効にするには、次を実行する必要があります。
npm install --save pug
_-プロジェクトおよびpackage.jsonファイルに追加しますapp.set('view engine', 'pug');
-Expressでビューエンジンとして登録する./views
_フォルダーを作成し、次のような単純な_.pug
_ファイルを追加します。_html head title= title body h1= message
_スペースが非常に重要であることに注意してください!
app.get('/', function (req, res) { res.render('index', { title: 'Hey', message: 'Hello there!'}); });
これにより、node.jsで渡された変数が指定した値に変更されたindex.htmlページがレンダリングされます。これは、expressjsテンプレートエンジンページから直接取得されています。 http://expressjs.com/en/guide/using-template-engines.html
パグの詳細については、以下を確認することもできます。 https://github.com/pugjs/pug
可能な書き方を見つけました。
サーバ側 -
app.get('/main', function(req, res) {
var name = 'hello';
res.render(__dirname + "/views/layouts/main.html", {name:name});
});
クライアント側(main.html)-
<h1><%= name %></h1>
NodeとHTMLのみでは、目的を達成することはできません。PHPを使用するのとは異なり、他のものをインストールせずに<title> <?php echo $custom_title; ?>
。
Nodeを使用してやりたいことを行うには、「テンプレート」エンジンと呼ばれるもの(Jade、check this outなど)を使用するか、JavascriptでHTTPリクエストを使用してサーバーからデータを取得し、これを使用して、HTMLの一部を置き換えます。
どちらもいくつかの追加作業が必要です。それはplug'n'playではなくPHPあなたが望むようなことをするときです。
Expressを使用する場合、View Engineを使用する必要はまったくありません。次のようなものを使用します。
<h1>{{ name }} </h1>
これは、View Engineの代わりにHTMLを使用するようにアプリケーションを以前に設定した場合に機能します
Res.render()メソッドを使用してnode.jsからhtmlに変数を渡すには。
例:
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});
});
res.json、ajax、promiseを使用し、localStorageの素敵なひねりを加えて任意の場所で使用し、その珍しいアーケード愛のトークンを追加します。 PS、Cookieを使用できますが、Cookieは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、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)});
});
クライアントのHTML
ページのノードオブジェクトから必要なオブジェクトを返すhttp API node
リクエストによってこれを達成しました。
例:API: localhost:3000/username
ノードAppオブジェクトによるキャッシュからログインしているユーザーを返します。
ノードルートファイル、
app.get('/username', function(req, res) {
res.json({ udata: req.session.user });
});
上部にあるもの以外に、JavaScriptを使用してサーバーから詳細を取得できます。 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");
})
上記のテーマのスタックオーバーフローで見つかった最良の答えは、私の答えではありません。ほぼ同じ質問のどこかで見つけました... source 回答のソース