携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第10天,点击查看活动详情
系列介绍
该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。
这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。
环境安装
实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。
以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。
前言
在上一篇文章里nodejs系列:34.koa之koa-views中间件-上篇,主要介绍了koa-views这个中间件。同时,也在koa里,简单地使用了koa-views这个中间件,返回一个html文件给到客户端。
在上一篇文章里,我们使用的是html模板,那可以使用其它模板吗?
是可以的,在这一节里,我们将介绍一下,在koa里怎么使用ejs模板。
ejs
ejs是Embedded Javascript的缩写,翻译为中文:嵌入式Javascript。
ejs是一套简单的模板语言,通过嵌入具有javascript特色的功能来进行html模板的渲染。
ejs比较通俗易懂,从代码展示来看,它仍然是html结构。但是同时又具有额外的功能,可以有效地复用已有的代码块。
koa-views
koa-views是一个koa的模板渲染中间件,使用koa-views中间件,可以和其它的模板引擎一起结合使用。也就是可以在Koa里使用模板引擎生成html页面,然后返回给到客户端
使用
创建文件
创建一个名字为index.js的文件,代码逻辑要在这个文件里完成
引入koa
引入koa,创建koa实例对象
const koa = require("koa");
const app = new koa();
安装ejs
npm install ejs
引入koa-views
const views = require("koa-views");
引入path模块
const path = require("path");
注册中间件
app.use(views(path.join(__dirname, "views/"), { extension: "ejs" }));
这次使用koa-views中间件,加载ejs模板
定义变量
let title = "ejs";
let content = "ejs模板";
在这里,定义要在ejs模板里使用的变量
使用中间件
使用中间件,主要是调用context实例对象的render方法。
我们先使用一个简单的中间件,来使用一下koa-views中间件。
app.use(async function (ctx) {
await ctx.render("index", {
title,
content,
});
});
调用context的render方法,把我们刚才定义的变量传递给到ejs模板
创建模板
在views文件夹下,创建一个index.ejs模板文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= title %></title>
</head>
<body>
<h3>内容展示:<%= content %></h3>
</body>
</html>
接收传递过来的变量,在ejs模板里面进行使用
启动服务器
app.listen(3000, () => {
console.log("服务器启动");
});
我们在cmd里用node运行index.js文件
我们看到,服务启动了。
接着,我们在浏览器里,访问localhost:3000
我们可以看到,index.ejs页面被返回给客户端,并且渲染到页面了。
小结
本小节主要介绍了koa-views中间件,同时通过一个简单的小示例,来演示了怎么在koa里使用koa-views中间件。并且结合ejs模板引擎,在koa里,把变量传递给到ejs模板。然后通过ejs模板引擎,生成html页面,最终返回给到客户端。
最后,放上自己比较喜欢的一句诗句:
千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》