ejs模板引擎

2018-09-28  本文已影响0人  jrg陈咪咪sunny

EJS是一个JavaScript库(https://ejs.bootcss.com/),EJS可以同时运行在客户端和服务器端,客户端安装直接引入文件即可,服务器端用npm包安装:

$ npm install ejs

EJS常用标签

<% %>流程控制标签
<%= %>输出标签(原文输出HTML标签)
<%- %>输出标签(HTML会被浏览器解析)
<%# %>注释标签
% 对标记进行转义
-%>去掉没用的空格
说明:ejs中的逻辑代码全部用JavaScript

js 逻辑判断方法:

<% if (isLogin){ %>
<%} else { %>
<% } %>

获取值,里面的值替换:

<%= user.avatar %>

首页代码- 用户是否登录,展示2个不同页面逻辑。

 <div id="header">
      <a class="add-note" title="添加笔记" href="#"><span class="fa fa-plus"></span> 添加</a>
      <ul class="user-area">
        <!-- % ejs模板引擎语法 -->
       <% if (isLogin){ %>
          <li><img src="<%= user.avatar %>" alt=""></li>
          <li><span title="<%= user.username %>"><%= user.username %></span></li>
          <li><span class="line"> | </span> </li>
          <li><a class="logout" href="/auth/logout">注销</a></li>
        <%} else { %>
          <li><a class="login" title="GitHub登录" href="/auth/github"> GitHub登录</a>
          </li>
        <% } %>
      </ul>

    </div>
    <div id="content">

    </div>

    <div class="stars"></div>
    <script src="/js/index.js"></script>

EJS的特点:

快速编译和渲染
简单的模板标签
自定义标记分隔符
支持文本包含
支持浏览器端和服务器端
模板静态缓存
支持express视图系统

上一篇下一篇

猜你喜欢

热点阅读