Javascript 如何使用 Express 提供部分动态 HTML 页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35633855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I serve partially dynamic HTML pages with Express?
提问by Trent
Alright, here's my issue: I have an HTML page I am quite happy with, but I wish to make it dynamic. I am using Node with Express, and I was wondering if there was any way to modify and then render plain HTML. I will not be using Jade or any other template engines.
好的，这是我的问题：我有一个我很满意的 HTML 页面，但我希望让它变得动态。我正在使用 Node 和 Express，我想知道是否有任何方法可以修改然后呈现纯 HTML。我不会使用 Jade 或任何其他模板引擎。
My server.js:
我的 server.js：
var http = require('http');
var express = require('express');
var app = express()
var port = 3000;
var api_router = express.Router();
....
api_router.route('/webm/test/')
.get(function(req, res){
res.sendFile(__dirname + "/test.html")
})
app.use('/api/', api_router);
app.listen(port);
console.log("NodeJS Backend API running.");
Currently this does not work (no templating engine for HTML found). It also does not fulfill my needs: I wish to set the "src='blah.webm'" in a tag depending on the GET req.
目前这不起作用（没有找到 HTML 的模板引擎）。它也不能满足我的需求：我希望根据 GET 请求在标签中设置“src='blah.webm'”。
This is my page I wish to modify:
这是我要修改的页面：
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../stylesheet.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div id="header">
<a href="../index.html"><p>../</p></a>
<p>TrentV.net : Trent VanSlyke</p>
</div>
<div class="container" style="display: flex">
<video id="player" src="CUSTOMIZE ME" controls></video>
<div id="related">
</div>
<script src="webm.js" type="text/javascript"></script>
</div>
</body>
</html>
回答by Himanshu sharma
You can use angular in node so that you can use like this ...
make
<!DOCTYPE html>
<html lang="en" ng-app="xenon-app">
<head>
<meta charset="utf-8">
<script src="/assets/js/angular.js"></script>
<script>
var app = angular.module( "xenon-app", [] );
app.controller( "resetPasswordController",function($scope,$http,) {
//some http calls of node and render that data in the page by $scope
$http({
method: 'GET',
url: 'http://localhost:3000/someUrl'
}).then(function successCallback(response) {
// this callback will be called asynchronously
$scope.name=response.name;
// when the response is available
}, function errorCallback(response) {
// called asynchronously if an error occurs
// or server returns response with an error status.
});
});
</script>
</head>
<body ng-controller="resetPasswordController">
<p>
{{name}}
</p>
</body>
</html>
and render this page by
res.sendFile(__dirname + "/test.html")
回答by Himanshu sharma
then use ejs make a folder templates and add registermessage folder in it and place html.ejs for html file, style.ejs for css and text.ejs for text response.
然后使用 ejs 创建一个文件夹模板并在其中添加 registermessage 文件夹并将 html.ejs 放置为 html 文件，style.ejs 为 css 和 text.ejs 为文本响应。
var templateDir = path.join(__dirname, "../../../", 'templates', 'registermessage')
var resetpassword = new EmailTemplate(templateDir)
//var user = {name: 'Joe', pasta: 'spaghetti'}
// the dynamic variable to replace
var locals = {
message: message,
email: email
};
resetpassword.render(locals, function (err, temp) {
if (err) {
console.log("error" + err + "results" + temp);
// console.log( temp.html);
res.send(temp.html);
//next(error, null);
} else {
//console.log(temp.html)
res.send(temp.html);
// next(null, "email sent");
}
})
}
<%message %> will replace dynamically html.ejs
<%message %> 将动态替换 html.ejs
<html lang="en" ng-app="xenon-app">
<head>
</head>
<body class="page-background" >
<div class="login-container" >
<!-- Your email id email -->
<p style="font-family: Verdana, Geneva, sans-serif;font-size:13px;"><%=message %></p>
</div>
</body>
</html>
