Code Your First API With Node.js and Express: Set Up the Server

How to Set Up an Express API Server in Node.js

In the previous tutorial, we learned what the REST architecture is, the six guiding constraints of REST, how to understand HTTP request methods and their response codes, and the anatomy of a RESTful API endpoint.

在上一教程中，我们了解了REST体系结构是什么，REST的六个指导约束，如何理解HTTP请求方法及其响应代码以及RESTful API端点的结构

In this tutorial, we'll set up a server for our API to live on. You can build an API with any programming language and server software, but we will use Node.js, which is the back-end implementation of JavaScript, and Express, a popular, minimal framework for Node.

在本教程中，我们将为我们的API设置一个服务器。您可以使用任何编程语言和服务器软件来构建API，但是我们将使用Node.js（它是JavaScript的后端实现）和Express（一种流行的，最小的Node框架）

Installation

Our first prerequisite is making sure Node.js and npm are installed globally on the computer. We can test both using the -v flag, which will display the version. Open up your command prompt and type the following.

我们的第一个前提条件是确保在计算机上全局安装Node.js和npm。我们可以使用-v标志进行测试，这将显示版本。打开命令提示符，然后键入以下内容

node -v && npm -v
v12.16.3
6.14.5

Your versions may be slightly different than mine, but as long as both are there, we can get started.

您的版本可能与我的版本略有不同，但是只要两者都存在，我们就可以开始

Let's create a project directory called express-api and move to it.

让我们创建一个名为express-api的项目目录并移至该目录中

mkdir express-api && cd express-api

Now that we're in our new directory, we can initialize our project with the init command.

现在我们位于新目录中，我们可以使用init命令初始化项目

npm init

This command will prompt you to answer some questions about the project, which you can choose to fill out or not. Once the setup is complete, you'll have a package.json file that looks like this:

该命令将提示您回答有关项目的一些问题，您可以选择是否填写。设置完成后，您将获得一个如下所示的package.json文件

{
  "name": "express-api",
  "version": "1.0.0",
  "description": "Node.js and Express REST API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tania Rascia",
  "license": "MIT"
}

Now that we have our package.json, we can install the dependencies required for our project. Fortunately we don't require too many dependencies, just these four listed below.

现在我们有了package.json，我们可以安装项目所需的依赖项了。幸运的是，我们不需要太多的依赖关系，只需下面列出的这四个即可

• body-parser: Body parsing middleware.
• express: A minimalist web framework we'll use for our server.
• mysql: A MySQL driver.
• We'll use the install command followed by each dependency to finish setting up our project.

npm install body-parser express mysql request

This will create a package-lock.json file and a node_modules directory, and our package.json will be updated to look something like this:

{
  "name": "express-api",
  "version": "1.0.0",
  "description": "Node.js and Express REST API",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Tania Rascia",
  "license": "MIT",
  "dependencies": {
  "dependencies": {
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "mysql": "^2.18.1"
  }
}

Setting Up an HTTP Server

Before we get started on setting up an Express server, we will quickly set up an HTTP server with Node's built-in http module, to get an idea of how a simple server works.

在开始设置Express服务器之前，我们将使用Node的内置http模块快速设置HTTP服务器，以了解简单服务器的工作方式

Create a file called hello-server.js. Load in the http module, set a port number (I chose 3001), and create the server with the createServer() method.

创建一个名为hello-server.js的文件。加载http模块，设置端口号（我选择3001），然后使用createServer（）方法创建服务器

// Build a server with Node's HTTP module
const http = require('http');
const port = 3001;
const server = http.createServer()

In the introductory REST article, we discussed what requests and responses are with regards to an HTTP server. We're going to set our server to handle a request and display the URL requested on the server side, and display a Hello, server! message to the client on the response side.

在介绍REST文章中，我们讨论了关于HTTP服务器的请求和响应。我们将设置服务器以处理请求，并在服务器端显示请求的URL，并显示Hello, server！消息发送给响应方的客户端

server.on('request', (request, response) => {
    console.log(`URL: ${request.url}`);
    response.end('Hello, server!')
})

Finally, we will tell the server which port to listen on, and display an error if there is one.

最后，我们将告诉服务器要侦听哪个端口，如果有错误，则显示错误消息

// Start the server
server.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);

    console.log(`Server is listening on port ${port}`)
})

