前導知識：art-template模板引擎的語法和基本使用
可以在 瀏覽器中使用art-template，也可以在node中使用art-template
在node中使用art-template
art-template的API
模板引擎最早誕生于服務器端，使用的是服務端渲染，本質是字串的決議替換，服務器處理好資料后才將最終的頁面代碼發給瀏覽器，
方式1：template.render(source, data, options)，編譯并回傳渲染結果
引數：
- 第一個引數是模板字串，string型別
- 第二個引數是資料物件
回傳值：是渲染好的字串
示例
var html = template.render('hi, <%=value%>.', {value: 'aui'});
方式2：template(filename, content)，根據模板名渲染模板，
引數：第一個引數filename是檔案名，string型別
回傳值：
- 如果
content為Object，則渲染模板并回傳string - 如果
content為string，則編譯模板并回傳function
方式3：template.compile(source, options)，編譯模板并回傳一個渲染函式，
- 第一個引數是模板字串
- 回傳值是一個渲染函式，類似于template.render()函式
var render = template.compile('hi, <%=value%>.');
var html = render({value: 'aui'});
案例：
<!--要渲染的檔案 01.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
</head>
<body>
<h1>{{name}}</h1>
<h2>{{age}}</h2>
</body>
</html>
// 方式1：使用 template.render
let template = require('art-template');
let http = require('http');
let server = http.createServer(function (req, res) {
let fs = require('fs');
fs.readFile('./01.html', function (err, data) {
let htmlStr = template.render(data.toString(), {
title: "測驗",
name: "webchang",
age: 18
})
res.end(htmlStr)
})
});
// 方式2:
let htmlStr = template('./01.html', {
title: "測驗",
name: "webchang",
age: 18
});
res.end(htmlStr);
在Express中配置使用art-template
Express - art-template 官方檔案
安裝：
npm install art-template
npm install express-art-template
- express-art-template是專門用來在Express中把 art-template 整合到 Express中的
- 這里需要安裝art-template，原因就在于express-art-template依賴了art-template
使用:
let express = require('express');
let app = express();
/**
* 配置使用art-template模板引擎，這行代碼是關鍵
* 第一個引數表示當渲染以 .art 檔案結尾的檔案的時候，使用art-template，可以把art改成html
* */
app.engine('art',require('express-art-template'));
/**
* Express為response物件提供了一個方法：render
* render方法默認是不可用的，如果配置了模板引擎就可以用了
* res.render('html模板名',{資料})，第二個引數可選
* render函式的第一個引數不能寫路徑，默認會去專案中的views目錄中查找該模板檔案
* 也就是說Express有一個約定，開發人員把所有的視圖檔案都放到views目錄中
* */
app.get('/',function (req,res) {
res.render('index.art',{
title:'hello'
})
});
app.get('/admin',function (req,res) {
// 此處的路徑是相對于 views 檔案夾
res.render('admin/admin.art',{
title:"我是admin"
});
});
如果想要修改默認的views目錄，則可以
// 第一個引數必須是 “views”
app.set('views',新的默認路徑)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282729.html
標籤：其他
上一篇：2021-05-02：給定一個檔案目錄的路徑，寫一個函式統計這個目錄下所有的檔案數量并回傳。隱藏檔案也算，但是檔案夾不算 。