hapi.js

介绍 ( Introduction )

Separation of Concerns is the in thing these days, and with the introduction of RESTful architecture, it has been a cakewalk; however, new developers often face the dilemma of choosing their weapons. The frameworks, and the suite of tools they will use to develop their next killer application.

关注点分离是在赚钱的事 ，并引进REST风格的建筑，它一直是小菜一碟; 但是，新开发人员经常面临选择武器的困境。 他们将用来开发其下一个杀手级应用程序的框架和工具套件。

Not long ago, I was one of them, and then I came across this excellent talk by Eran Hammer from WalmartLabs, and decided that Hapi.js was the way to go. The problem with Hapi.js is that it is simple and complicated at the same time. Honestly, I find it cleaner and easier than Express.js, and you will see why I say that once we're done with this segment.

不久前，我是其中一个，然后我碰上了这个优秀的谈话由伊兰锤从WalmartLabs ，并决定Hapi.js是要走的路。 Hapi.js的问题在于，它既简单又复杂。 老实说，我发现它比Express.js更加干净和容易，您将明白为什么我们在完成本部分后会这么说。

我们的目标 ( Our goal )

Everyone hates a tutorial which just contains some incoherent code, and expects you to follow along. And hence, we will actually make something; by the end of this series, we will have a fully functional application to add pictures of cute cats. (Really, this is the kind of application I want to work on.)

每个人都讨厌只包含一些不连贯代码的教程，希望您能继续学习。 因此，我们实际上会做出一些事情； 到本系列结束时，我们将拥有一个功能齐全的应用程序来添加可爱猫咪的照片。 （确实，这是我要处理的那种应用程序。）

Since covering everything in one long post will be anything but smart (and because we love a "modular apporach"), I have broken this tutorial in 2 parts. In sequence, following will be the outline:

由于在一篇长篇文章中涵盖所有内容，因此除了聪明之外（而且因为我们喜欢“模块化方法”），我将本教程分为两部分。 依次为以下内容：

• Part 1 - a gentle introduction to Hapi.js; we set up the environment and all the dependencies; simple Hello World; 第1部分 -Hapi.js的简要介绍； 我们设置环境和所有依赖项； 简单的Hello World；
• Part 2 - creating a fully blown RESTful API using Hapi.js第2部分 -使用Hapi.js创建完整的RESTful API

