NodeJS博客实战02_模板引擎的配置和使用

Dear 丶 2022-05-29 09:23 319阅读 0赞

当页面内容比较多的时候，在绑定路由使用app.send()方法返回大量的html字符串是不现实的，需要配置模板使其返回对应的页面。

配置swig模板引擎分为四个步骤：

1）加载模板引擎

2）配置模板引擎应用模板

3）设置模板文件存放目录

4）注册模板

5）路由中返回模板

代码如下：

//应用程序的启动入口文件
    
    //加载express模块
    var express = require('express');
    //创建app应用,相当于nodeJS的http.createService()
    var app = express();
    
    //1加载模板处理模块
    var swig = require('swig');
    //2配置模板应用模块
    //定义当前应用所使用的模板引擎，第一个参数：模板引擎名称，同时也是模板文件的后缀；第二个参数：解析处理模板内容的方法
    app.engine('html',swig.renderFile);
    //3设置模板文件存放的目录,第一个参数必须是views，第二个参数是目录
    app.set('views','./views');
    //4注册模板，第一个参数：必须是view engine,第二个参数与定义模板引擎的第一个参数名称一致
    app.set('view engine','html')
    
    /**
     * [description] 给app绑定首页路由，把一个url路径通过一个或多个方法绑定
     * @param  {[type]} req       request对象，保存客户端请求相关的一些数据
     * @param  {[type]} res       response对象
     * @param  {[type]} next){} 函数,用于执行下一个和当前路径匹配的函数
     * @return {[type]}           [description]
     */
    app.get('/',function(req,res,next){
    	//res.send(string)发送内容直客户端
    	// res.send('<h1>欢迎来到我的博客！</h1>')
    	
    	//5读取views目录下的指定文件，解析并返回给客户端
    	//第一个参数：模板的文件相对于views/index.html
    	//第二个参数：传递给模板使用的数据
    
    	res.render('index');
    })
    
    //监听http请求
    app.listen(8081);

在views目录下新建index.html文件：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <body>
    	<h1>欢迎光临我的博客</h1>
    </body>
    </html>

运行app.js文件，打开浏览器输入localhost:8081会出现相应的页面信息。

但是在当改变index.html内容后刷新页面不会即使刷新，这是因为引擎第一次读取模板会将其缓存到内存中，再次读取会从缓存中直接获取，需要重启服务才能看到效果。因此要渠道模板引擎的缓存，修改后app.js代码如下：

//应用程序的启动入口文件
    
    //加载express模块
    var express = require('express');
    //创建app应用,相当于nodeJS的http.createService()
    var app = express();
    
    //1加载模板处理模块
    var swig = require('swig');
    //2配置模板应用模块
    //定义当前应用所使用的模板引擎，第一个参数：模板引擎名称，同时也是模板文件的后缀；第二个参数：解析处理模板内容的方法
    app.engine('html',swig.renderFile);
    //3设置模板文件存放的目录,第一个参数必须是views，第二个参数是目录
    app.set('views','./views');
    //4注册模板，第一个参数：必须是view engine,第二个参数与定义模板引擎的第一个参数名称一致
    app.set('view engine','html')
    //5第一次读取会把模板缓存到内存当中，下次会直接读取，因此即使改了模板内容刷新也不会有变化，需要在开发过程中需要取消模板缓存
    swig.setDefaults({cache:false});
    
    /**
     * [description] 给app绑定首页路由，把一个url路径通过一个或多个方法绑定
     * @param  {[type]} req       request对象，保存客户端请求相关的一些数据
     * @param  {[type]} res       response对象
     * @param  {[type]} next){} 函数,用于执行下一个和当前路径匹配的函数
     * @return {[type]}           [description]
     */
    app.get('/',function(req,res,next){	
    	//6读取views目录下的指定文件，解析并返回给客户端
    	//第一个参数：模板的文件相对于views/index.html
    	//第二个参数：传递给模板使用的数据
    
    	res.render('index');
    })
    
    //监听http请求
    app.listen(8081);

启动运行app.js，每次修改模板后，刷新页面即可看到效果。