express 之 ejs模板引擎

最新推荐文章于 2024-05-05 21:10:49 发布

axincto

最新推荐文章于 2024-05-05 21:10:49 发布

阅读量248

点赞数

分类专栏：前端 # nodejs 文章标签： ejs ejs模板引擎 nodejs

本文链接：https://blog.csdn.net/weixin_39541657/article/details/107600720

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

nodejs

22 篇文章 0 订阅

订阅专栏

ejs模板引擎

官方文档

一、简介

相比于jade模板引擎，ejs对原HTML语言就未作出结构上的改变，只不过在其交互数据方面做出了些许修改，相比于jade更加简单易用。因此其学习成本是很低的。

二、安装

如果使用express脚手架创建项目,项目默认中已经包含了ejs模板引擎
如果不是采用express创建的项目,或者项目中没有,可以使用以下命令安装

cnpm install ejs --save

二、基本使用

我们在express项目中简单使用ejs模板引擎:

movies.ejs文件

注意后缀名为.ejs,是ejs模板引擎规定的文件格式,其中使用ejs模板语法渲染为Html文件

<!DOCTYPE html>
<html>
  <head>
    <title>电影列表</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>电影列表</h1>
    <ul>
      <!--<% %> 是编写javascript代码的ejs模板引擎语法 -->
      <% movies.forEach(function(item){ %>
        <li>
          <h4>电影名称:</h4>
          <p><%= item.name %></p>
          <h4>简介:</h4>
          <p><%= item.brief %></p>
          <h4>导演:</h4>
          <p><%= item.author %></p>
        </li>
        
      <% }); %>
     
    </ul>
  </body>
</html>

app.js文件：

var express = require('express');
var path = require('path');
var app = express();

// 设置模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

//定义一个路由,此处未使用express中的Router
app.get('/movies', function(req, res, next) {
  //定义需要渲染到HTML页面中的电影列表
    let movies =  [{
      name:'斗战胜佛之大圣之泪',
      brief:'成为斗战胜佛的孙悟空竟被怨灵蛊惑，唐三藏遭遇灭顶之灾！危急关头，孙悟空揪出怨灵源头，却发现她竟是与自己有三百年缘分的天人界女神——“幸运星”！为了找出“幸运星”黑化的原因，拯救唐三藏，孙悟空踏上了一场回到过去之旅，却最终流下了一滴眼泪。大圣之泪，为何而流，为谁而流？',
      author:'钟智行 Frankie Chung'
    },{
      name:'猎谎者',
      brief:'三个月前，某市发生了一起恶性绑架杀人案。三个月后，凶手与被害人都死于车祸。初出茅庐的女警韩烨找到了案件的幸存者林超凡，向他求证案件发生的经过。但随着调查的深入，韩烨发现林超凡的很多证词都存在漏洞，再三逼问之下，林超凡无奈坦白了另一个版本的故事，但案件真相远没有这么简单，几乎每个人都在说谎，而故事也开始不断反转。',
      author:'廉欣 Xin Lian'
    },{
      name:'天启大爆炸',
      brief:'《天启大爆炸》以中国古代曾真实发生的神秘爆炸为原型，加以天马行空的巧妙构思，为观众解封至今困惑世人的隐秘真相。神秘机构“夜行司”追踪离奇谜团勇闯“无相城”，一场关乎百姓苍生命运博弈就此展开。',
      author:'黄羿 Yi Huang / 曾黎'
    }];

    //渲染数据并返回html.movies是我们定义的movies.ejs文件
  res.render('movies', { movies:movies });
});


module.exports = app;

访问http://localhost:3000/movies

res.render()函数也是支持回调的,这样可以在模板引擎中渲染完成html后可以返回渲染的内容

res.render('movies', { movies:movies },function(err,html){
    console.log(html)
  });
});

另外值得说明的是ejs模块也有ejs.render()和ejs.renderFile()方法，他在这里与res.render()作用类似

ejs.render(str, data, options);
ejs.renderFile(filename, data, options, function(err, str){
   // str => 输出绘制后的 HTML
});

四、ejs标签含义

<% ‘脚本’ 标签，用于流程控制，无输出。
<%_ 删除其前面的空格符
<%= 输出数据到模板（输出是转义 HTML 标签）
<%- 输出非转义的数据到模板
<%# 注释标签，不执行、不输出内容
<%% 输出字符串 ‘<%’
%> 一般结束标签
-%> 删除紧随其后的换行符
_%> 将结束标签后面的空格符删除

更多使用方法浏览官方文档

axincto

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
express 之 ejs模板引擎

ejs模板引擎官方文档一、简介相比于jade模板引擎，ejs对原HTML语言就未作出结构上的改变，只不过在其交互数据方面做出了些许修改，相比于jade更加简单易用。因此其学习成本是很低的。二、安装如果使用express脚手架创建项目,项目默认中已经包含了ejs模板引擎如果不是采用express创建的项目,或者项目中没有,可以使用以下命令安装cnpm install ejs --save二、基本使用我们在express项目中简单使用ejs模板引擎:movies.ejs文件注意后缀名为.
复制链接

扫一扫

专栏目录