亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【九月打卡】第13天 Node.js開發博客——變量和判斷、循環和組件

標簽:
Html5

课程信息

课程名称: Node.js+Express+Koa2+开发Web Server博客
课程章节: 第6章 博客项目之登录
课程讲师: 双越

课堂笔记

1、变量和判断

1.变量

ejs:nodejs服务端的模板引擎,也就是SSR,由服务端渲染。

变量:<%= title %>

/src/views/index.ejs:

// 这里是从路由那边传递过来的

 <%= title %>

EJS Welcome to <%= title %>

<%= msg %>

// 不确定哪个变量是否传过来,可以前面加个locals. 如果不加的话,那么会报错

<%= locals.name %>

/src/routes/index.js:

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

await ctx.render('index', {

title: 'Hello Koa 2!',

msg: "你好"

})

})

2.判断

/src/views/index.ejs:

<% if (isMe) { %>

[@ 提到我的(3)](#)

<% } else { %>

关注

<% } %>

/src/routes/index.js:

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

// 读取模板文件是异步的,所以要用await

await ctx.render('index', {

title: 'Hello Koa 2!',

msg: "你好",

isMe: true

})

})

2、循环和组件

1.组件

新建/views/widgets文件夹,用来专门存放小组件。

views/widgets/user-info.ejs:

<% if (isMe) { %>

[@ 提到我的(3)](#)

<% } else { %>

关注

<% } %>

views/index.ejs:

<%- include("widgets/user-info",{

isMe

})%>

2.循环

views/widgets/blog-list.ejs:

<% blogList.forEach(blog=>{ %>

<%= blog.title %>

<% }) %>

routes/index.js:

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

await ctx.render('index', {

title: 'Hello Koa 2!',

msg: "你好",

isMe: true,

blogList: [

{

id: 1,

title:"aaa"

},

{

id: 2,

title: "bbb"

},

{

id: 3,

title:"ccc"

}

]

})

})

views/index.ejs:

<%- include("widgets/blog-list",{

blogList

})%>
點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
9
獲贊與收藏
4

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消