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

VirMach 便宜 VPS

QNews

QNews