场景

什么是模板引擎

模板引擎( Template Engine)是一个从页面模板根据一定的规则生成HTML的工具。它的发韧可以追溯到1996年PHP 2.0的诞生。PHP原本是Personal Home Page Tools(个人主页工具)的简称，用于取代Perl和CGI的组合，其功能是让代码嵌人在HTML中执行，以产生动态的页面，因此PHP堪称是最早的模板引擎的雏形。随后的ASP, JSP都沿用了这个模式，即建立一个HTML页面模板，插人可执行的代码，运行时动态生成HTML。

基于JavaScript的模板引擎有许多种实现，我们推荐使用ejs(Embedded JavaScript)，因为它十分简单，而且与Express集成良好。由于它是标准JavaScript实现的，因此它不仅可以运行在服务器端，还可以运行在浏览器中。我们这一章的示例是在服务器端运行ejs,这样减少了对浏览器的依赖，而且更符合传统架构的习惯。

ejs官网：

https://ejs.bootcss.com/#docs

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

新建项目

在前端项目IDE中，这里是Webstorm，新建空项目，然后在此目录下打开终端。

express -e microBlog

后面跟的是项目名，会使用ejs引擎去生成项目。

然后会生成项目目录，进入到项目中

cd microBlog

安装项目依赖

npm install

或者

cnpm install

启动项目的命令不再是node app.js，而是

npm start

然后打开浏览器输入：

localhost:3000

项目就启动成功了。

使用模板引擎

首先在app.js中设置要使用的模板引擎和模板引擎的位置

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

在使用ejs作为模板引擎后在app.js中已经添加了这些代码。

在app.js中已经引入了index模块

var indexRouter = require('./routes/index');app.use('/', indexRouter);

来到routes下index.js

var express = require('express');
var router = express.Router();/* GET home page. */
router.get('/', function(req, res, next) {res.render('index', { title: '公众号:霸道的程序猿' });
});module.exports = router;

通过

res.render('index', { title: '公众号:霸道的程序猿' });

就能调用名字为index.ejs的模板引擎，并且向其传递参数，参数名为title,参数值为'公众号:霸道的程序猿'

来到views下index.ejs中

<!DOCTYPE html>
<html><head><title><%= title %></title><link rel='stylesheet' href='/stylesheets/style.css' /></head><body><h1><%= title %></h1><p>Welcome to <%= title %></p></body>
</html>

就可以通过

<%= title %>

调用传递的参数。

重启项目并重新访问

片段视图

Express的视图系统还支持片段视图，就是一个页面的片段，通常是重复的内容，用于迭代显示。

在app.js中添加一个路由

app.get('/list',function (req,res) {res.render('list',{title:'List',items:[['公','众','号'],['霸','道','的','程','序','猿'],['编','程','教','程','与','资','源'],['免','费','推','送']]});
});

此路由向名字为list.ejs的模板引擎传递一个对象，对象有两个属性，其中第二个属性是一个二维数组。

然后在list.ejs中获取对象的第二个属性的值。

在views下新建list.ejs

<ul><% items.forEach(function(item){ %><%- include('./listitem', {item: item}); %><% }); %>
</ul>

这里使用的是ejs的循环的语法，其中items就是上面传递过来的参数。

<%-代表输出非转义的数据到模板，其它标签含义还有

这里为了演示还使用了include用来包含另一个ejs。

通过 include 指令将相对于模板路径中的模板片段包含进来。(需要提供 'filename' 参数。) 例如，如果存在 "./views/users.ejs" 和 "./views/user/show.ejs" 两个模板文件，你可以通过 <%- include('user/show'); %> 代码包含后者。

你可能需要能够输出原始内容的标签 (<%-) 用于 include 指令，避免对输出的 HTML 代码做转义处理。

这里引入了在同级目录下的listitem.ejs模板引擎文件，并且向其传递参数item

在views下新建文件listitem.ejs

<%for(var i=0;i<item.length;i++) { %>
<li><%=item[i] %></li> <%}%>

然后启动项目，访问

localhost:3000/list

示例代码下载

https://download.csdn.net/download/BADAO_LIUMANG_QIZHI/12980008

Express中使用ejs新建项目以及ejs中实现传参、局部视图include、循环列表数据的使用相关推荐

IDEA 新建项目或模块中没有Java EE和Web Application
IDEA 新建项目或模块中没有Java EE和Web Application选项解决含有Java EE和Web App 解决办法直到看了官方文档,
【报错笔记】在maven项目中jsp页面使用window.location.href给controller传参时参数过长所以路径无法跳转至controller
在maven项目中jsp页面使用window.location.href给controller传参时参数过长所以路径无法跳转至controller 解决方案:使用a链接来用
在VS中，如何新建项目，如何添加类库
学习了C#基础后就自己做了一个小小的qq空间,感觉挺好的.之后,由于团队需要被分配到测试方面去了,虽然测试时会看C#代码,但终究不是自己写的,没有那种深究的热情,尽管师兄说,看代码是最快提升的方法,因 ...
在MyEclipse2016 中使用maven 部署项目到 tomcat中的步骤
首先MyEclipse 中配置maven ,具体步骤网上很多教程: 然后倒入maven项目到MyEclipse中, 以下就是部署重点一般需要以下五个步骤, 第一步在项目上右键第二步在项目上右键 ...
《从缺陷中学习C/C++》——6.3　数组传参时的sizeof
本节书摘来自异步社区出版社<从缺陷中学习C/C++>一书中的第6章,第6.3节,作者: 刘新浙 , 刘玲 , 王超 , 李敬娜 , ,更多章节内容可以访问云栖社区"异步社区&qu ...
vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
nodejs+express +jade模板引擎新建项目
先安装 nodejs iDEAAM 2015/7/16 22:47:25 然后安装 npm install express iDEAAM 2015/7/16 22:47:35 然后安装 npm in ...
IDEA中新建项目Static Web 中没有vue.js
unity中打开别人的项目，脚本中继承的父类报错（红色波浪线）VS 编译过程 error CS0246: 未能找到类型或命名空间名“XXX”
最开始按照报错 error CS0246: 未能找到类型或命名空间名"XXX"进行查找,查到的都是 .Net 框架版本不一样,更改版本后依旧报错解决办法:打开Unity-> ...

Express中使用ejs新建项目以及ejs中实现传参、局部视图include、循环列表数据的使用

场景