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

最新推荐文章于 2022-04-27 11:56:50 发布

霸道流氓气质

最新推荐文章于 2022-04-27 11:56:50 发布

阅读量825

点赞数

分类专栏： Node 文章标签： Express

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/109180267

版权

Node 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

场景

什么是模板引擎

模板引擎( 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

霸道流氓气质

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Express中使用ejs新建项目以及ejs中实现传参、局部视图include、循环列表数据的使用

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

扫一扫