zoukankan      html  css  js  c++  java
  • Express 框架中ejs的安装使用

    Express 中 ejs 的安装:

    npm install ejs --save 或者:
    npm install ejs --save-dev

    Express 中 ejs 的使用:

    var express = require("express");
    var app = express();
    app.set("view engine","ejs");
    app.get("/",function(req,res){ });
    res.render("news",{
    "news" : ["新闻","我","哈哈"]
    }); 
    app.listen(3000);

    指定模板位置 ,默认模板位置在 views

    app.set('views', __dirname + '/views');

    Ejs 引入模板

    <%- include header.ejs %>

    Ejs 绑定数据

     
     
    <%=h%>

    Ejs 绑定 html 数据

    <%-h%>

    Ejs 模板判断语句

    <% if(true){ %> <div>true</div>
    <%} else{ %> <div>false< /di v>
    <%} %>

    Ejs 模板中循环数据

    <%for(var i=0;i<list.length;i++) { %>
    <li><%=list[i] %></li> <%}%>

    Ejs 后缀修改为 Html

    这是一个小技巧,看着.ejs 的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html。 1.在 app.js 的头上定义 ejs:,代码如下:
    varejs = require('ejs');
    2.注册 html 模板引擎代码如下: app.engine('html',ejs.__express);
    3.将模板引擎换成 html代码如下:
    app.set('view engine', 'html');
    4.修改模板文件的后缀为 .html。

    利用 Express.static 托管静态文件

     

     1.如果你的静态资源存放在多个目录下,你可以多次调用express.static中间件
    app.use(express.static('public'));

    现在,public 目录下面的文件就可以访问了。

     

    http://localhost:3000/hello.html

     

    2、如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟(virtual)”目 录(即目录根本不存在)下面,可以通过为静态资源目录指定一个挂载路径的方式来实现,

    如下所示:

     

    app.use('/static', express.static('public'));

     

    现在,你就爱可以通过带有 “/static” 前缀的地址来访问 public 目录下 面的文件了。

    http://localhost:3000/static/hello.html

    demo:

     
    /*
    1.安装ejs   cnpm install ejs
    
    2.配置express的模板引擎
    
     app.set("view engine","ejs");
    
     express 里面使用ejs 安装以后就可以用,不需要引入。
    
    
    3.在express中使用ejs
    
    1.渲染的模板引擎
    
    2.数据
    
    
    
         res.render("news",{
            "news" : ["新闻","我","哈哈"]
         });
    
    * */
    
    
    var express=require('express');
    
    var app=express();
    
    /*配置ejs模板引擎*/
    app.set('view engine','ejs');
    
    
    //views默认会在这个文件里面找模板
    
    //设置模板的位置
    app.set('views', __dirname + '/views');
    
    //中间件app.use
    
    //express.static('public')给  public目录下面的文件提供静态web服务
    
    // http://localhost:3001/images/baidu.png
    app.use(express.static('public'));
    
    //配置虚拟目录 的静态web服务
    
    //http://localhost:3001/static/images/baidu.png
    
    //   images/baidu.png去public目录找这个文件,如果有就返回
    app.use('/static',express.static('public'));
    
    
    app.get('/',function(req,res){
    
        //res.send('ejs的例');
    
        res.render('index');  /*ejs渲染模板*/
    })
    
    app.get('/news',function(req,res){
    
        //res.send('ejs的示例');
        var arr=['1111','222','3333'];
        res.render('news',{  /*数据*/
            list:arr
        });
    
         /*ejs渲染模板*/
    })
    
    /*端口大于3000   */
    
    app.listen('3001','127.0.0.1');

     login.ejs示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title></title>
    </head>
    <body>
    
    
        <h2>这是一个ejs的后台模板引擎-登录</h2>
    
        <h2><%=msg%></h2>
        <br/>
        <hr/>
        <ul>
            <% for(var i=0;i<list.length;i++){%>
                <li><%=list[i]%></li>
            <% } %>
        </ul>
    
    
    </body>
    </html>

     

  • 相关阅读:
    Windows消息初探(1)
    配置Git Extension免密码发布代码到CSDN
    一个简单的参数校验类
    Functions类,一个Javascript的函数加法类,将两个函数加起来,顺序执行
    对Javascript异步执行的理解
    aws在线技术峰会笔记-游戏解决方案
    aws在线技术峰会笔记-主会场
    努力成长为一只全栈工程师
    翻译:在Ubuntu 14.04上安装FTP服务器的方法
    奇妙的时间旅程
  • 原文地址:https://www.cnblogs.com/loaderman/p/11505965.html
Copyright © 2011-2022 走看看