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');

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

来源：https://www.cnblogs.com/loaderman/p/11505965.html

标签

ejs

软件

static