zoukankan      html  css  js  c++  java
  • nodejs express template (模版)的使用 (ejs + express)

    原贴地址

                                                                                                     
    var express = require("express")
    var app = express();
    
    //注册ejs模板为html页。简单的讲,就是原来以.ejs为后缀的模板页,现在的后缀名可以//是.html了
    app.engine('.html', require('ejs').__express);
    //设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬
    app.set('view engine', 'html');
    //设置模板文件文件夹,__dirname为全局变量,表示网站根目录
    app.set('views', __dirname + '/views');
    
    app.use(express.static(__dirname + '/public'));
    
    var users = [
        {name: 'tobi', email: 'tobi@learnboost.com'},
        {name: 'loki', email: 'loki@learnboost.com'},
        {name: 'jane', email: 'jane@learnboost.com'}
    ];
    
    
    app.get('/', function(req, res) {
        //向页面模板传递参数,可以传递字符串和对象,注意格式
        res.render('users', {
            users: users,
            title: "EJS example",
            header: "Some users"
        });
    });
    
    if (!module.parent) {
        app.listen(3000);
        console.log('Express app started on port 3000');
    }
     
    
    //user.html
    <% include header.html %>
    
    <h1>Users</h1>
    <ul id="users">
        <% users.forEach(function(user){ %>
        <li><%= user.name %> <<%= user.email %>></li>
        <% }) %>
    </ul>
    <hr/>
    <script>
        avalon.define("test", function(vm){
            vm.users = <%- JSON.stringify(users) %>
        })
    </script>
    <ul ms-each-el="users" ms-controller="test">
           <li>{{el.name}} <{{el.email}}></li>
    </ul>
    
    <% include footer.html %>
    
    //header.html
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title> <%= title %> </title>
            <script src="avalon.js"></script>
                
            <style type="text/css">
                body {
                    padding: 50px;
                    font: 13px Helvetica, Arial, sans-serif;
                }
            </style>
        </head>
        <body>
    
    //footer.html
    
    </body>
    </html>
    

    1、上面是express使用模版的一个基本例子

    app.set("view engine","ejs"); 这句将模版引擎设置为 ejs (http://github.com/visionmedia/ejs

    ejs可通过 npm install ejs 来进行安装

    2、在app.get中。

    res.render('users', { users: users, title: "EJS example", header: "Some users" }); 会执行2个步骤。

    1. 会读取 ./views/index.ejs文件的内容,然后将其中的title变量替换为EJS example,例如<%=title%>会变为EJS example。假设返回的内容为content1

    2. 接着,会读取./views/layout.ejs,并将其中的body变量替换为content1,例如<%=body%>会变为content1的内容。

    3、在2中,如果不愿意使用默认的layout.ejs,可自行指定。例如:

    res.render("index",{"title":"test","layout":"main"});

    res.render("index",{"title":"test","layout":"main.ejs"});

    4、如果不愿意使用layout,则可以设置layout为false,例如:

    res.render("index",{"layout":false});

    5、如果不想每个请求都单独设置一次。可以使用全局设置:

    app.set("view options",{                                                                                          
                                                                                                                                                                                         
        "layout":false
                                                                                                                                                                                         
    });

    6、ejs 里,默认的闭合标记是 <%  .. %>,我们也可以定义自己的标签。例如:

    app.set("view options",{                                                                                  
       "open":"{{",                                                                                  
       "close":"}}"
    });

    7、 每个模版引擎的用法都有所异同,总体的使用方法都是上面这样的。

    以下是目前常用的模版引擎:

    Template Engines

    Below are a few template engines commonly used with Express:

    8、在web应用中,经常会需要重复显示某个内容,例如:用户评论功能,需要重复显示出每一条用户的评论,这个时候,我们可以通过循环来实现。但是也可以使用【局部模版】(partial)来实现。例如:

    1. 首先我们建一个局部的模版 ./views/comment.ejs:

      <div class="comment_item">                                                                
          <div class="comment_user"><%=comment.user%></div> :                                                                
          <div class="comment_content"><%=comment.content%></div>                                                                
      </div>

      注意:这里是comment.xxxx

    2. 然后在./views/index.ejs中,通过partial调用comment

      this is <%=title%>!                                                          
      <br/>                                                          
      <%- partial("comment",comments)%>

      注意:这里是 partial("comment.ejs", comments); <-- 单词要用复数。

    3. 最后是在router中,调用index.ejs。

      var app=require("express").createServer();                                                  
                                                                                                           
      app.set("view engine","ejs");                                                  
                                                                                                           
      app.get("/",function(req,res){                                                  
          res.render("index",{"title":"test","layout":false,"comments":[                                                  
              {"user":"gainover","content":"test1"},                                                  
              {"user":"zongzi","content":"test2"},                                                  
              {"user":"maomao","content":"test3"}                                                  
          ]});                                                  
      });                                                  
                                                                                                           
      app.listen(3000);

      注意:代码里的 comments 和 index.ejs的 comments变量名称一致,而partial所调用的comment.ejs中,则采用 comment 的单数形式。

    4. 查看源代码:效果图如下:

      在列表显示时,我们通常会遇到的场景是,对第一个元素或者最后一个元素加以特殊显示。在partial中,我们可以通过express内置的变量来判断当前对象是否是第一个元素或者最后一个元素,例如:

      <div class="comment_item<%if(firstInCollection){%> firtitem <%}%>">                               
          <div class="comment_user"><%=comment.user%></div> :                               
          <div class="comment_content"><%=comment.content%></div>                               
      </div>

      这样第一条评论的 class 里就会多一个firstitem。

      类似的内置变量还有:

      firstInCollection 如果是数组的第一个元素,则为true
      indexInCollection 当前元素在数组里的索引
      lastInCollection 如果是数组的最后一个元素,则为true
      collectionLength 数组的长度

    5. 最后是partial调用模版时的路径查找问题:

      partial("edit") 会查找同目录下的edit.ejs文件。

      partial("../message") 会查找上一级目录的message.ejs文件。

      partial("users") 会查找 users.ejs文件,如果不存在users.ejs, 则会查找 /users/index.ejs文件。

    <%= users %>会对内容进行转义,想不转义,可以用<%- users %>。

  • 相关阅读:
    1-EI-灵魂画手解释安卓的Message对象
    2-VVI-材料设计之TabLayout下标签
    1.安卓基础之Activity生命周期
    golang复制一个指针对象(反射)
    小罗的面试题
    http1.0 、http1.1和http2.0的区别
    HTTP长连接、短连接究竟是什么?
    详解TCP中的拥塞控制
    TCP怎么保证传输的安全性
    ulimit设置完在其他用户上没有生效解决办法
  • 原文地址:https://www.cnblogs.com/rubylouvre/p/3421805.html
Copyright © 2011-2022 走看看