【九月打卡】第13天 Node.js开发博客——变量和判断、循环和组件

课程信息

课程名称： 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

})%>