亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

node+express+ejs使用模版引擎做的一個示例demo?

node+express+ejs使用模版引擎做的一個示例demo?

蠱毒傳說 2018-08-27 17:09:24
node+express+ejs使用模版引擎做的一個示例demo
查看完整描述

1 回答

?
函數式編程

TA貢獻1807條經驗 獲得超9個贊

什么是模板引擎

 

模板引擎(Template Engine)是一個將頁面模板和要顯示的數據結合起來生成 HTML 頁面的工具。如果說上面講到的 express 中的路由控制方法相當于 MVC 中的控制器的話,那模板引擎就相當于 MVC 中的視圖。

 

模板引擎的功能是將頁面模板和要顯示的數據結合起來生成 HTML 頁面。它既可以運 行在服務器端又可以運行在客戶端,大多數時候它都在服務器端直接被解析為 HTML,解析完成后再傳輸給客戶端,因此客戶端甚至無法判斷頁面是否是模板引擎生成的。有時候模板引擎也可以運行在客戶端,即瀏覽器中,典型的代表就是 XSLT,它以 XML 為輸入,在客戶端生成 HTML 頁面。但是由于瀏覽器兼容性問題,XSLT 并不是很流行。目前的主流還是由服務器運行模板引擎。

 

在 MVC 架構中,模板引擎包含在服務器端??刂破鞯玫接脩粽埱蠛?,從模型獲取數據,調用模板引擎。模板引擎以數據和頁面模板為輸入,生成 HTML 頁面,然后返回給控制器,由控制器交回客戶端。

 

前端常用的有哪些模板引擎

 

一、jade
 

 

jade是超高性能的node JavaScript模板引擎,有著非常強大的API和大量杰出的特性。它主要針對node的服務端。

 

二、EJS
 

 

EJS是模板引擎的一種,也是我們這個教程中使用的模板引擎,因為它使用起來十分簡單,而且與 express 集成良好。

 

三、Handlebars
 

 

Handlebars 是 JavaScript 一個語義模板庫,通過對view和data的分離來快速構建Web模板。它采用"Logic-less template"(無邏輯模版)的思路,在加載時被預編譯,而不是到了客戶端執行到代碼時再去編譯, 這樣可以保證模板加載和運行的速度。Handlebars兼容Mustache,你可以在Handlebars中導入Mustache模板。

 

使用模板引擎

 

在app.js中通過以下兩行代碼設置了模板文件的存儲位置和使用的模板引擎:

     // view engine setup   app.set('views', path.join(__dirname, 'views'));   app.set('view engine', 'ejs');    

注意:我們通過  express -e blog 只是初始化了一個使用 ejs 模板引擎的工程而已,比如 node_modules 下添加了 ejs 模塊,views 文件夾下有 index.ejs 。并不是說強制該工程只能使用 ejs 不能使用其他的模板引擎比如 jade,真正指定使用哪個模板引擎的是  app.set('view engine', 'ejs'); 。

 

在 routes/index.js 中通過調用 res.render() 渲染模版,并將其產生的頁面直接返回給客戶端。它接受兩個參數,第一個是模板的名稱,即 views 目錄下的模板文件名,擴展名 .ejs 可選。第二個參數是傳遞給模板的數據對象,用于模板翻譯。

 

打開 views/index.ejs ,內容如下:

 

index.ejs
 

     <!DOCTYPE html>   <html>    <head>     <title><%= title %></title>     <link rel='stylesheet' href='/stylesheets/style.css' />    </head>    <body>     <h1><%= title %></h1>     <p>Welcome to <%= title %></p>    </body>   </html>    

當我們 res.render('index', { title: 'Express' }); 時,模板引擎會把 <%= title %> 替換成 Express,然后把替換后的頁面顯示給用戶。

 

渲染后生成的頁面代碼為:

     <!DOCTYPE html>   <html>    <head>     <title>Express</title>     <link rel='stylesheet' href='/stylesheets/style.css' />    </head>    <body>     <h1>Express</h1>     <p>Welcome to Express</p>    </body>   </html>    

注意:我們通過  app.use(express.static(path.join(__dirname, 'public'))) 設置了靜態文件目錄為 public 文件夾,所以上面代碼中的  href='/stylesheets/style.css' 就相當于 href='public/stylesheets/style.css' 。

 

ejs 的標簽系統非常簡單,它只有以下三種標簽:

     <% code %>:  JavaScript 代碼。    <%= code %>:顯示替換過 HTML 特殊字符的內容。    <%- code %>: 顯示原始 HTML 內容。    

注意:
 

 

<%= code %> 和  <%- code %> 的區別,當變量 code 為普通字符串時,兩者沒有區別。當 code 比如為  <h1>hello</h1> 這種字符串時, <%= code %> 會原樣輸出  <h1>hello</h1> ,而  <%- code %> 則會顯示 H1 大的 hello 字符串。

 

一個簡單的例子

 

通過命令新建一個ejs的項目: express -e demo

 

 

在index.js里添加如下代碼:

     var express = require('express');   var router = express.Router();         var items=[{title:'文章1'},{title:'文章2'}];      /* GET home page. */   router.get('/', function(req, res, next) {    res.render('index',{title:'文章列表',items:items});   });      router.get('/form', function(req, res, next) {     res.render('form',{title:'文章列表',message:'fendo8888'});   });      router.post('/form', function(req, res, next) {    res.redirect('/');   });         module.exports = router;    

在views下新建form.ejs添加如下代碼:

     <!DOCTYPE html>   <html>    <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title><%= title %></title>     <link rel='stylesheet' href='/stylesheets/style.css' />    </head>    <body>     <form method="post" action="/form">       <label>new article</label><br>       <textarea name="text" cols="100" row="5"></textarea>       <input type="submit" value="pus"></input>     </form>     <div><%=message%></div>    </body>   </html>    

在index.ejs里添加如下代碼:

     <!DOCTYPE html>   <html>    <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title>文章列表頁</title>     <link rel='stylesheet' href='/stylesheets/style.css' />    </head>    <body>     <h1><%= title %></h1>     <p><a href="/form" rel="external nofollow" >發表新文章</a></p>     <ul>       <%items.forEach(function(item){%>        <li><%=item.title%></li>        <%})%>     </ul>    </body>   </html>      

運行項目: npm start

 

 

訪問:http://localhost:3000/

 

 

點擊發表新文章

 

 

點擊plus提交時,又回到首頁

 

 

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。


查看完整回答
反對 回復 2018-09-16
  • 1 回答
  • 0 關注
  • 982 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號