“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

preface

Using Koa as a Web framework, two articles on Node.js programming interface and server-side rendering (SSR)

  • 🌰 to name a few, using Koa two days to start Node.js backend development (a)

  • 🌰 to name a few, using Koa two days to get started node.js backend development (2)

You learned how to write interfaces in part 1. This article covers server-side rendering

1. What is server-side rendering?

In the previous article, the interface returned data and the front-end generated HTML code was client-side rendering (CSR)

The way the server returns the HTML code directly is server-side rendering (SSR)

Why server Side Rendering (SSR)?

After the separation of the front and back ends, THE HTML code is generated in the front end, which is not recognized by the search engine, so it needs to complete the rendering on the server

How to do server Side Rendering (SSR)?

Server-side rendering has to refer to a template engine, understood as a tool that combines data and templates into HTML code. There are many node.js template engines, including the following ones mentioned in the previous article

A template engine address
ejs ejs.bootcss.com
handlebars www.handlebarsjs.cn
hogan.js twitter.github.io/hogan.js
nunjucks nunjucks.bootcss.com
Pug www.pugjs.cn

Koa-generator scaffolding uses Pug to render HTML by default. The ctx.render method was not mentioned in the previous article, so let’s see how render and Pug are used

2. What is Pug?

👉 Chinese official website

Pug used to be called Jade, later changed to Pug due to copyright issues

Logo is a pug

3. Preparation

🚧 node. js Version >= 10

Installing vsCode plug-ins is not recommended

Pug parses the DOM hierarchy by indentation, and plug-ins don’t make much sense

In this article, koA-generator and Koa should be installed

If you don’t have one, I recommend reading this article first

🌰 to name a few, using Koa two days to start Node.js backend development (a)

4. The grammatical relation

Pug eventually converts the data and templates into HTML code

For example, 🌰

pug html
The title page The < title > page < / title >
Div. Box the Denver nuggets <div class=”box”> </div>
div

Button. The BTN preview (size = “big”)		 <div>

<button size=”big”> </button>

</div>
  • Strictly indent, using indentation to indicate the hierarchy of HTML tags
  • You do not need to close the label
  • The style class nameThe label+.class, multiple classesdiv.main.red.border
  • Id withThe label + #id
  • Properties with(Attribute name =" value ")Multiple attributes withThe blank spaceseparated

Already have digg friend write very detailed, no longer list grammar

👉 Dig friend’s article juejin.cn/post/694165…

Take a whole chestnut 🌰

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 Dig a.tn (target="_blank"Open the script (SRC ="/javascripts/index.js")
Copy the code

5. The module relation

Koa-generator creates three Pug files by default. How to use them?

For example, 🌰

The code in index.pug is equal to the following figure

Open the index relation

extends layout

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

Copy the code

Extends Layout introduces layout.pug

Block Content defines a submodule named Content, and the next line is the content of the submodule

Loading submodules also uses block Content

Why modules?

Code reuse, such as layout, header and footer in a module, to avoid repeated coding

6. Learn Pug with Koa

How does Koa use Pug?

For example, 🌰

Open index. Js

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

Ctx. render means to render with a template

Rendering takes time, so use await processing to avoid the request ending and the page remaining blank

Title is the variable passed to the template

See 5.4 for the most important uses of template engines

  • variable
  • The list of
  • conditions

6.1 variable

For example, 🌰

Open users.js to add a route

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

Create a new study.pug write

extends layout

block content
  h1= user
  p age is #{age}
Copy the code

  • Reference = directly in the tag

  • Reference #{variable} in text

Visit http://localhost:3000/users/who to see the results

6.2 list

Open users.js to add a route

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

Create study. Pug on the line below p age is #{age}

💥 note the indentation

  ul
    each item in word
      li= item
Copy the code

Visit http://localhost:3000/users/list to see the results

Because there is no user and age data, the tag is created, but there is no content.

6.3 conditions

Then modify the list code

If user is empty do not render the H1 tag if age is empty do not render the P tag if Word is empty do not render ulCopy the code

Change study.pug to the following code

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"), no dataCopy the code

Visit http://localhost:3000/users/who to see the results

6.4 More puG usage

Please refer to digg friends’ article

👉 juejin. Cn/post / 694165…

The last

The use of KOA-generator scaffolding is finished, and a database section may be added later.

  • 🌰 to name a few, using Koa two days to start Node.js backend development (a)

  • 🌰 to name a few, using Koa two days to get started node.js backend development (2)

😜 long march always feeling, point a concern line ~