template是乙個模板引擎
使用:
1.簡單使用
// 匯入模板引擎模組
const template = require('art-template');
// 將特定模板與特定資料進行拼接
1 const html = template('./views/index.art',
6}); 78
index.art:↓910
}11}12
2.語法
art-template同時支援兩種模板語法:標準語法和原始語法。
標準語法可以讓模板更容易讀寫,原始語法具有強大的邏輯處理能力。
標準語法: }
原始語法:<%=資料 %>
1.輸出:
標準語法:}原始語法:<%=資料 %>
2.原文輸出
標準語法:}原始語法:
<%-資料 %>如果資料中攜帶html標籤,預設模板引擎不會解析標籤,會將其轉義後輸出。(直接輸出標籤)
3.條件判斷
} ... }} ... } ... }
<% if (value) %>
<% if (v1) else
if (v2) %>
4.迴圈
標準語法:} }原始語法:
<% for() %>
}} }
}<% for(var i = 0; i < target.length; i++) %>
5.子模版
使用子模板可以將**公共區塊(頭部、底部)抽離到單獨的檔案中。標準語法:}
原始語法:
<%include('
模板') %>
}<% include('
./header.art
') %>
6.模板繼承示例
//繼承的模板和挖坑的地方}}//使用模板的示例
}} "
stylesheet
" href="
custom.css
"> }
} this is just an awesome page.
}
3.模板配置
向模板中匯入變數 template.defaults.imports.變數名 = 變數值;
設定模板根目錄 template.defaults.root = 模板目錄
設定模板預設字尾 template.defaults.extname = '.art'
也可以這樣:在使用前更改預設字尾,目錄可能也可以
template.defaults.extname = '.art
'const html1 = template('01'
,{})
console.log(html1)
template.defaults.extname = '
.html
'const html2 = template('02'
,{})
console.log(html2)
第三方模組 router
功能:實現路由
使用步驟:
獲取路由物件
呼叫路由物件提供的方法建立路由
啟用路由,使路由生效
const getrouter = require('router')
const router =getrouter();
router.get(
'/add
', (req, res) =>)
server.on(
'request
', (req, res) =>)
--------------------ps--------------------------------------------
如果想從 xx.post('/add',(res,req)=>{})中獲得資料,需要第三方模組 body-parser
第三方模組 serve-static
功能:實現靜態資源訪問服務
步驟:引入serve-static模組獲取建立靜態資源服務功能的方法
呼叫方法建立靜態資源服務並指定靜態資源服務目錄
啟用靜態資源服務功能
const servestatic = require('serve-static')
const serve = servestatic('
public')
server.on(
'request
', () =>)
server.listen(3000)
art template前端模板引擎
偶然看到後台有一段 採用的是art template的模板引擎 位址為 這段 很簡潔 var html template detail artdialog 主要用的是template方法 渲染html 渲染結束得到html賦值然後顯示,後來檢視了一下官方的例子講解的比較好,只要引入 dist tem...
Web前端模板引擎 字串模板
這是乙個系列文章,將會介紹目前web前端領域裡用到的三種模板引擎技術,它們分別是 本文是這個系列的第一篇,著重介紹基於字串的模板引擎的實現原理,分析它的優點缺點以及使用的場景。進入正文之前,我們先回顧一下在模板引擎出現之前,暫且稱之為 石器時代 我們是如何利用js改變頁面結構的。對於下面的 我們正處...
學習前端模板引擎 jade 一
通常大部分前端開發工作者一開始步入前端開發的時候,都是直接簡單的寫html頁面然後丟給後台開發,後台開發在來嵌入模版。對於日益龐大的前端頁面來說,還是用老的字串拼接的方法來嵌入html內容已經不適應當下的開發趨勢了。廢話不多說,直接切入正題。第二步我要安裝npm包管理工具,在node環境下,不裝gr...