[Update] The second part is finished and up at [https://scotch.io/tutorials/making-a-restful-api-with-hapi-js](this link).

[ 更新 ]第二部分已完成并在[ https://scotch.io/tutorials/making-a-restful-api-with-hapi-js]中 （此链接）。

After deployment, we will have a fully functional and consumable API with all the goodies. So, what are we waiting for for? Let's get started.

部署后，我们将拥有一个具有所有功能的功能齐全且可使用的API。 那么，我们还等什么呢？ 让我们开始吧。

什么是Hapi.js？ ( What is Hapi.js? )

Hapi (pronounced "happy") is a web framework for building web applications, APIs and services. It's extremely simple to get started with, and extremely powerful at the same time. The problem arises when you have to write perfomant, maintable code.

Hapi（发音为“ happy”）是用于构建Web应用程序，API和服务的Web框架。 入门非常简单，同时功能非常强大。 当您必须编写性能主表代码时，就会出现问题。

开始吧 ( Let's Start )

With that said, let's dive straight in. But before we get to coding, let me explain what our development environment will look like.

话虽如此，让我们直接学习。但是在开始编码之前，让我解释一下我们的开发环境。

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

I am a fan of ES6, and really, I can't write code in the old ES5 syntax. I will show you a really quick way to get started with ES6 without the transpiling part. That's great: it means that you don't have to run gulp build:development everytime you make a change.

我是ES6的粉丝，实际上，我不能使用旧的ES5语法编写代码。 我将向您展示一种无需转码部分即可快速入门ES6的快速方法。 太好了：这意味着您每次进行更改时都不必运行gulp build:development 。

We'll use Babel for on-the-fly transpilation of the ES6 code. I say on the fly simply because there is no direct output; if you're familiar with CoffeeScript's require hook, it'll be just like that. If you are not, then don't worry because this is really, really simple.

我们将使用Babel即时翻译ES6代码。 我之所以这样说是因为没有直接输出。 如果您熟悉CoffeeScript的require钩子，它将像这样。 如果您不是，那就不用担心，因为这确实非常简单。

目录结构 ( Directory Structure )

For starting out, we'll have a fairly simple directory structure with just one src folder, and all of the program files will reside in that folder. In the root folder, we'll have all other build toolchain files.

首先，我们将有一个非常简单的目录结构，其中只有一个src文件夹，所有程序文件都将驻留在该文件夹中。 在根文件夹中，我们将拥有所有其他构建工具链文件。

Start by finding the directory of your choice, and point your terminal to it. I love the command line, so I do:

首先找到您选择的目录，然后将终端指向该目录。 我喜欢命令行，所以我这样做：

mkdir getting-started-with-hapi-js-part-1 && cd $_
mkdir src
touch .babelrc .gitignore .jshintrc src/server.js

Notice the $_. This means, use the last argument of the last command. So, this will turn to cd getting-started-with-hapi-js-part-1 An interesting shorthand.

注意$_ 。 这意味着use the last argument of the last command 。 因此，这将变成cd getting-started-with-hapi-js-part-1一个有趣的简写。

Let's examine the dotfiles I have created:

让我们检查一下我创建的dotfile：

• .gitignore -- tell Git what all to ignore;.gitignore告诉Git所有要忽略的东西;
• .babelrc -- tell the BabelJS transpiler which presets and/or plugins to use;.babelrc告诉BabelJS转译器要使用哪些预设和/或插件;
• .jshintrc -- tell our linter (JSHint) what all we expect from it..jshintrc告诉我们的.jshintrc （ JSHint ）我们期望得到什么。

With that done, execute npm init in the root directory. Fill in all the details; it should look something like the following:

完成后，在根目录中执行npm init 。 填写所有详细信息； 它应该类似于以下内容：

{"name": "getting-started-with-hapi-js-part-1","version": "1.0.0","description": "Getting started with Hapi.js -- Part 1","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"repository": {"type": "git","url": "git+https://github.com/labsvisual/getting-started-with-hapi-js-part-1.git"},"author": "Shreyansh Pandey","license": "MIT","bugs": {"url": "https://github.com/labsvisual/getting-started-with-hapi-js-part-1/issues"},"homepage": "https://github.com/labsvisual/getting-started-with-hapi-js-part-1#readme"
}

Oh, before I forget, all of the code is available at the GitHub repository.

哦，在我忘记之前，所有代码都可以在GitHub存储库中找到 。

Now, open your favourite text editor in the root directory. Your directory structure should look something like the following:

现在，在根目录中打开您喜欢的文本编辑器。 您的目录结构应类似于以下内容：

Perfect. Now, let's install the dependencies. We'll go with the real basics which are required to spin up a simple Hello World along with some decoration to that. Right now, we'll just install babel-core, babel-preset-es2015, and hapi.

完善。 现在，让我们安装依赖项。 我们将使用真正的基础知识，这些基本知识是启动一个简单的Hello World以及一些装饰的基础。 现在，我们将仅安装babel-core ， babel-preset-es2015和hapi 。

For those that don't know, Babel is a transpiler that helps us convert ES6 JS code to ES5 code.

对于那些不知道的人， Babel是一个编译器 ，可以帮助我们将ES6 JS代码转换为ES5代码。

Run npm install --save babel-core babel-preset-es2015 hapi in the root directory, and wait for the dependencies to finish installing.

在根目录中运行npm install --save babel-core babel-preset-es2015 hapi ，然后等待依赖项完成安装。

Till then, let's prepare our .babelrc, .gitignore, and our .jshintrc files. The configuration here is really simple, but you can always tweak it to your requirement.

到那时，让我们准备.babelrc ， .gitignore和.jshintrc文件。 这里的配置确实很简单，但是您可以随时根据需要进行调整。

In the .babelrc file, we need to tell Babel we that are using the es-2015 preset. A preset is a set of transformations which something should go through so that it's converted to something else. Here, for example, the es-2015 preset includes all the transforms to convert the fancy ES6 functions to their respective ES5 equivalant.

在.babelrc文件中，我们需要告诉Babel我们正在使用es-2015预设。 预设是一组应经过的转换，以便将其转换为其他转换。 例如，此处的es-2015预设包括所有用于将精美ES6函数转换为其等效ES5的转换。

Add the following to the .babelrc file:

将以下内容添加到.babelrc文件中：

{"presets": [ "es2015" ]
}

Yeah, really! That's it.

是的，真的！ 而已。

In the .gitignore file, we want to exclude the node_modules folder, so adding node_modules to that file will do the job.

在.gitignore文件中，我们要排除node_modules文件夹，因此将node_modules添加到该文件即可。

Lastly, .jshintrc needs to know just one thing: we're using ES2015. For that, add the following snippet to the file:

最后， .jshintrc需要知道一件事：我们正在使用ES2015。 为此，将以下代码段添加到文件中：

{"esnext": true
}

And that's it. We're done with our initial configuration. Now let's write some code.

就是这样。 我们完成了初始配置。 现在让我们编写一些代码。

引导ES6 (Bootstrapping for ES6)

Lastly, we need to create a bootstrap.js file which will require the babel-core's registering module, and the main module from our code: in this case server.js. And, we'll also create a very simple shortcut in the package.json file so that we can just run npm start to fire up our Hapi.js project.

最后，我们需要创建一个bootstrap.js文件，该文件将require babel-core的注册模块以及代码中的主要模块：在本例中为server.js 。 并且，我们还将在package.json文件中创建一个非常简单的快捷方式，以便我们可以运行npm start来npm start Hapi.js项目。

Start by creating a bootstrap.js file in the root folder, and add the following two lines:

首先在根文件夹中创建bootstrap.js文件，然后添加以下两行：

require( 'babel-core/register' );
require( './src/server' );

The first line calls for the babel register module, which then loads the server module. This helps Babel in transpiling on the fly. Simple, eh?

第一行调用babel寄存器模块，然后加载server模块。 这有助于Babel即时进行转码。 简单吧？

使用package.json变得懒惰 (Getting Lazy with package.json)

Node has a concept of scripts; you can define them in the scripts section of the package.json file. Modify the existing scripts section to look something like this:

节点具有脚本的概念； 您可以在package.json文件的scripts部分中定义它们。 修改现有scripts部分，使其类似于以下内容：

..."scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "node bootstrap.js"
},
...

Now, run npm start in the command line, and your output should resemble something like below:

现在，在命令行中运行npm start ，您的输出应类似于以下内容：

> getting-started-with-hapi-js-part-1@1.0.0 start /Users/labsvisual/Documents/Scotchio-Articles/getting-started-with-hapi-js-part-1
> node bootstrap.js

Nothing happened? Well, that's because we don't have any code, don't worry. However, if there is some error, be sure to check and see if you have followed all the steps outlines here.

什么都没有发生？ 好吧，那是因为我们没有任何代码，不用担心。 但是，如果出现错误，请确保检查并确认是否遵循此处列出的所有步骤。

条款介绍 ( Introduction to the Terms )

Before we get Hapi-specific, let's have a look at the terms the framework throws at us. Don't worry, there are only three main terms.

在获得特定于Hapi的内容之前，让我们看一下框架向我们抛出的术语。 不用担心，只有三个主要术语。

• server -- the root object which contains everything about the web application;server -包含有关Web应用程序所有内容的根对象;
• connection -- an instance of a connection, usually a host and a port where the requests will come to;connection - connection的实例，通常是请求将到达的host和port ;
• route -- a URI within a connection telling the server which function to execute when;route -连接中的URI，告诉服务器何时执行哪个功能;

创建一个简单的Hello World服务器 ( Create a Simple Hello World server )

Alright, now we come to the best part: creating the actual server. In this part, we'll only create a few example routes to see what all Hapi has to offer; we'll modify this in the next parts and soon, it'll start looking like our application.

好了，现在我们来讨论最好的部分：创建实际的服务器。 在这一部分中，我们将仅创建一些示例路由来查看Hapi必须提供的所有内容。 我们将在接下来的部分中对此进行修改，并且很快，它将开始看起来像我们的应用程序。

So, start by importing Hapi into the server.js file:

因此，首先将Hapi导入server.js文件：

import Hapi from 'hapi';

Perfect. Now, we'll create a new server instance, and attach a new connection to it. Add the following bit to create a new server instance:

完善。 现在，我们将创建一个新的服务器实例，并为其添加一个新的连接。 添加以下位以创建新的服务器实例：

const server = new Hapi.Server();server.connection( {port: 8080
});

Now, I have skipped the host field because that's a known bug. I can't find a link right now, but I will update the post once I find the official link to the bug.

现在，我跳过了host字段，因为这是一个已知的错误。 我现在找不到链接，但是一旦找到该错误的官方链接，我就会更新该帖子。

Cool! Now, run your server by typing npm start from the command line.

凉！ 现在，通过从命令行输入npm start来运行服务器。

And yet again, there is no output. That's because we haven't yet started the server, nor have we defined a route. Let's define a simple hello route:

再一次，没有输出。 那是因为我们还没有启动服务器，也没有定义路由。 让我们定义一个简单的hello路径：

server.route({method: 'GET',path: '/hello',handler: ( request, reply ) => {reply( 'Hello World!' );}});

The block here is self-explanatory, apart from maybe the handler. The handler is the function which is executed when the specific path is hit. So, in this case, the anonymous function will be executed if the user visits the path /hello.

除了处理程序之外，这里的块是不言自明的。 处理程序是在命中特定路径时执行的功能。 因此，在这种情况下，如果用户访问路径/hello则将执行匿名函数。

The request parameter represents the entire request: it has the query strings, the URL parameters, and the payload (if it's a POST/PUT request; we'll see this later).

request参数代表整个请求：它具有查询字符串，URL参数和有效负载（如果它是POST / PUT请求；我们将在后面看到）。

The reply object helps in sending a reply back to the client. Here, we're just sending back a simple Hello World! reply. Nothing special.

reply对象有助于将回复发送回客户端。 在这里，我们只是发送回一个简单的Hello World! 回复。 没什么特别的。

Lastly, let's write the code to start the server.

最后，让我们编写代码以启动服务器。

server.start(err => {if (err) {// Fancy error handling hereconsole.error( 'Error was handled!' );console.error( err );}console.log( `Server started at ${ server.info.uri }` );});

The server.info property contains an object which contains the following information:

server.info属性包含一个对象，该对象包含以下信息：

• created - the time the server instance was created;created-创建服务器实例的时间；
• started - the time the server instance was started;启动-服务器实例启动的时间；
• host - the hostname of the machine;host-机器的主机名；
• port - the port to which the server the server is listening ;port-服务器正在侦听的服务器的端口；
• protocol - the protocol on which the server is operating;协议-服务器操作所依据的协议；
• id - a unique ID of the server instance;id-服务器实例的唯一ID；
• uri - the complete URI of the current server instance;uri-当前服务器实例的完整URI；
• address - the address the server is bound to 地址-服务器绑定到的地址

Now, run npm start; the console will say something like

现在，运行npm start ； 控制台会说类似

Server started at http://Shreyanshs-MacBook-Pro.local:8080

If that's the case, then point your browser to localhost:8080/hello and hit enter. You'll see a page something like the following:

如果是这种情况，则将浏览器指向localhost:8080/hello然后按Enter。 您会看到类似以下内容的页面：

If you see errors like the following:

如果看到以下错误：

Error was handled!
{[Error: listen EADDRINUSE 0.0.0.0:8080]code: 'EADDRINUSE',errno: 'EADDRINUSE',syscall: 'listen',address: '0.0.0.0',port: 8080 }

It means that some application is using port 8080, try a different port and your application should work flawlessly.

这意味着某些应用程序正在使用端口8080，尝试使用其他端口，则您的应用程序应该可以正常工作。

You can play around with it, but when you are done, hit Ctrl + C to exit out of the server.

您可以尝试使用它，但是完成后， Ctrl + C退出服务器。

结论 ( Conclusion )

I guess that got your feet wet, and you are excited to try out this exciting framework. In the upcoming tutorials, we'll have a look at all the goodies in the request object; try out different request verbs, and use Paw to test our URLs.

我想这会让您感到困惑，您很高兴尝试这个令人兴奋的框架。 在接下来的教程中，我们将了解request对象中的所有优点。 试用不同的请求动词，然后使用Paw测试我们的URL。

If you get stuck, be sure to check the API documentation; they have some really good explanations there.

如果您卡住了，请务必查看API文档 ； 他们在那里有一些非常好的解释。

翻译自: https://scotch.io/tutorials/getting-started-with-hapi-js

hapi.js