每日前端夜话0xA7
每日前端夜话,陪你聊前端。
每天晚上18:00准时推送。
正文共:1251 字
预计阅读时间:7 分钟
作者:Alex Ronin
翻译:疯狂的技术宅
来源:frontnet
Node js 视图引擎就像 Laravel 中的 Blade。其最基本的定义是,视图引擎是帮助我们用比通常更短、更简单的方式编写 HTML 代码并重用的工具。此外,它还可以从服务器端导入数据并渲染最终的 HTML。Node.js 项目中一些常见的视图引擎如下:
Node.js 视图引擎
今天我将尝试上面的一些模板,看看哪一个更容易使用。开始吧!
嵌入式JavaScript模板
首先要为本文创建一个演示程序,我们需要用 ExpressJS 创建一个项目。用express-generator 可以快速创建这个项目。
sudo npm install express-generator -g
express --view=ejs Demo_EJS
运行以上命令用 Node.js ejs 视图引擎创建项目时,我们的项目具有以下目录结构:
Node.js 项目文件列表
通过上面的命令,我们用 EJS 视图引擎创建了一个 Express 项目。此视图引擎在 app.js 文件中设置如下:
//...
//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
//...
接下来说明如何使用,我将创建网站的基本布局,并从服务器渲染数据。首先,从服务器渲染数据。
编辑 routes/index.js 文件:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
let list = [
{name: 'PHP'},
{name: 'Ruby'},
{name: 'Java'},
{name: 'Python'},
{name: 'dotNet'},
{name: 'C#'},
{name: 'Swift'},
{name: 'Pascal'},
]
res.render('index', {title: 'Demo Ejs', list: list});
});
module.exports = router;
index.ejs 文件内容:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<header>
<h3>This is header</h3>
</header>
<main>
<h1><%= title %></h1>
List of programming languages
<ul>
<% list.forEach(function(item) {%>
<li><%= item.name %></li>
<%}); %>
</ul>
</main>
<footer>
<h3>This is footer</h3>
</footer>
</body>
</html>
我们已经实现了在服务器对视图进行渲染。另外我们还可以通过添加 header.ejs 文件来分割页眉、页脚,然后包含如下脚注:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<header>
<% include header %>
</header>
<main>
<h1><%= title %></h1>
List of programming languages
<ul>
<% list.forEach(function(item) {%>
<li><%= item.name %></li>
<%}); %>
</ul>
</main>
<footer>
<% include footer %>
</footer>
</body>
</html>
Pug
Pug - 以前名为 Jade,也是一个受欢迎的 Node.js 视图引擎项目。要使用它,请按如下方式设置视图引擎:
//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
通过上面的例子,我们使用以下内容创建了 pug 文件:
//file layout.pug
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
include header
block content
include footer
//file index.pug
extends layout
block content
h1= title
| List of programming languages
ul
each item in list
li= item.name
我们可以看到在相同的内容中,Pug 的代码是如此清晰、简洁和易于理解。Pug 的工作方式与 Python 语言大致相同,即使用缩进或空格。
Hbs(Handlebars)
要使用此模板,需要把引擎视图设置为 hbs。同时必须注册 blocks(在 handlebarjs 中称为 partial),如下所示:
var hbs = require('hbs');
hbs.registerPartials(__dirname + '/views/partials');
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');
针对上述问题,我们还将创建具有以下内容的 hbs 文件:
// file layout.hbs
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
{{> header}}
{{{body}}}
{{> footer}}
</body>
</html><code class="language-javascript">
// file /views/partials/header.hbs
<h3>This is header</h3>
//file /views/partials/footer.hbs
<h3> This is footer </h3>
//file index.hbs
<h1> {{title}} </h1>
List of programming languages
<ul>
{{#each list}}
<li> {{name}} </li>
{{/each }}
</ul>
我在 Nodejs 项目中测试了一些流行的视图引擎。在你的开发工作中可以选择 Pug,因为它非常简单易懂。
原文:https://frontnet.eu/node-js-view-engine-try-out-some-of-the-most-popular/
下面夹杂一些私货:也许你和高薪之间只差这一张图
2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。
愿你有个好前程,愿你月薪30K。我们是认真的 !
往期精选