NodeJS学习二(模板引擎的配置和使用)

  • 2019 年 12 月 2 日
  • 筆記

当页面内容比较多的时候,如果像上一节中说到的在绑定路由使用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);

本文重点:

//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});  //取消模板缓存