如何使用 Koa 构建“Hello World”应用程序

介绍

Koa是由Express背后的团队创建的一个新的 Web 框架。它旨在成为现代且更简约的 Express 版本。

它的一些特点是它支持和依赖新的 JavaScript 功能，例如生成器和async/await。Koa 也不附带任何中间件，尽管它可以使用自定义和现有插件进行扩展。

在本文中，您将了解有关 Koa 框架的更多信息并构建一个应用程序以熟悉其功能和理念。

先决条件

如果你想跟随这篇文章，你需要：

注意：本教程已从 Koa 1.0 修改为 Koa 2.0。请参阅迁移文档以更新您的 1.0 实现。

本教程已通过 Node v15.14.0、npmv7.10.0、koav2.13.1、@koa/routerv10.0.0 和koa-ejsv4.3.0 验证。

步骤 1 — 设置项目

首先，为您的项目创建一个新目录。这可以通过在终端中复制并运行以下命令来完成：

  • mkdir koa-example

注意：您可以为您的项目指定任何名称，但本文将koa-example用作项目名称和目录。

此时，您已经创建了项目目录koa-example。导航到新创建的项目目录。

  • cd koa-example

然后，从目录内部初始化您的 Node 项目。

  • npm init -y

运行该npm init命令后，您将拥有一个package.json具有默认配置的文件。

接下来，运行此命令来安装 Koa：

  • npm install koa@2.13.1

您的应用程序现在可以使用 Koa 了。

步骤 2 — 创建 Koa 服务器

首先，创建index.js文件。然后，使用您选择的代码编辑器，打开index.js文件并添加以下代码行：

索引.js
'use strict';

const Koa = require('koa');
const app = new Koa();

app.use(ctx => {
  ctx.body = 'Hello World';
});

app.listen(1234);

在上面的代码中，您创建了一个在端口 上运行的 Koa 应用程序1234。您可以使用以下命令运行应用程序：

  • node index.js

并访问 上的应用程序http://localhost:1234。

第 3 步 – 添加路由和视图渲染

如前所述，Koa.js 不附带任何包含的中间件，并且与它的前身 Express 不同，它默认不处理路由。

为了在你的 Koa 应用中实现路由，你将在 Koa 中安装一个用于路由的中间件库Koa Router。

打开终端窗口并运行以下命令：

  • npm install @koa/router@10.0.0

注意：以前koa-router是推荐的包，但@koa/router现在是官方支持的包。

要在您的应用程序中使用路由器，请修改您的index.js文件：

索引.js
'use strict';

const Koa = require('koa');
const Router = require('@koa/router');

const app = new Koa();
const router = new Router();

router.get('koa-example', '/', (ctx) => {
  ctx.body = 'Hello World';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(1234);

此代码在您的应用程序 ( http://localhost:1234)的基本 URL 上定义一个路由，并将此路由注册到您的 Koa 应用程序。

有关 Koa.js 应用程序中路由定义的更多信息，请访问 Koa 路由器库文档。

如前所述，Koa 是一个简约的框架，因此，要使用模板引擎实现视图渲染，您必须安装一个中间件库。有几个库可供选择，但在本文中，您将使用Koa ejs。

打开终端窗口并运行以下命令：

  • npm install koa-ejs@4.3.0

接下来，修改您的index.js文件以使用以下代码段注册您的模板：

索引.js
'use strict';

const Koa = require('koa');
const Router = require('@koa/router');
const render = require('koa-ejs');
const path = require('path');

const app = new Koa();
const router = new Router();

render(app, {
  root: path.join(__dirname, 'views'),
  layout: 'index',
  viewExt: 'html',
  cache: false,
  debug: true
});

router.get('koa-example', '/', (ctx) => {
  ctx.body = 'Hello World';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(1234);

在模板注册中，您定义了视图文件的根目录、视图文件的扩展名和基本视图文件（其他视图扩展）。

现在您已经注册了模板中间件，请修改您的路由定义以呈现模板文件：

索引.js
// ...

router.get('koa-example', '/', (ctx) => {
  let koalaFacts = [];

  koalaFacts.push({
    meta_name: 'Color',
    meta_value: 'Black and white'
  });

  koalaFacts.push({
    meta_name: 'Native Country',
    meta_value: 'Australia'
  });

  koalaFacts.push({
    meta_name: 'Animal Classification',
    meta_value: 'Mammal'
  });

  koalaFacts.push({
    meta_name: 'Life Span',
    meta_value: '13 - 18 years'
  });

  koalaFacts.push({
    meta_name: 'Are they bears?',
    meta_value: 'No'
  });

  return ctx.render('index', {
    attributes: koalaFacts
  });
})

// ...

您的基本路线呈现在index.html目录中找到的views文件。

现在，创建此目录和文件。打开index.html并添加以下代码行：

视图/index.html
<h2>Koala - a directory Koala of attributes</h2>
<ul class="list-group">
  <% attributes.forEach( function(attribute) { %>
    <li class="list-group-item">
      <%= attribute.meta_name %> - <%= attribute.meta_value %>
    </li>
  <% }) %>
</ul>

现在，当运行应用程序并在 Web 浏览器中观察它时，将显示以下内容：

Output
Koala - a directory Koala of attributes
Color - Black and white
Native Country - Australia
Animal Classification - Mammal
Life Span - 13 - 18 years
Are they bears? - No

有关使用koa-ejs模板中间件的更多选项，请访问库文档。

第 4 步 – 处理错误和响应

Koa 通过在入口点文件的早期定义错误中间件来处理错误。必须尽早定义错误中间件，因为只有在错误中间件之后定义的中间件中的错误才会被捕获。

以您的index.js文件为例，对代码进行以下更改：

索引.js
'use strict';

const Koa = require('koa');
const Router = require('@koa/router');
const render = require('koa-ejs');
const path = require('path');

const app = new Koa();
const router = new Router();

app.use(async (ctx, next) => {
  try {
    await next()
  } catch(err) {
    console.log(err.status)
    ctx.status = err.status || 500;
    ctx.body = err.message;
  }
});

// ...

此代码块将捕获在您的应用程序执行期间抛出的任何错误。

您可以通过在您定义的路由的函数体中抛出错误来测试这一点：

索引.js
// ...

router.get('error', '/error', (ctx) => {
  ctx.throw(500, 'internal server error');
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(1234);

现在，当运行应用程序并/error在 Web 浏览器中观察时，将显示以下内容：

Output
internal server error

Koa 响应对象通常嵌入在其上下文对象中。使用路由定义，让我们展示一个设置响应的示例：

索引.js
// ...

router.get('status', '/status', (ctx) => {
  ctx.status = 200;
  ctx.body   = 'ok';
})

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(1234);

现在，当运行应用程序并/status在 Web 浏览器中观察时，将显示以下内容：

Output
ok

您的应用程序现在可以处理错误和响应。

结论

在本文中，您简要介绍了 Koa 以及如何在 Koa 项目中实现一些常见功能。Koa 是一个极简且灵活的框架，可以扩展到比本文展示的更多的功能。由于它与 Express 的未来相似性，有人甚至将其描述为 Express 5.0 的精神。

觉得文章有用？

点个广告表达一下你的爱意吧 ！😁