前端 模板引擎(補充)

2022-08-21 23:00:17 字數 2630 閱讀 6004

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...