如何使用 node.js express 呈现多个 html 页面？答案

【问题标题】：How to render multiple html pages with node.js express?如何使用 node.js express 呈现多个 html 页面？
【发布时间】：2017-09-01 14:27:40
【问题描述】：

想要完成这个：

<html>
<!-- head -->
<head>
    <title>SpaceGame2</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="css/spaceGame.css">
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
</head>
<body>

    <p class="testing"></p> html page

    <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>

</html>

通过将其分成 3 个单独的文件，head.html、footer.html 和 main.html。 main.html 会有所不同，但其他两个将是相同的。

代码：

var express = require('express');
var partial = require('express-partial');
var app = express();

app.listen(3000, function() {
    console.log('Listening on port 3000');
});

var path = require("path");
app.use(express.static(path.resolve('./')));
app.use(express.static(path.resolve('./Static')))
app.use(express.static(path.resolve('./Views')))
var partial = require('express-partial');
var url = require('url');

app.get('/*', function(req, res) {
    var path = require("path");

    var pathname = url.parse(req.url).pathname;
    var originPoint = GetOriginPoint(pathname);
    if (pathname == "" || pathname == "/") {
        pathname = "/OverView";
    }

    // res.renderPartials({
    //     Head: { data: path.resolve('./Views/Layout/head') },
    //     Main: { data: path.resolve('./Views' + originPoint + pathname + '.html') },
    //     Head: { data: path.resolve('./Views/Layout/footer') },
    // });


     res.sendFile(path.resolve('./Views' + originPoint + pathname + '.html'));
});

尝试在html标签中导入文件，尝试使用renderpartials但它没有工作，我知道我能做到这一点的唯一方法是加载主页并拥有一个从服务器获取两个html页面的自定义脚本但这并不理想，我认为有类似的东西：

    app.get('/', function(req, res) {
       var content = [];

      content.push("head.html")
      content.push("main.html")
      content.push("footer.html")

     res.sendFile(content);

    });

【问题讨论】：

标签： javascript html node.js visual-studio-code

【解决方案1】：

经过一番思考，我决定使用 express-handlerbars 来解决这个问题：

var hbs = require('express-handlebars');

app.engine('hbs', hbs({ extname: 'hbs', defaultLayout: 'layout', layoutsDir: orgininPath.resolve('./Views/Layout/') }));
app.set('view engine', 'hbs');

hbs 文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
    <link rel="stylesheet" type="text/css" href="/Static/css/spaceGame.css">
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet">
    <title>{{title}}</title>
</head>
<body>
    {{{body}}}

        <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="/Static/script/someTest.js"></script>
</body>
</html>

【讨论】：

【解决方案2】：

使用EJS templating language w/ Express，您将能够实现标记 HTML 的任何目标。只需通过 npm 安装（例如：npm link ejs 在您的项目位置）。

然后将 express engine 设置为 ejs `app.set('view engine', 'ejs');

完成后，只需调用 render 方法

app.get('/', (req, res) => {
  // render `index.ejs` with some data
  res.render('index', { variable: 'value' })
});

【讨论】：

判断快速阅读我需要在我的 html 中有某种值指示符，比如这不是我想要的。我想将3个html文档合为一个发给客户端，可以吗？
如何让“变量”呈现 HTML/CSS/JavaScript？它本质上将作为文本通过，而不是在 DOM 中编译。