zoukankan      html  css  js  c++  java
  • express

    http://blog.sina.com.cn/s/blog_ad0672d60101l2ml.html

    1.express中使用ejs
    var express = require('express');//需要安装 express
    var app = express();

    app.set("view engine","ejs");//模版引擎设置为 ejs

    2.文件组织

    在express中使用ejs,文件组织遵循express。
    .views-------放置动态模版
    .public------放置静态网页
    .layouts-----放置布局文件

    3.基本语法
    .<% code %>
     

       无缓冲的条件语句元素

    .<%= code %>
        转义HTML,该code并且会打印出来

    .<%- code %>
        非转义的buffering,该code并且会打印出来
        
    .<% include file %>
        内嵌别的文件
        
    .<% layout(file) -%>
        指定布局文件

    .<% script(file) -%>
        包含js脚本文件
        
    .<% stylesheet(file) -%>
        包含css文件
        
    .<% block(code, code) -%>
        指定块内容    
        
    4.基本对象

    .scripts
        包含的脚本

    .stylesheets
        包含的css

    .blocks
        包含的块
        
    5.例子

    //index.ejs
    <% layout('boilerplate') -%>
    <% script('foo.js') -%>
    <% stylesheet('foo.css') -%>
    <h1>I am the <%=what%> template</h1>
    <% block('header', "<p>I'm in the header.</p>") -%>
    <% block('footer', "<p>I'm in the footer.</p>") -%>

    //boilerplate.ejs
    <!DOCTYPE html>
    <html>
      <head>
        <title>It's <%=who%></title>
        <%-scripts%>
        <%-stylesheets%>
      </head>
      <body>
        <header>
          <%-blocks.header%>
        </header>
        <section>
          <%-body -%>
        </section>
        <footer>
          <%-blocks.footer%>
        </footer>
      </body>
    </html>

    //app.js
    var express = require('express')
      , engine = require('ejs-locals')
      , app = express();

    // use ejs-locals for all ejs templates:
    app.engine('ejs', engine);

    app.set('views',__dirname + '/views');
    app.set('view engine', 'ejs'); // so you can render('index')

    // render 'index' into 'boilerplate':
    app.get('/',function(req,res,next){
      res.render('index', { what: 'best', who: 'me' });
    });

    app.listen(3000);

    结果
    <!DOCTYPE html>
    <html>
      <head>
        <title>It's me</title>
        <script src="foo.js"></script>
        <link rel="stylesheet" href="foo.css" />
      </head>
      <body>
        <header>
          <p>I'm in the header.</p>
        </header>
        <section>
          <h1>I am the best template</h1>
        </section>
        <footer>
          <p>I'm in the footer.</p>
        </footer>
      </body>
    </html>
  • 相关阅读:
    读书笔记----软件设计原则、设计模式
    程伟杰 | 2021软件代码开发技术作业一 | 自我介绍+课程6问
    团队作业3-需求改进&系统设计
    团队项目作业2-需求规格说明书
    【Android实习】20场面试斩获大厂offer,我学会了什么
    通俗易懂,android是如何管理内存的
    关于Handler同步屏障你可能不知道的问题
    清晰图解深度分析HTTPS原理
    这一篇TCP总结请收下
    深入浅出Java线程池:源码篇
  • 原文地址:https://www.cnblogs.com/maxpak/p/5088580.html
Copyright © 2011-2022 走看看