zoukankan      html  css  js  c++  java
  • express下ejs入门基础

    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中配置文件:

    //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>

    文章知识来自:这里,小北稍微改了改嘿嘿,改动不大。

  • 相关阅读:
    visual studio 注释与取消注释
    visual studio错误之 无法将参数 1 从“const char [5]”转换为“char *”
    sdl_ffmpeg_video
    sdl_ffmpeg_audio
    visual studio添加第三方库文件,每次都要配置包含目录和库目录(繁琐),一劳永逸的办法
    visual studio 错误之errorC2362:“gototmpstr”跳过了“XXXX”的初始化操作
    visual studio调用SDL2和ffmpeg
    没用过得库函数
    visual studio编译错误之xx被声明为已否决
    vim把一个文件的若干行追加到另一个文件
  • 原文地址:https://www.cnblogs.com/stonl/p/4286756.html
Copyright © 2011-2022 走看看