Now, we can start our server with node followed by the filename.

node hello-server.js

You will see this response in the terminal:

Server is listening on port 3001

To check that the server is actually running, go to https://localhost:3001/ in your browser's address bar. If all is working properly, you should see Hello, server! on the page. In your terminal, you'll also see the URLs that were requested.

要检查服务器是否正在实际运行，需在浏览器的地址栏中访问https:// localhost:3001/ 如果一切正常，您应该看到“Hello, Server”！在页面上。在您的终端中，您还将看到所请求的URL

URL: /
URL: /favicon.ico

If you were to navigate to http://localhost:3001/hello, you would see URL: /hello.

如果要导航到http://localhost:3001/hello，则会看到URL: /hello

We can also use cURL on our local server, which will show us the exact headers and body that are being returned.

我们还可以在本地服务器上使用cURL，它将向我们显示返回的确切标头和正文

curl -i http://localhost:3001
HTTP/1.1 200 OK
Date: Tue, 19 May 2020 07:52:41 GMT
Connection: keep-alive
Content-Length: 13

Hello, server!

If you close the terminal window at any time, the server will go away.

Now that we have an idea of how the server, request, and response all work together, we can rewrite this in Express, which has an even simpler interface and extended features.

现在我们已经知道服务器，请求和响应如何协同工作，我们可以在Express中重写它，它具有更简单的界面和扩展功能

Setting Up an Express Server

We're going to create a new file, app.js, which will be the entry point to our actual project. Just like with the original http server, we'll require a module and set a port to start.

我们将创建一个新文件app.js，它将作为我们实际项目的入口。就像原始的http服务器一样，我们将需要一个模块并设置一个端口以启动

Create an app.js file and put the following code in it.

// Require packages and set the port
const express = require('express');
const port = 3002;
const app = express();

Now, instead of looking for all requests, we will explicitly state that we are looking for a GET request on the root of the server (/). When / receives a request, we will display the URL requested and the "Hello, Server!" message.

现在，代替查找所有请求，我们将明确声明要在服务器根目录(/)上查找GET请求。当/收到请求时，我们将显示请求的URL和“Hello, Server!”信息

app.get('/', (request, response) => {
    console.log(`URL: ${request.url}`);
    response.send('Hello, Server!');
});// Require packages and set the port
const express = require('express');
const port = 3002;
const app = express();

Finally, we'll start the server on port 3002 with the listen() method.

最后，我们将使用listen()方法在端口3002上启动服务器

// Start the server
const server = app.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);

    console.log(`Server listening on port ${server.address().port}`);
});

We can start the server with node app.js as we did before, but we can also modify the scripts property in our package.json file to automatically run this specific command.

我们可以像以前一样使用node app.js启动服务器，但是我们也可以修改package.json文件中的scripts属性以自动运行此特定命令。

"scripts": {
  "start": "node app.js"
},

Now we can use npm start to start the server, and we'll see our server message in the terminal.

现在我们可以使用npm start启动服务器，并且我们将在终端中看到服务器消息

Server listening on port 3002

If we run a curl -i on the URL, we will see that it is powered by Express now, and there are some additional headers such as Content-Type.

如果我们在URL上运行curl -i，我们将看到它现在由Express提供支持，并且还有一些其它标头，例如Content-Type

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 42
ETag: W/"2a-jN04K6SYZAwM3XlMMD6uSsxeom4"
Date: Tue, 19 May 2020 08:03:33 GMT
Connection: keep-alive

Add Body Parsing Middleware

In order to easily deal with POST and PUT requests to our API, we will add body parsing middleware. This is where our body-parser module comes in. body-parser will extract the entire body of an incoming request and parse it into a JSON object that we can work with.

为了轻松处理对我们的API的POST和PUT请求，我们将添加主体解析中间件。这是我们的body-parser模块进入的地方。body-parser将提取传入请求的整个主体，并将其解析为我们可以使用的JSON对象

We'll simply require the module at the top of our file. Add the following require statement to the top of your app.js file.

我们只需要在文件顶部添加模块即可。将以下require语句添加到app.js文件的顶部

const bodyParser = require('body-parser');

