Koa.js的第一步

2020年12月30日11:12:13 发表评论 36 次浏览

本文概述

在进行网络开发时, 你很有可能会选择一个框架来启动并运行后端API。除了Node具有用于构建Web服务器的良好内置机制外, 另一方面, 框架还通过提供诸如中间件, 路由机制等出色的功能来促进此工作。

表现到目前为止领导人在Node.js领域的Web开发方面。它也是最古老的, 创建于2009年, 这也许是使其变得足够成熟而受到社区欢迎的原因之一。

Koa.js是另一个获得越来越多空间的绝佳选择。但是他们实际上不是竞争对手。 Koa由Express背后的同一个团队设计, 这是前端社区的普遍趋势, 天野, 例如, 其创建者与Node背后的想法相同。

Koa被创建为在编码方面更小, 更快, 更具表达力。在开发Web API时, Express很棒, 但是它缺乏表现力, 仍然导致我们提交一些可以避免的样板代码, 我们将在几分钟后在实践中看到。

它的设计着重于异步函数, 使它们更简单, 因此你可以操纵回调并更轻松地处理代码流的错误。

在本文的结尾, 我们将提供一个应用程序, 该应用程序使用框架的一些出色功能从基于Koa的API中检索信息。模拟数据将从假数据生成网站中检索, 该网站称为https://randomuser.me/。所以, 让我们开始吧!

设置和配置

像Node宇宙中的所有其他内容一样, 设置过程既快速又容易。确保你有节点已安装, 为你的示例开发选择一个首选的文件夹, 然后在其中运行以下命令:

npm init
npm i koa koa-router koa-ejs axios

填写命令行将询问你有关Node项目的信息。我将所有内容都留为空白, 但随时可以告知你所需的信息。

前三个依赖关系与Koa相关, 是框架核心的第一个依赖关系。

koa-router与Express路由系统等效。是的, 它包含在第二个包中, 需要单独将其添加到package.json中。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

Koa.js的第一步1

Koa-ejs是一个奖励。这是一种Koa中间件, 它增加了对所有功能的支持ejs项目。这样, 我们可以将JavaScript模板嵌入到后端Web应用程序中, 而无需客户端项目。换句话说, 它呈现了我们网页的HTML输出。

最后, 著名的Axios库在这里, 因为我们需要调用一个外部API, randomuser.me。

现在, 继续在项目的根目录下创建一个新的index.js文件。将以下代码放入其中:

const koa = require("koa");
const path = require("path");
const render = require("koa-ejs");
const koaRouter = require("koa-router");
const axios = require("axios");

const app = new koa();
const router = new koaRouter();

render(app, {
    root: path.join(__dirname, "views"), layout: "index", viewExt: "html", });

router.get("hello", "/", (ctx) => {
    ctx.body = "<h1>Hello World, Koa folks!</h1>";
});

router.get("users", "/users", async (ctx) => {
    const result = await axios.get("https://randomuser.me/api?results=5");

    return ctx.render("index", {
        users: result.data.results, });
});

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

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`running on port ${PORT}`));

此清单的前几行与我们刚刚安装的依赖项的导入有关。主Koa及其路由器对象都需要通过new运算符进行实例化。

来自koa-ejs的render函数用于描述我们的ejs模板系统(尚待构建)的参数。它接收的第一个参数是最近创建的Koa应用程序对象, 第二个参数是另一个对象, 其中包含诸如放置ejs模板的根文件夹, 布局主文件以及这些文件的扩展名(HTML)之类的信息。这是最基本的配置, 但是你可以找到其他可用参数这里.

接下来, 我们创建了两个端点。第一个只是映射到根端点的简单Hello World, 而第二个则稍微复杂一些, 它返回附加到模板输入的随机用户列表。

注意在Koa和Express上路由端点有多么相似。第一个参数要求端点的规范名称, 第二个参数要求映射到该端点的路径字符串。主要区别在于处理响应处理的回调函数(第三个参数)内, 该函数由ctx对象Koa Context操纵。

Koa上下文将Node的请求和响应对象都包含在一个对象中, 这简化了方法, 与Express的方法不同。由于它们的使用频率很高, 因此Koa创作者发现最好将它们组合在一起:

app.use(async ctx => {
  ctx; // This is the context
  ctx.request; // This is a Koa request
  ctx.response; // This is a Koa response
});

但是, 无需始终单独调用请求或响应对象来访问其属性。例如, 如果你要访问请求的正文, 请直接执行以下操作:

ctx.body; // It delegates to Koa’s ctx.request

为了方便起见, Koa神奇地将任何财产的访问权委派给它们各自的等效物。

Koa还允许你决定是否要使用异步功能。让我们以第二个端点为例。请注意, 我们正在其回调函数中调用一个外部URL, 以获取随机用户数组并将其直接发送到我们的koa-ejs模板(我们将在几分钟内构建它)。

与基于承诺的Express相比, 这是一种更清洁的方法。借助Express, 我们将拥有类似的东西:

app.get('/users', (req, res, next) => {
  axios.get("https://randomuser.me/api?results=5").then((result) => {
    res.status(200).json(result.data.results);
  }).catch((err) => next(err));
});

乍看起来似乎还可以, 因为示例很简单。但是, 如果你的开发变得更加复杂(例如, 从数据库中添加数据检索), 事情就会变得棘手:

app.get('/users', (req, res, next) => {
  MyDatabaseObj.findByPk(myPk).then(data => 
    if (!data) {
      return res.status(404).send({});
    }

    axios.get("https://randomuser.me/api?results=5&id=" + data.id).then((result) => {
      res.status(200).json(result.data.results);
    }).catch((err) => next(err));    
  );
});

