跟我一塊兒瞭解koa（四）

時間 2019-11-20

標籤一塊兒瞭解 koa 简体版

原文原文鏈接

咱們使用第二講中的路由頁面，再結合ejs,一塊兒瞭解ejs在koa中的應用
1.安裝koa-views和ejshtml

cnpm install --save koa
cnpm install koa-router --save
cnpm install --save koa-views
cnpm install ejs --save

在app.js中寫入咱們要渲染的值，並在模板引擎中引入npm

//app.js
var Koa =require('koa'),
    router=require('koa-router')(),
    views=require('koa-views');
/*引入是實例化路由*/
var app = new Koa()
// 配置模板引擎第三方中間件
// app.use(views('views', { map: {html: 'ejs' }}));   //這樣配置也能夠  注意若是這樣配置的話 模板的後綴名是.html
app.use(views('views',{
    extension:'ejs'
}))
router.get('/',async (ctx)=>{
    let title = "你好 ejs"
    await ctx.render("index",{
        title:title
    })
})

// router.get('/',async(ctx)=>{
//     ctx.body = "首頁"
// })
router.get('/news',async(ctx)=>{
    ctx.body = "新聞列表頁面"
})
router.get('/newscontent',async (ctx)=>{
    ctx.body = "新聞詳情"
})
app.use(router.routes());//啓動路由
app.use(router.allowedMethods())
app.listen(3006)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    這是一個ejs模板引擎
    <h2><%=title%></h2>
</body>
</html>

頁面渲染效果爲

咱們也能夠在ejs中渲染一個數組
代碼以下【這些本質上是ejs的語法】數組

//app.js
var Koa =require('koa'),
    router=require('koa-router')(),
    views=require('koa-views');
/*引入是實例化路由*/
var app = new Koa()
// 配置模板引擎第三方中間件
// app.use(views('views', { map: {html: 'ejs' }}));   //這樣配置也能夠  注意若是這樣配置的話 模板的後綴名是.html
app.use(views('views',{
    extension:'ejs'
}))
router.get('/',async (ctx)=>{
    // let title = "你好 ejs"
    let arr = [11,3,5,6,7]
    await ctx.render("news",{
        list:arr
    })
})

// router.get('/',async(ctx)=>{
//     ctx.body = "首頁"
// })
router.get('/news',async(ctx)=>{
    ctx.body = "新聞列表頁面"
})
router.get('/newscontent',async (ctx)=>{
    ctx.body = "新聞詳情"
})
app.use(router.routes());//啓動路由
app.use(router.allowedMethods())
app.listen(3006)

//views\news.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>ejs循環渲染數據</h2>
    <ul>
        <%for(var i=0;i<list.length;i++){%>
        <li><%=list[i]%></li>
        <%}%>
    </ul>
</body>
</html>

頁面渲染效果爲

在ejs中，咱們一樣能夠引入公共的模塊

app

運行的效果爲

koa

ejs中的if else函數

效果以下
async

若是咱們須要在每個路由中都渲染一個真實的數據，咱們應該怎麼作呢？函數

//app.js
var Koa =require('koa'),
    router=require('koa-router')(),
    views=require('koa-views');
    // 公共數據放在ctx.state中
/*引入是實例化路由*/
var app = new Koa()
// 配置模板引擎第三方中間件
// app.use(views('views', { map: {html: 'ejs' }}));   //這樣配置也能夠  注意若是這樣配置的話 模板的後綴名是.html
app.use(views('views',{
    extension:'ejs'
}))
// 寫一箇中間件配置公共的信息
app.use(async(ctx,next)=>{
    ctx.state.userinfo='張三'
    await next()
})
router.get('/',async (ctx)=>{
    let title = "你好 ejs"
    await ctx.render("index",{
       title:title
    })
})

// router.get('/',async(ctx)=>{
//     ctx.body = "首頁"
// })
router.get('/news',async(ctx)=>{
    ctx.body = "新聞列表頁面"
    let arr = [11,3,5,6,7]
    let content = "<h2>這是一個h2</h2>"
    let num = 12
    await ctx.render("news",{
        list:arr,
        content:content,
        num:num
    })
})
router.get('/newscontent',async (ctx)=>{
    ctx.body = "新聞詳情"
})
app.use(router.routes());//啓動路由
app.use(router.allowedMethods())
app.listen(3006)

//news.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%include public/header.ejs%>
    <h2>ejs循環渲染數據<%=userinfo%></h2>
    <ul>
        <%for(var i=0;i<list.length;i++){%>
        <li><%=list[i]%></li>
        <%}%>
    </ul>
    <h2>綁定html數據</h2>
    <%=content%>
    <br>
    <%-content%>
    <h2>條件判斷</h2>
    <br>
    <%if(num>24){%>
    大於24
    <%}else{%>
        小於24
    <%}%>
</body>
</html>

//index.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <%include public/header.ejs%>
    這是一個ejs模板引擎
    <h2><%=title%><%=userinfo%></h2>
</body>
</html>

頁面效果爲
ui

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。