node.js模板引擎ejs的使用方法

最新推荐文章于 2021-12-17 10:16:27 发布

qq_37303018

最新推荐文章于 2021-12-17 10:16:27 发布

阅读量540

点赞数

分类专栏： node 文章标签：模板引擎

node 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ejs模板引擎

安装模块 ejs express

cnpm install ejs-cli -g

标准的json字符串必须是单引号
编译ejs模板文件命令

什么是模板引擎为什么要用模板引擎

循环遍历数据显示
实现数据和视图分离

案例

用jquery或者原生将以下用户信息添加到表格当中

userList = [{"username":"Alice",classNo:"1001","age":20},
{"username":"Tom",classNo:"1002","age":22},
{"username":"Jhon",classNo:"1001","age":19},
{"username":"Mary",classNo:"1003","age":21},
{"username":"Jerry",classNo:"1002","age":18},
{"username":"Jenny",classNo:"1004","age":22}]

ejs语法

ejs是一个JavaScript模板库，用来从json数据中生成html页面

功能：缓存功能，能够缓存好的HTML模板；
<% code %>用来执行javascript代码

ejs模板文件后缀名.ejs
编译ejs文件命令

    $ ejs-cli -f ./injector02.ejs -o ../dist -O '{"name":"Alice","age":15}'

模板中输出变量

<%= username %> 特殊字符将进行转义
<%- myHtml %> 变量直接输出，不做转义处理

变量定义标签属性

<h1 style="<%= style %>"></h1>

循环

  <ul>
      <% for(var i in users){ %>
      <li><%= users[i].username %>--<%= users[i].age %></li>
  <% } %>
  </ul>

ejs后缀

<!-- 定义一组数组 -->
  <% users=["Jack","Rose","Alice","Ave"] %>
  <ul>
      <% for(var item in users){ %>
      <li>
      <%= users[item] %>
      </li>
      <% } %>
  </ul>

控制台

$ ejs-cli -f for.ejs -o ../dist

服务台运行之后自动出现html

<!-- 定义一组数组 -->

<ul>
    
    <li>
    Jack
    </li>
    
    <li>
    Rose
    </li>
    
    <li>
    Alice
    </li>
    
    <li>
    Ave
    </li>
    
</ul>

if语句

<% if(isLogin){ %>
    <p><a href="#">Jerry</a> | <a href="#">退出</a></p>
<% }else{ %>
    <p><a href="#">登录</a> | <a href="#">注册</a></p>
<% } %>

.ejs

<!-- 将所有条件判断代码放<% %>里面即可 -->
    <% if(isLogin){ %>
    <div class="user">
        <a href="">Jack</a>
        <a href="">退出</a>
    </div>
    <% }else{ %>
    <div class="login">
        <a href="">登录</a>
        <a href="">注册</a>
    </div>
    <% } %>
    ```

    7. 模板嵌套
    + <% include 嵌套模板路径 %>
    + <% include ./header %>

    ```
    head.ejs
    <meta charset="utf-8"/>
    <title><%= title %></title>
    <link rel="styleSheet" type="text/css" href="/css/index.css" />

    header.ejs
    <nav>
        <li>item-one</li>
        <li>item-two</li>
        <li>itm-three</li>
    </nav>
            
    footer.ejs
    <p>powered by Node.js Author:Jessco 215668636lai@gmail.com</p>
    index.ejs
    <!DOCTYPE html>
    <html lang="en">

        <head>
            <% include ./head %>
        </head>

        <body>
            <main>
                <% include ./header %>
                <div>main content</div>
                <% include ./footer %>
            </main>
        </body>
    </html>