Koa項目總結三:ejs和art-template模板引擎讓頁面顯示動態數據

這裏,我主要整理兩種模板引擎的使用,ejsart-template

1. EJS模板引擎的使用:

1.1 安裝koa-viewsejs

npm install koa-views --save
npm install ejs --save

1.2 引入koa-views配置中間件:

const views = require('koa-views');
/**引入koa-views配置中間件:指定模板文件的目錄,ejs爲模板引擎*/
app.use(views(__dirname + '/views', {
    map: {html: 'ejs'},
}));

上面的代碼中,指定了模板文件的目錄爲/views,且使用ejs做爲模板引擎。

1.3 在Koa中使用ejs:

通過ctx.render('index.html', data:data),向模板文件傳遞數據:

/*Koa代碼*/
router.get('/', async (ctx, next)=>{
    let title = 'Hello Joyitsai';
    await ctx.render('index', {title: title})
})

1.4 ejs綁定上面發送的數據用等號<%=title%>:

<!--html模板代碼-->
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <h3><%=title%></h3>
</body>
</html>

1.5 ejs綁定html語句:

如果從後端傳送的數據是html語句,那麼要用<%-data%>來解析html語句:

router.get('/', async (ctx, next)=>{
    let data = '<h2>這是從後端發來的html語句</h2>'
    await ctx.render('index', {data:data})
})
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <!--解析後端發送的html語句用減號-->
    <%-data%>
</body>
</html>

1.6 ejs引入模板:

在實際開發中,像導航欄這樣公共的頁面結構會單獨分離成一個模板文件,然後在其他頁面中直接導入即可,同樣,這裏也可以通過<%include header.html%>引入模板頁面,模板文件結構如下:

|——app.js
|—— ...
|——views
    |——public
        |——header.html
    |——index.html

其中,header.html爲要在index.html中引入的模板,那麼引入代碼如下:

<!--public/header.html-->
<h2>這是頭部信息頁面</h2>

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <!--默認views/爲主目錄了,引入路徑不加雙引號或單引號-->
    <%include public/header.html%>
</body>
</html>

1.7 ejs模板判斷語句:

在ejs模板中。if...else..語句要包在<%%>

/**後端代碼*/
router.get('/', async (ctx, next)=>{
    let age = 24
    await ctx.render('index', { age:age})
})
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <%if(age>20){%>
        大於20歲
    <%}else{%>
        小於等於20歲
    <%}%>
</body>
</html>

1.8 ejs模板中的循環數據:

同樣,將for(var i=0;i<data.length;i++){}循環包含在<%%>中,示例代碼如下:

/**後端代碼*/
router.get('/', async (ctx, next)=>{
    let datalist = ['joyitsai', 'ming', 'bob'];
    await ctx.render('index', {datalist:datalist})
})
<body>
    <br/>
    <ul>
    <%for(var i=0;i<datalist.length;i++){%>
        <li><%=datalist[i]%></li>
    <%}%>
    </ul>   
</body>

另外,如果需要在每一個頁面都要獲取像用戶信息這樣的數據,每次ctx.render()時都傳遞這個數據會比較麻煩,解決辦法是,通過ctx.state = {data:data}來設置公共數據,綁定在ctx.state上的數據,可以在任何一個頁面中直接調用,而不需要通過ctx.render()來傳遞了。
關於ejs模板引擎的一些常用用法都列舉出來了,多多練習就記熟了,其實並沒什麼難度。

2. art-template模板引擎的使用:

art-template是常用模板引擎中渲染速度最快的,看下面一張測試圖:

image.png


art-template支持ejs語法,所以可以完全按照ejs的語法來寫。

 

2.1 安裝art-template引擎:

npm install art-template --save
npm install koa-art-template --save

2.2 引入並配置art-template

const Koa = require('koa');
const render = require('koa-art-template');
const path = require('path');

const app = new Koa();
render(app, {
    root: path.join(__dirname, 'views'), //模板文件所在目錄
    extname: '.html',                    //聲明模板文件的後綴名
    debug: process.env.NODE_ENV !== 'production'    //是否開啓調試模式
})

2.3 art-template模板引擎語法:

基本與ejs的相同,除引入其他模板文件除外,在art-template中,引入其他模板文件的語法如下:

<body>
    <!--art-template中引入模板時要加括號和引號-->
    <%include('header.html')%>
    <h3><%=title%></h3>
</body>

其他語法自行參考官方文檔:art-template語法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章