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>
  • 相关阅读:
    误删本地分支,两天的工作量差点毁于一旦,使用git reflog 有惊无险恢复
    单点登录SSO
    IdentityServer4介绍和使用
    常见的远程无线通信技术
    4G模块和DTU模块有何区别
    以太网IO控制器
    什么是无线网关,无线网关的功能
    什么是IOT网关,网关功能有哪些
    Modbus RTU和Modbus TCP的两种区别
    数据采集网关设备 如何选择数据采集网关
  • 原文地址:https://www.cnblogs.com/maxpak/p/5088580.html
Copyright © 2011-2022 走看看