天天看點

koa模闆引擎ejs 和 art-template

目錄
  • ejs模闆引擎
  • art-template模闆引擎

一、ejs模闆引擎

下載下傳相關依賴:

cnpm install koa --save

cnpm install koa-router --save

cnpm install koa-views --save

cnpm install ejs  --save

 配置代碼

const Koa=require('koa'),
const router = require('koa-router')(),
const views = require('koa-views');

const app=new Koa();


//配置模闆引擎中間件  --第三方中間件
//app.use(views('views', { map: {html: 'ejs' }}));   //這樣配置也可以  注意如果這樣配置的話 模闆的字尾名是.html

app.use(views('views',{
    extension:'ejs'  /*應用ejs模闆引擎*/
}))

//寫一個中間件配置公共的資訊
app.use(async (ctx,next)=>{

    ctx.state.userinfo='張三';

    await next();/*繼續向下比對路由*/
})

router.get('/',async (ctx)=>{

   let title="你好ejs";

   await ctx.render('index',{

        title:title
    });

})

app.use(router.routes());   /*啟動路由*/
app.use(router.allowedMethods());
app.listen(3000);
           

ejs文檔   https://ejs.bootcss.com/#docs

               https://www.npmjs.com/package/ejs

二、art-template模闆引擎

下載下傳相關依賴:

cnpm install koa --save

ccnpm install koa-router --save

cnpm install --save art-template

cnpm install --save koa-art-template

配置代碼:

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

const app=new Koa();

//配置 koa-art-template模闆引擎
render(app, {
    root: path.join(__dirname, 'views'),   // 視圖的位置
    extname: '.html',  // 字尾名
    debug: process.env.NODE_ENV !== 'production'  //是否開啟調試模式

});

router.get('/',async (ctx)=>{
   //ctx.body="首頁"
    let list={

        name:'張三',
        h:'<h2>這是一個h2</h2>',
        num:20,
        data:['11111111','2222222222','33333333333']
    }

    await ctx.render('index',{
        list:list

    });
})

app.use(router.routes());   /*啟動路由*/
app.use(router.allowedMethods());
app.listen(3000);
           

 art-template文檔   http://aui.github.io/art-template/koa/

繼續閱讀