javascript - 使用 Express Handbars 为简单的 Node Web 应用程序传递数据

标签 javascript node.js typescript express webpack

我正在尝试使用快速 Handlebars 将数据传递到我的index.html 页面,但它似乎不起作用。这是我的快速代码:

server.js 代码:

const express = require('express');
const app = express();
const expressHandlebars = require('express-handlebars');
const path = require('path');

app.engine('html', expressHandlebars({ defaultLayout: 'main' }));
app.set('view engine', 'html');

app.use(express.static('dist'));

app.get('/*', (request: any, response: any) => {
    response.render(path.resolve('dist/', 'index.html'), {
        testBars: 'TEST',
        layout: false
    });
});

app.listen(8080, () => {
    console.log('started');
});

index.html:

<!doctype html>
<html lang="en-US">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Test page</title>
</head>

<body>
 {{testBars}}
</body>

</html>

webpack.config.js:

'use strict';

const CopyPlugin = require('copy-webpack-plugin');
const NodeExternals = require('webpack-node-externals');

module.exports = {
    mode: 'production',
    entry: './src/app/server/server.ts',
    target: 'node',
    plugins: [
        new CopyPlugin([
            { from: './src/**/*.html', flatten: true }
        ])
    ],
    externals: [NodeExternals()],
    output: {
        filename: 'server.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        rules: [{ test: /\.ts$/, loader: 'ts-loader' }]
    }
};

当我运行服务器并提供索引页面时,它在页面上显示 {{testBars}},而不是字符串“TEST”。我使用 webpack 来构建和捆绑/复制所有内容(上面的配置)。 webpack 运行后,我的目录结构最终变为“dist/server.js”和“dist/index.html”。

我是不是做错了什么?为什么在index.html 中不显示“TEST”?任何帮助将不胜感激!

最佳答案

index.html在你的 dist 中目录,您的静态路由将与您的 app.get('/*', 之前匹配。已到达路线。

不要将静态文件和模板放在同一目录中。

关于javascript - 使用 Express Handbars 为简单的 Node Web 应用程序传递数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58918589/

相关文章:

javascript - 将对象数组保存到 codeigniter 中

typescript - Deno.run "echo hello"是如何导致此文件未找到错误的?

angularjs - Webpack - Typescript 和 Babel "Module build failed: SyntaxError"

javascript - 使用 toLocaleLowerCase()

javascript - Jquery 显示和隐藏控件

javascript - 如何从数据库表中获取行值以在 JavaScript/jQuery 中使用它?

javascript - 数字按正确顺序显示按钮

node.js - bluemix 运行时 : auto vertical scalability?

javascript - Node.js 更新后无法运行

javascript - 如何使用 AngularJS $q 延迟 promise 从异步函数返回数据?