express框架中ejs的安装使用和使用静态资源


1.express框架中ejs的安装使用

需要装node环境和express框架,这个很简单,不清楚的可以查一下.

安装

1
2
3
npm install ejs --save  
或者：  
npm install ejs --save-dev

Express 中 ejs 的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    var express = require("express");  
    var app = express();  
    app.set("view engine","ejs");  
    app.get('/index',(req, res)=>{
        let name = req.query.name    //从访问地址中获取参数
       
        let h3 = "<h3>我是一个h3标签</h3>"
       
        res.render('index',{
            name:name,
            h3:h3
        })
    })
    app.listen(3000);

指定模板位置 ，默认模板位置在 views ：

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

Ejs 引入模板：

1
<%- include header.ejs %>

Ejs 引入HTML代码块：

1
<%-h3%>

Ejs 绑定数据：

1
<%=data%>

Ejs 模板判断语句 ：

1
2
3
4
5
<% if(true){ %>  
     <div>true</div>  
<%} else{ %>  
    <div>false</div>  
<%} %>

Ejs 模板中循环数据 ：

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

Ejs 后缀修改为 Html ：

1
2
3
4
5
6
7
8
9
10
11
12
这是一个小技巧，看着.ejs 的后缀总觉得不爽，使用如下方法，可以将模板文件的后缀换成我们习惯的.html。  

1.在 app.js 的头上定义 ejs:,代码如下:  
var ejs = require('ejs');  

2.注册 html 模板引擎代码如下：  
app.engine('html',ejs.__express);  

3.将模板引擎换成 html代码如下:  
app.set('view engine', 'html');  

4.修改模板文件的后缀为.html。

2.使用express设置静态文件目录

//将静态文件目录设置为：项目根目录+/public
app.use(express.static(__dirname + ‘/public‘));
//或者
app.use(express.static(path.join(__dirname, ‘public‘)));

提供对静态资源文件(图片、csss文件、javascript文件)的服务。传递一个包含静态资源的目录给 express.static 中间件用于立刻开始提供文件。如下提供public目录下的图片、css文件和javascript文件：

1
app.use(express.static(‘public‘));

express 会在静态资源目录下查找文件，所以不用把静态目录public作为url的一部分。访问项目public的子文件index.js：

1
http://localhost:3000/index.js

可以多次使用 express.static 中间件来添加多个静态资源目录，这时express 将会按照你设置静态资源目录的顺序来查找静态资源文件：

1
2
app.use(express.static(‘public‘));
app.use(express.static(‘file‘));

实例

项目中的部分代码

1
2
3
4
//配置模板引擎
app.engine('html',ejs.__express) //修改模板后缀为html
app.set('view engine','html')
app.use(express.static(__dirname + ‘/public‘)); //express访问静态资源目录：  D:假装我是项目名/views/public  找到这个路径下的静态资源文件

因为 __dirname 获取当前项目的绝对路径 （即项目名），所以静态文件的访问路径名应该是静态文件的父文件的相对路径.

希望对你有帮助,欢迎留言讨论.