• 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>
    3. <html lang="en">
    4.     <head>
    5.         <meta charset="utf-8" />
    6.         <title><%= title%></title>
    7.         <link rel="stylesheet" href="/stylesheets/style.css" />
    8.     </head>
    9.     <body>
    10.         <%- body%>
    11.     </body>
    12. </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***(***)%>
  • 相关阅读:
    玉米不怕累，宇春最珍贵
    幸福
    谷歌位置搜索 蹩脚结合jquery.ui.gmap
    Resharp Format XML config
    正则表达取得 image src 中值
    一个Gif处理的类库
    使用nuGet管理自己的包
    正则表达式语言 快速参考
    动态加入JS及加入CSS
    检测是一个时间串或一个数字串是否连续
  • 原文地址：https://www.cnblogs.com/MDK-L/p/4056574.html
Copyright © 2020-2023  润新知