这种风格可能导致开发人员嵌套许多难以维护的代码块。

回到index.js代码, 其余部分与你对Express所做的非常相似。 Koa中间件必须通过以下方式声明采用()方法。要启动并运行服务器, 只需通过以下方式启动它听()方法。非常相似, 不是吗?

模板

现在, 我们已经完成了API的创建, 接下来进入ejs模板。首先, 你需要在项目的根目录下创建一个名为views的新文件夹。在其内部, 创建名为index.html的主文件。

由于将模板系统分解成最小的部分并不是本文的重点, 因此我们将坚持使用单个文件作为模板。这是你应该添加到其中的代码:

<html>
    <head>
        <title>First Steps with Koa</title>
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        />
    </head>
    <body>
        <div class="container">
            <div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
                <h1 class="display-4">Koa.js</h1>
                <p class="lead">
                    A simple list of users retrieved from
                    <a href="https://randomuser.me/">randomuser.me</a>
                </p>
            </div>

            <div class="list-group">
                <% users.forEach( function(user) { %>
                <div class="list-group-item">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">
                            <%= user.name.title %> <%= user.name.first %> <%= user.name.last
                            %>
                        </h5>
                        <small
                            >Registered at: <%= new
                            Date(user.registered.date).toISOString().split('T')[0] %></small
                        >
                    </div>
                    <p class="mb-1">
                        <strong>Address:</strong>
                        <%= user.location.street.number %> <%= user.location.street.name
                        %>, <%= user.location.city %> <%= user.location.postcode %> - <%=
                        user.location.country %>
                    </p>
                    <small>Phone: <%= user.phone %></small>
                </div>
                <% }); %>
            </div>
        </div>
    </body>
</html>

请注意, 它是纯HTML, 因此这里没有新内容。在开头的head标签内, 我们添加了引导程序的CSS样式表。将样式输入示例页面会有所帮助。

koa-ejs库利用表达式将HTML和JavaScript代码分开。

每当你要打开新的JavaScript代码块时, 请使用<%...%>操作员。否则, 如果你想直接在HTML中打印一些值, 请使用<%=…%>操作员。请记住, 就像其他任何JavaScript代码块一样, 你的块需要正确打开和关闭, 就像你通常在JavaScript代码文件中一样。

继续看一下我们正在进行的迭代。它是纯JavaScript代码, 非常简单。

现在, 让我们对其进行测试。通过发出以下命令来运行应用程序节点index.js在控制台上输入命令, 然后输入http://本地主机:3000 /浏览器中的地址。这将产生以下输出:

世界,您好,koa伙计们!

然后, 继续并将地址更改为http:// localhost:3000 / users。你可能会在每次刷新浏览器时看到更改的用户列表。


错误呢?

错误是Web应用程序中非常重要的部分。尽管你始终可以在每个端点上单独处理它们, 就像Express一样, Koa还允许你创建集中式中间件来处理应用程序错误。

查看以下代码片段:

app.use(async (ctx, next) => {
    try {
        await next();
    } catch (err) {
        console.error(err);
        ctx.body = "Ops, something wrong happened:<br>" + err.message;
    }
});

必须将该中间件放置在所有其他中间件之前, 以便你可以捕获和记录你的应用可能遇到的任何类型的错误, 包括与其他中间件相关的错误。

如果你有多个映射端点的JavaScript文件, 则可以将此中间件集中在一个位置, 并将其导出到所有中间件。

日志呢?

是的, Koa还提供了另一个软件包, 该软件包处理用于开发和调试的更细粒度的日志记录机制。

为此, 你需要首先安装适当的依赖项:

npm i koa-logger

并将以下内容添加到index.js中:

// At the beginning of the file
const Logger = require("koa-logger");

...

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

确保记录仪中间件也是第一个添加的中间件, 否则, Koa不会监听你的路由和HTTP调用中的日志。

重新启动应用程序并再次访问端点时, 你可能会看到类似于以下内容的日志:

Koa.js的第一步2

总结

这只是Koa.js的功能的简要介绍, 以及如何在代码组织方面使事情变得更清晰。要了解更多好处, 必须使用Sequelize等通用框架进行数据库处理, 使用Jasmine进行测试等, 或者也许可以将其包含在当前项目中进行测试。只需创建一个叉子就可以了!

Koa还为CSRF和JWT(JSON Web令牌), 访问日志, 字符集转换, 缓存, 缩小器和压缩器等许多其他功能提供支持。请确保参考官方GitHub项目有关这些的更多信息。祝好运!

你是否要添加新的JS库以提高性能或构建新功能?如果他们做相反的事情怎么办?

毫无疑问, 前端变得越来越复杂。在向应用程序添加新的JavaScript库和其他依赖项时, 你将需要更多可见性, 以确保用户不会遇到未知问题。

日志火箭是一个前端应用程序监视解决方案, 可让你重播JavaScript错误, 就好像它们发生在你自己的浏览器中一样, 以便你可以更有效地对错误做出反应。

LogRocket仪表板免费试用横幅

https://notlogy.com/signup/

日志火箭无论使用哪种框架, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。你可以汇总并报告问题发生时应用程序所处的状态, 而不用猜测为什么会发生问题。 notlogy还监视你的应用程序的性能, 报告诸如客户端CPU负载, 客户端内存使用情况等指标。

自信地建立-免费开始监控.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: