`
yuyongkun4519
  • 浏览: 44866 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Express handlebars简介

 
阅读更多

今天我们一块学习下nodejs模板引擎express-handlebars

首先安装

npm install express-handlebars --save

 

下面看看用法

 

1,使用express-handlebars模板引擎创建的项目的目录结构保持如下结构

 

.
├── app.js
└── views
    ├── home.handlebars
    └── layouts
        └── main.handlebars

 

 2,下面是使用express-hanlebars模板引擎创建一个超级简单的express应用的实例

app.js

var express = require('express');
var exphbs  = require('express-handlebars');
 
var app = express();
 
app.engine('handlebars', exphbs({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
 
app.get('/', function (req, res) {
    res.render('home');
});
 
app.listen(3000);

 

 3,看看express-handlebars页面结构如何
views/layouts/main.handlebars
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>
    {{{body}}}
</body>
</html>
 
 main.handlebars作为应用程序的入口文件,其它.handlebars文件相当于{{body}}中的内容。
 4,下面为views/home.handlebars页面添加内容
<h1>Example App: Home</h1>
 

5,express-handlebars公共模板partials

开发中经常用到的页面导航、头部、页脚等公共部分可以放到partials目录中

添加公共导航目录文件views/partials/navbar.handlebars

 

在页面中引用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>
    {{>navbar}}
    {{{body}}}
</body>
</html>

 

5,执行npm start查看页面效果。

 
 
分享到:
评论

相关推荐

    前端开源库-nodemailer-express-handlebars

    本篇文章将深入探讨“前端开源库-nodemailer-express-handlebars”,它是一个结合了nodemailer、Express和Handlebars的插件,专门用于生成和发送电子邮件。 首先,我们来了解nodemailer。nodemailer是Node.js中的一...

    课程管理系统 express handlebars mongodb.zip

    《课程管理系统:基于Express、Handlebars与MongoDB的实现》 在现代的互联网教育领域,课程管理系统已经成为不可或缺的一部分。这个项目“课程管理系统 express handlebars mongodb.zip”是一个使用Node.js、...

    express-handlebars:Express把手

    **一、Express-Handlebars简介** Express-Handlebars是基于Handlebars的模板引擎,专门为Express设计。Handlebars是一种强大的、非侵入式的模板语言,它允许开发者通过简单的语法结构来创建可复用的模板,同时保持...

    express-handlebars:Express的Handlebars视图引擎,不会吸引

    该软件包以前被称为express3-handlebars 。 可以在找到@jneen以前的express-handlebars软件包。 目标与设计 我在创建Express的现有Handlebars视图引擎时感到沮丧。 从3.x版本开始,Express脱离了作为通用视图引擎的...

    express-handlebars:Express的Handlebars View引擎不会吸引人

    该软件包以前被称为express3-handlebars 。 可以在找到@jneen以前的express-handlebars软件包。 目标与设计 我在创建Express的现有Handlebars视图引擎时感到沮丧。 从3.x版开始,Express脱离了作为通用视图引擎的...

    node-express-handlebars:我的第一个使用Express框架和把手模板的节点服务器

    在本文中,我们将深入探讨如何使用Node.js的Express框架结合Handlebars模板引擎创建一个简单的Web服务器。Express是Node.js中最受欢迎的web应用框架,而Handlebars则是一个强大的模板引擎,用于将动态数据注入到HTML...

    使用 MySQL、Node、Express、Handlebars 和自制的 ORM 创建一个汉堡记录器

    使用 MySQL、Node、Express、Handlebars 和自制的 ORM 创建一个汉堡记录器(嗯!)。一定要遵循mvc设计模式;使用 Node 和 MySQL 查询和路由应用程序中的数据,并使用 Handlebars 生成 HTML.zip

    handlebars官方例子及源代码

    Handlebars常用于前端MV*框架(如Ember.js)或者服务器端渲染(如Express.js配合handlebars-express)。它可以轻松地结合JSON数据生成HTML,使得前后端分离更加顺畅。 六、最佳实践 1. 使用部分模板保持代码整洁,...

    formatjs-express-handlebars:使用 FormatJS 和 Handlebars 的示例 Express 应用程序

    **格式化JS与Express Handlebars整合** 在现代Web开发中,构建可扩展、国际化和易于维护的前端应用是至关重要的。`formatjs-express-handlebars`项目提供了一个实用的示例,展示了如何将`FormatJS`库与`Express.js`...

    express-handlebars-link-to:Express JS 应用程序中车把模板的链接

    快速车把链接 Express JS 应用程序中把手...var router = require ( 'express-handlebars-link-to' ) // Be sure to register the helper with handlebars // ... helpers: { 'link-to' : router . LinkToHelper }

    Node-Express-Handlebars-App

    标题 "Node-Express-Handlebars-App" 指示我们正在探讨一个基于 Node.js、Express 和 Handlebars 的Web应用程序。这个应用可能是用于构建动态、响应式的网站后端。接下来,我们将深入研究这三个核心技术及其相互作用...

    档案管理系统 node+express+handlebars.zip

    项目工程资源经过严格测试可直接运行成功且功能正常的情况才上传,可轻松copy复刻,拿到资料包后可轻松复现出一样的项目,本人系统开发经验充足(全栈开发),有任何使用问题欢迎随时与我联系,我会及时为您解惑,...

    burgerTime:使用MySQL,Node,Express,Handlebars和自制ORM创建汉堡记录器!

    Express Handlebars Node模块作为Express的视图引擎。 应用设置: 创建一个名为burger的GitHub存储库,并将其克隆到您的计算机上。 通过从命令行运行npm init来制作package.json文件。 安装Express npm软件包:...

    Shern-API:使用 Nodejs、Socket-io、Express-Handlebars 和 R 的项目脚手架

    **神龙API项目脚手架**是基于Node.js构建的一个高效、灵活的API开发框架,它结合了Socket.io、Express-Handlebars和R语言的强大功能,为开发者提供了一个快速搭建实时通信、动态模板渲染和数据处理的平台。...

    burger:带有MySQL,Node,Express,Handlebars和ORM的汉堡记录器

    按照MVC设计模式,使用MySQL,Node,Express,Handlebars和ORM开发的应用程序,并使用Node和MySQL查询和路由数据,使用Handlebars生成HTML。 ew! 那让我饿了。 Eat Da Burger已部署到Heroku: : NPM软件包: npm ...

    moreTodo_pp:这是一个使用Express,Handlebars和Vanilla JS的实践项目

    在本项目"moreTodo_pp"中,我们看到了一个结合了Express、Handlebars和Vanilla JS技术的实战应用。这三个技术都是Web开发中的重要组件,分别用于后端服务器、模板引擎和前端JavaScript。让我们深入探讨一下它们各自...

    burger-logger:使用MySQL,Node,Express,Handlebars和ORM的burger-logger

    遵循MVC设计模式使用MySQL,Node,Express,Handlebars和ORM的汉堡记录器。 Node和MySQL用于在burger-logger中查询和路由数据,Handlebars生成到HTML页面。 描述 任何想要记录自己想吃或吃过的汉堡的人都可以使用此...

    mapbox-example-express-and-handlebars

    本文将深入探讨如何结合Mapbox GL JS、Express和Handlebars这三者来创建一个功能丰富的Web应用。Mapbox GL JS是一个用于交互式地图的JavaScript库,Express是一个基于Node.js的Web应用框架,而Handlebars则是一种...

    Burger-Node--Express-Handlebars

    Burger-Node--Express-Handlebars Node Express把手 概述 在此作业中,您将使用MySQL,Node,Express,Handlebars和自制的ORM(百胜!)创建一个汉堡记录器。 确保遵循MVC设计模式; 使用Node和MySQL查询和路由应用...

Global site tag (gtag.js) - Google Analytics