Then we'll tell our Express app to use body-parser, and look for JSON.

// Use Node.js body parsing middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
        extended: true
}));

Also, let's change our message to send a JSON object as a response instead of plain text.

另外，让我们更改消息以发送JSON对象作为响应而不是纯文本

response.send({message: 'Node.js and Express REST API'});

Following is our full app.js file as it stands now.

// Require packages and set the port
const express = require('express');
const port = 3002;
const bodyParser = require('body-parser');
const app = express();

// Use Node.js body parsing middleware
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true,
}));

app.get('/', (request, response) => {
    response.send({
        message: 'Node.js and Express REST API'}
    );
});

// Start the server
const server = app.listen(port, (error) => {
    if (error) return console.log(`Error: ${error}`);

    console.log(`Server listening on port ${server.address().port}`);
});

If you send a curl -i to the server, you'll see that the header now returns Content-Type: application/json; charset=utf-8.

Set Up Routes

So far, we only have a GET route to the root (/), but our API should be able to handle all four major HTTP request methods on multiple URLs. We're going to set up a router and make some fake data to display.

到目前为止，我们只有到根（/）的GET路由，但是我们的API应该能够处理多个URL上的所有四个主要HTTP请求方法。我们将设置一个路由器，并显示一些假数据

Let's create a new directory called routes, and a file within called routes.js. We'll link to it at the top of app.js.

让我们创建一个名为routes的新目录，以及一个名为routes.js的文件。我们将在app.js顶部链接到它

const routes = require('./routes/routes');

Note that the .js extension is not necessary in the require. Now we'll move our app's GET listener to routes.js. Enter the following code in routes.js.

请注意，require中不需要.js扩展名。现在，我们将应用程序的GET侦听器移动到route.js。在routes.js中输入以下代码。

const router = app => {
    app.get('/', (request, response) => {
        response.send({
            message: 'Node.js and Express REST API'
        });
    });
}

Finally, export the router so we can use it in our app.js file.

// Export the router
module.exports = router;

In app.js, replace the app.get() code you had before with a call to routes():

在app.js中，用对routes()的调用替换之前的app.get()代码：

routes(app);

You should now be able to go to http://localhost:3002 and see the same thing as before. (Don't forget to restart the server!)

您现在应该可以访问http:// localhost:3002并看到与以前相同的内容。（不要忘记重新启动服务器！）

Once that is all set up and working properly, we'll serve some JSON data with another route. We'll just use fake data for now, since our database is not yet set up.

一旦一切都设置好并且可以正常工作，我们将通过另一条路线提供一些JSON数据。由于我们的数据库尚未建立，我们现在仅使用伪数据

Let's create a users variable in routes.js, with some fake user data in JSON format.

让我们在route.js中创建一个users变量，其中包含一些JSON格式的虚假用户数据

const users = [{
        id: 1,
        name: "Richard Hendricks",
        email: "richard@piedpiper.com"
    },
    {
        id: 2,
        name: "Bertram Gilfoyle",
        email: "gilfoyle@piedpiper.com"
    }
];

We'll add another GET route to our router, /users, and send the user data through.

我们将向路由器/ users添加另一个GET路由，并通过发送用户数据

app.get('/users', (request, response) => {
    response.send(users);
});

After restarting the server, you can now navigate to http://localhost:3002/users and see all our data displayed.

重新启动服务器后，您现在可以导航到http://localhost:3002/users并查看显示的所有数据

Note: If you do not have a JSON viewer extension on your browser, I highly recommend you download one, such as JSONView for Chrome. This will make the data much easier to read!

Visit our GitHub Repo to see the completed code for this post and compare it to your own.

Conclusion

In this tutorial, we learned how to set up a built-in HTTP server and an Express server in node, route requests and URLs, and consume JSON data with get requests.

在本教程中，我们学习了如何在node中设置内置HTTP服务器和Express服务器，路由请求和URL，以及通过get请求使用JSON数据

In the final installment of the RESTful API series, we will hook up our Express server to MySQL to create, view, update, and delete users in a database, finalizing our API's functionality.

在RESTful API系列的最后一部分中，我们将Express服务器连接到MySQL，以在数据库中创建，查看，更新和删除用户，从而最终确定API的功能