🌰举几个栗子，用Koa两天入门Node.js后端开发（二）

Maokai
1,426 阅读4分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

前言

选用Koa作为web框架，用三篇文章讲解Node.js编写接口、服务端渲染（SSR）和MySQL数据库

在第一篇中已经了解接口的写法，本篇讲解服务端渲染

🚩学习目标

用Koa+Pug学习实现服务端渲染，主要了解如何使用Pug，更多Pug语法去下面看掘友的文章

  1. 在Pug模板中使用变量
  2. 在Pug模板中使用列表
  3. 在Pug模板中使用条件

1. 服务端渲染是什么？

上一篇中接口返回数据，再由前端生成HTML代码的是客户端渲染（CSR）

服务器直接返回HTML代码的方式就是服务端渲染（SSR）

为什么要用服务端渲染（SSR）？

前后端分离以后，HTML代码在前端生成，搜索引擎不识别，所以就需要服务器上完成渲染

image-20220207213054408.png

怎样进行服务端渲染（SSR）？

服务端渲染不得不提到模板引擎，理解为把数据和模板组合成HTML代码的工具。Node.js的模板引擎有很多，上一篇中提到了下面的几种

模板引擎地址
ejsejs.bootcss.com
handlebarswww.handlebarsjs.cn
hogan.jstwitter.github.io/hogan.js
nunjucksnunjucks.bootcss.com
Pugwww.pugjs.cn

Koa-generator脚手架默认使用Pug渲染HTML，上一篇中还有ctx.render方法没有说，下面就来看看render和Pug的用法

2. Pug是什么？

👉 中文官网

Pug 以前叫 jade，后来因为版权问题改为Pug

logo是一只哈巴狗

pugjs.png

3. 准备工作

🚧Node.js 版本 >= 10

不建议装vsCode插件

pug靠缩进解析dom层级，插件意义不大

image-20220211204748407.png

本文结合Koa讲ug的用法，需要安装Koa-generator 和 Koa

如果您没有安装，建议先看这篇文章

🌰举几个栗子，用Koa两天入门Node.js后端开发（一）

4. Pug语法

Pug最终会将数据和模板转换成HTML代码

举个栗子🌰

pughtml
title 页面<title>页面</title>
div.box 掘金<div class="box">掘金</div>
div
button.btn(size="big") 预览		<div>
<button size="big">预览</button>
</div>
  • 严格缩进，使用缩进表示html标签的层级
  • 不需要闭合标签
  • 样式类名用标签+.class，多个class连写 div.main.red.border
  • id用标签 + #id
  • 属性用(属性名="值") 多个属性用空格 隔开

已经有掘友写的非常详细，不再罗列语法

👉掘友的文章 juejin.cn/post/694165…

举个完整栗子🌰

doctype html
html
  head
    title= title
    meta(charset="UTF-8")
	meta(http-equiv="X-UA-Compatible" content="IE=edge")
	link(rel='stylesheet' href='/stylesheets/index.css')
  body
  	div.container
      h1#title 掘金
      a.btn(target="_blank") 打开
    script(src="/javascripts/index.js")

5. Pug模块

image-20220123211608520.png

Koa-generator 默认创建了3个Pug文件，怎样使用？

举个栗子🌰

image-20220126111614498.png

index.pug 中的代码的等于下图

image-20220211205253990.png

打开index.pug

extends layout

block content
  h1= title
  p Welcome to #{title}

extends layout表示引入layout.pug

block content 表示定义名为 content 的子模块，下一行是子模块的内容

加载子模块同样使用block content

为什么要分模块？

代码复用，像布局，页头页尾等放一个模块里，避免重复编码

6. 结合Koa学习Pug

Koa如何使用Pug？

举个栗子🌰

image-20220126200845640.png

打开index.js

router.get('/', async (ctx, next) => {
  await ctx.render('index', {
    title: 'Hello Koa 2!'
  })
})

ctx.render 表示用模板渲染

渲染需要时间，所以用await处理，避免请求结束，页面还是空白

title 是传给模板的变量

模板引擎中最主要的几个用法，其他用法可阅读 5.4

  • 变量
  • 列表
  • 条件

6.1 变量

举个栗子🌰

打开 users.js 新增一个路由

router.get('/who', async (ctx, next) => {
  await ctx.render('study', {
    user: 'MaoKai',
    age: 18
  })
})

新建study.pug 写入

extends layout

block content
  h1= user
  p age is #{age}

image-20220126202959679.png

  • 在标签中直接引用=

  • 在文本中引用#{变量}

访问http://localhost:3000/users/who 查看结果

image-20220126203128714.png

6.2 列表

打开 users.js 新增一个路由

router.get('/who', async (ctx, next) => {
  await ctx.render('study', {
    user: 'MaoKai',
    age: 18
  })
})

新建study.pug 在 p age is #{age} 下一行写入

💥注意缩进

  ul
    each item in word
      li= item

image-20220126204250338.png

访问http://localhost:3000/users/list 查看结果

image-20220126204412553.png

因为没有user和age的数据，创建了标签，但是没有内容。

6.3 条件

接着改造一下列表的代码

如果 user为空 不渲染h1标签
如果 age为空 不渲染p标签
如果 word为空 不渲染ul

将study.pug 改成下面的代码

extends layout

block content
  if user
    h1= user
  if age
    p age is #{age}
  if word
    ul
      each item in word
        li= item
  else
    div(style="color:red") 无数据

访问http://localhost:3000/users/who 查看结果

image-20220126205646605.png

6.4 更多pug用法

参考掘友的文章吧

👉 juejin.cn/post/694165…

最后

服务端渲染非常简单，最难的部分是第三篇-数据库篇

👇👇👇下一篇讲数据库

😜万水千山总是情，点个关注行不行~

avatar
文章
阅读
粉丝