使用 Express.js 和 Handlebars.js 构建模板引擎

在 Web 开发中，模板引擎是一种非常重要的技术，它可以帮助你更高效地将数据和页面合并，从而生成最终的 HTML 页面。大多数的 Web 框架都支持模板引擎，而在 Node.js 应用中，Express.js 和 Handlebars.js 是两个非常受欢迎的选择。

在本文中，我们将介绍如何使用 Express.js 和 Handlebars.js 构建模板引擎，包括如何安装、配置和使用。此外，我们还将通过示例代码演示如何利用这两个技术创建一个简单但功能强大的 Web 应用。

安装和配置

首先，我们需要安装 Express.js 和 Handlebars.js。在 Node.js 应用中，可以通过 npm 安装这两个模块。打开终端并键入以下命令：

另外，为了支持静态文件和表单等功能，我们还需安装 body-parser 和 serve-static 模块：

安装完成后，我们需要在应用中引入这些模块：

var express = require('express');
var handlebars = require('handlebars');
var bodyParser = require('body-parser');
var serveStatic = require('serve-static');

接着，我们需要配置 Express.js 和 Handlebars.js 的模板引擎设置。在 Express.js 应用中，可以通过以下代码配置模板引擎：

var app = express();

// 设置 Handlebars.js 模板引擎
app.engine('.hbs', handlebars({
    extname: '.hbs',
    defaultLayout: 'default',
    layoutsDir: __dirname + '/views/layouts',
    partialsDir: __dirname + '/views/partials'
}));
app.set('view engine', '.hbs');
app.set('views', __dirname + '/views');

在上面的代码中，我们设置了 Handlebars.js 的模板引擎，并指定了默认的布局、布局和局部文件的目录。同时，我们还设置了 Express.js 的视图目录。

最后，我们需要配置静态文件和表单的中间件。在 Express.js 应用中，可以通过以下代码配置静态文件和表单的中间件：

// 配置静态文件目录
app.use(serveStatic(__dirname + '/public'));

// 配置 URL 解析中间件
app.use(bodyParser.urlencoded({ extended: true }));

在上面的代码中，我们使用了 serve-static 和 body-parser 模块来配置静态文件和表单的中间件。其中，serve-static 中间件用于配置静态文件目录，而 body-parser 中间件用于解析 POST 请求并转换为对象格式。

至此，我们已经完成了 Express.js 和 Handlebars.js 的安装和配置，接下来我们将开始编写实际的 Web 应用代码。

编写 Web 应用代码

在本文中，我们将创建一个简单的 Web 应用，让用户可以通过表单输入自己的姓名和年龄，并将这些信息保存到服务器中。同时，用户还可以查看所有已保存的信息，并对其进行编辑或删除操作。

编写路由代码

首先，我们需要编写路由代码来处理用户的请求。在我们的应用中，将有以下三个路由：

  • GET /：显示所有保存的信息。
  • GET /add：显示添加信息的表单。
  • POST /add：将新的信息保存到服务器中。

在 Express.js 应用中，可以通过以下代码编写路由：

// 显示所有保存的信息
app.get('/', function(req, res) {
    // TODO: 查询所有数据并渲染视图
});

// 显示添加信息的表单
app.get('/add', function(req, res) {
    res.render('add');
});

// 将新的信息保存到服务器中
app.post('/add', function(req, res) {
    // TODO: 保存数据并重定向到首页
});

在上面的代码中，我们定义了三个路由，并分别处理了不同的请求。

编写 Handlebars.js 视图

接下来，我们需要编写 Handlebars.js 视图来显示不同的页面。在本应用中，将有以下两个视图：

  • default.hbs：默认的布局文件。
  • add.hbs：显示添加信息的表单。

在 Handlebars.js 视图中，可以使用 {{{ body }}} 占位符来显示每个页面的内容，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>{{{ title }}}</title>
</head>
<body>
    {{{ body }}}
</body>
</html>
<form method="post">
    <input type="text" name="name" placeholder="姓名">
    <input type="text" name="age" placeholder="年龄">
    <button type="submit">提交</button>
</form>

在上面的代码中，我们分别定义了默认的布局文件和添加信息的表单，并使用 Handlebars.js 语法渲染了相应的 HTML 代码。

编写数据层代码

最后，我们需要编写一个数据层文件，用于操作和管理保存的信息。在本应用中，我们将使用一个简单的 JavaScript 数组来保存信息。

var data = [
    { name: '张三', age: 18 },
    { name: '李四', age: 20 },
    { name: '王五', age: 22 }
];

module.exports = {
    getAll: function() {
        return data;
    },

    add: function(obj) {
        data.push(obj);
    }
};

在上面的代码中，我们定义了一个 JavaScript 数组，并导出了两个方法，分别用于获取所有保存的信息和添加新的信息。这些方法将在路由代码中被引用。

整合代码并运行应用

最后，我们需要将数据层、路由和视图文件整合在一起，并运行应用。完整的应用代码如下：

var express = require('express');
var handlebars = require('handlebars');
var bodyParser = require('body-parser');
var serveStatic = require('serve-static');
var data = require('./data');

var app = express();

// 设置 Handlebars.js 模板引擎
app.engine('.hbs', handlebars({
    extname: '.hbs',
    defaultLayout: 'default',
    layoutsDir: __dirname + '/views/layouts',
    partialsDir: __dirname + '/views/partials'
}));
app.set('view engine', '.hbs');
app.set('views', __dirname + '/views');

// 配置静态文件目录
app.use(serveStatic(__dirname + '/public'));

// 配置 URL 解析中间件
app.use(bodyParser.urlencoded({ extended: true }));

// 显示所有保存的信息
app.get('/', function(req, res) {
    var allData = data.getAll();
    res.render('index', { title: '所有信息', data: allData });
});

// 显示添加信息的表单
app.get('/add', function(req, res) {
    res.render('add', { title: '添加信息' });
});

// 将新的信息保存到服务器中
app.post('/add', function(req, res) {
    data.add(req.body);
    res.redirect('/');
});

// 启动应用
app.listen(3000);
console.log('Server started: http://localhost:3000/');

在上述代码中，我们将数据层、路由和视图文件整合在了一起，并在 3000 端口上启动了应用。可以通过浏览器访问 http://localhost:3000/ 来查看应用效果。

总结

本文介绍了如何使用 Express.js 和 Handlebars.js 构建模板引擎，并通过一个简单的 Web 应用示例演示了如何在实际中使用这两个技术。通过本文的学习，读者可以更加熟练地掌握 Express.js 和 Handlebars.js 的用法，并且可以将它们应用到其他 Web 应用中。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b4c934add4f0e0ffda430d

阅读全文

精选内容

相关推荐

    暂无