express 3.0 以后 layout

从Express 3.0开始,Express抛弃了layout的概念,而转为通过模板引擎的block或者include提供对页面分块的支持。
 
第一步:
    方法一,进入到应用根目录,直接安装npm包
    npm install express-partials
    方法二,打开应用的package.json文件,找到dependencies元素,添加如下一行代码:
    "express-partials": "*",进入到应用根目录npm install,即可
    本人在这里推荐第二个方法,因为你部署的时候本就依赖则合格包。
第二步:
    代码中引用中间件
    var express = require('express'),
    params = require('express-params'),
    partials = require('express-partials');
    var app = express();
    app.use(partials()); //这个一定要写在app.use(app.router)之前
    params.extend(app);
 
第三步:
    使用layout,默认使用views/layout.xxx,当然仍然可以在路由的render方法参数中指定其他layout或设置layout: false(但express 3中已不支持全局view options设置的layout参数)
 
    views/layout.ejs     
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title><%= title%></title>
  6.         <link rel="stylesheet" href="/stylesheets/style.css" />
  7.     </head>
  8.     <body>
  9.         <%- body%>
  10.     </body>
  11. </html>
    views/index.ejs
 
  1. <h1><%= title%></h1>
  2. <p>Welcome to <%= title%></p>
  3. <ul>
  4.     <li><a href="/Users" title="User Manage">User Manage</a></li>
  5. </ul>
 
第四步:
    使用partial,express之前版本使用partial时是以当前视图起始查找相对位置下的视图,而目前版本的express-partials中间件似乎只支持直接保存于views目录下的partial,例如下面的例子,之前匹配到的应该是views/users/***.ejs,而现在则需要将partial页面移动到views/***.ejs,否则报错
 
    views/users/index.ejs
 
  1. <h1><%= title%></h1>
  2. <table style="border: 1px solid Black" border="1">
  3.     <tr style=" color: rgb(0, 0, 204);">>
  4.         <th></th>
  5.         <th>ID</th>
  6.         <th>Name</th>
  7.         <th>***</th>
  8.     </tr>
  9.     <% users.forEach(function(item, i){ %>
  10.     <tr>
  11.         <td><%= i+1 %></td>
  12.         <td><a href="/Users/<%= item.id%>" title="View user"><%= item.id%></a></td>
  13.         <td><%= item.name%></td>
  14.         <td><%- partial('***', {***:item.***}) %></td>
  15.     </tr>
  16.     <% }) %>
  17. </table>
  18. <br />
  19. <a href="/">Back</a>

    views/***.ejs

  1. <% 
  2.     var fun*** = function(s){
  3.         switch(s)
  4.         {
  5.             case 1: return 'Male';
  6.             case 2: return 'Female';
  7.             default: return 'Unknow';
  8.         }
  9.     };
  10. %>
  11. <%= fun***(***)%>

你可能感兴趣的:(express)