nodejs系列:34.koa之koa-views中间件-上篇

752 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情

系列介绍

该系列主要是介绍一些nodejs相关的基础知识,没有什么特别难的知识点,都是一些比较基础知识点。大家学习起来,也会比较容易理解和接收。

这些知识点,也是以前自己学习nodejs的时候,学习过的知识点。有些知识点,可能是由于学习的时间比较久了,也有可能是平时工作中用到的机会比较少,也差不多快把它们都忘记掉了。现在把它们都写下来,写成文章,一方面是记录下自己以前学习的nodejs知识点,一方面也是复习巩固自己以前学习的nodejs知识点。不要学着学着,就把以前的知识点都忘光了。

环境安装

实现之前,你首先需要安装nodejs环境。因为我们写的代码需要在node环境上运行,如果你没有,那么文件会运行不了。

以下是nodejs的安装地址,如果你没有安装的话,可以先把它安装上。安装了可以忽略这一步,跳到下面一步。

nodejs安装

前言

在上一篇文章里nodejs系列:33.koa之mysql删除数据,主要介绍了怎么在Koa里连接mysql数据库,然后从数据库里删除数据。

前面几篇文章里,我们介绍了在koa里连接mysql数据库,往mysql数据库添加、更新、删除、查阅数据。即对数据库的增删改查,我们都介绍了一篇,和mysql有关的先告一段落。

接下来,我们介绍一下koa其它的中间件。

koa-views

koa-views是一个koa的模板渲染中间件,使用koa-views中间件,可以和其它的模板引擎一起结合使用。也就是可以在Koa里使用模板引擎生成html页面,然后返回给到客户端

使用

创建文件

创建一个名字为index.js的文件,代码逻辑要在这个文件里完成

引入koa

引入koa,创建koa实例对象

const koa = require("koa");
const app = new koa();
安装koa-views
npm install koa-views
引入koa-views
const views = require("koa-views");
引入path模块
const path = require("path");
注册中间件
app.use(views(path.join(__dirname, "views/"), { extension: "html" }));

koa-views中间件的参数介绍:

  • path:模板所在的文件夹目录
  • options:中间件的配置项

注册了koa-views中间件后,会往context实例对象添加render方法

使用中间件

使用中间件,主要是调用context实例对象的render方法。

我们先使用一个简单的中间件,来使用一下koa-views中间件。

app.use(async function (ctx) {
  await ctx.render("index");
});

调用context的render方法,从模板所在的文件夹views下,找到index.html文件,返回给客户端。上面注册koa-views中间件,配置项里设置的文件扩展名为html,所以这里是找index.html文件。

创建模板

在views文件夹下,创建一个index.html文件。

这里我们只是简单测试下,所以在body标签里,添加一个h3标签

<!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>Document</title>
  </head>
  <body>
    <h3>这是首页</h3>
  </body>
</html>
启动服务器
app.listen(3000, () => {
  console.log("服务器启动");
});

我们在cmd里用node运行index.js文件

0001.png

我们看到,服务启动了。

接着,我们在浏览器里,访问localhost:3000

0002.png

我们可以看到,index.html页面被返回给客户端,并且渲染到页面了。

小结

本小节主要介绍了koa-views中间件,同时通过一个简单的小示例,来演示了怎么在koa里使用koa-views中间件。 使用koa-views中间件后,会往context上下文对象上添加render方法。我们调用render方法,找到对应的模板文件,渲染好后,返回给到客户端

最后,放上自己比较喜欢的一句诗句:

千淘万漉虽辛苦,吹尽狂沙始到金 - 唐 刘禹锡《浪淘沙》