by Pau Pavón

通過保羅·帕文(PauPavón)

使用Express在Node.js中實現非常基本的路由 (Really, really basic routing in Node.js with Express)

The goal of this story is to briefly explain how routing works in Express while building a simple — very simple — Node app.

這個故事的目的是簡要解釋路由在Express中的工作原理，同時構建一個簡單的Node應用程序。

We’ll also use EJS, a template engine that “lets you generate HTML markup with plain JavaScript,” according to their website. Basically, it’ll let us create HTML pages that can vary depending on the request the client makes. We won’t be using this last feature, but it’s a great one. At the end of this article, you’ll find some resources where you can learn more.

根據他們的網站 ，我們還將使用EJS，這是一個模板引擎，“可以讓您使用純JavaScript生成HTML標記”。 基本上，它使我們可以創建HTML頁面，該頁面可以根據客戶端的請求而有所不同。 我們不會使用最后一項功能，但這是一個很棒的功能。 在本文的結尾，您將找到一些資源，可以在其中了解更多信息。

什么是路由？ (以兩行表示) (What is routing? (In 2-ish lines))

First of all, let’s take a quick (really quick) glance at what routing is:

首先，讓我們快速了解一下什么是路由：

somewebsite.com/someroute

somewebsite.com/someroute

It’s basically taking the user (or some data) from one place to another. That place is the route. I told you I was going to make it quick.

基本上是將用戶(或一些數據)從一個地方轉移到另一個地方。 那個地方就是路線。 我告訴過你，我要盡快。

創建項目 (Creating the project)

We’re going to build a fancy website to learn how routing works in Express. Check it out:

我們將建立一個精美的網站，以了解Express中路由的工作方式。 看看這個：

Cool, right? But it’s everything we need for the moment.

酷吧？ 但這就是我們目前需要的一切。

First, let’s create the project and install the packages. Just run the following in the command line:

首先，讓我們創建項目并安裝軟件包。 只需在命令行中運行以下命令：

npm install express

npm安裝快遞

npm install ejs

npm安裝ejs

You can additionally add the dash dash save (I write — as “dash” because Medium automatically formats it, and it doesn’t look well for this purpose) to save it in your package.json file. But how this works is a story for another day.

您還可以添加破折號保存 (我寫為“ 破折號”，因為中號會自動對其進行格式化，因此看起來不太理想)，以將其保存在package.json文件中。 但是這如何工作又是另一回事了。

Then we will require Express and set the view engine to EJS in our app.js file as follows:

然后，我們將需要Express并在app.js文件中將視圖引擎設置為EJS，如下所示：

var express = require('express');var app = express();app.set('view engine', 'ejs');

We’ll also include the following line so our app listens for requests:

我們還將包括以下行，以便我們的應用程序偵聽請求：

app.listen(3000);

處理GET請求 (Handling GET requests)

Congratulations, everything is ready to handle requests! There are several types of requests in HTTP, but we’ll only be handling GET requests, which are used to retrieve data from the server. To handle this kind of request in Express, we use the following method:

恭喜，一切準備就緒，可以處理請求！ HTTP中有幾種類型的請求，但是我們僅處理GET請求，這些請求用于從服務器檢索數據。 為了在Express中處理這種請求，我們使用以下方法：

app.get('/about', function(req, res) {  res.render('about');});

Let’s take a look at what’s happening here. We’re telling our server that, whenever someone types in somewebsite.com/about, we want to fire a function. That function takes two parameters, req (request) and res (response). Using the response object, we render the about page.

讓我們看看這里發生了什么。 我們告訴服務器，每當有人鍵入somewebsite.com/about時 ，我們都想觸發一個函數。 該函數有兩個參數， req (請求)和res (響應)。 使用響應對象，我們呈現about頁面 。

For this to work, we’ll have to create a page named about.ejs in HTML. We’ll also place it in a folder called views inside our project folder. This is the folder where Express will look to render the view. Here you have the mega-complex about page we’ll be using for this example:

為此，我們必須在HTML中創建一個名為about.ejs的頁面。 我們還將其放置在項目文件夾中名為“ 視圖”的文件夾中。 這是Express將在其中呈現視圖的文件夾。 在這里，您將獲得關于此示例的大型復雜頁面：

Nice! But, what if the user doesn’t type in any route? Just like we do most of the times, somewebsite.com? Well, really easy. Change /about to just /, and render whatever page you like:

真好！ 但是，如果用戶不輸入任何路徑怎么辦？ 就像我們大多數時候一樣， somewebsite.com嗎？ 好吧，真的很容易。 將/ about更改為/，然后呈現您喜歡的任何頁面：

app.get('/', function(req, res) {  res.render('home');});

處理不存在的路線 (Handling non-existing routes)

But what if someone types in a route that doesn’t exist? We probably don’t want a default error page to show up. Instead, we want a custom, cool error page.

但是，如果有人輸入不存在的路線怎么辦？ 我們可能不希望顯示默認錯誤頁面。 相反，我們需要一個自定義的很酷的錯誤頁面。

Well, the good news is that it’s extremely easy to make one with Express. Just replace the route parameter in the get method with an asterisk and render your own error page like so:

好吧，好消息是，使用Express制作一個極其容易。 只需用星號替換get方法中的route參數，然后呈現自己的錯誤頁面，如下所示：

app.get('*', function(req, res) {  res.render('error');});

試試吧！ (Trying it out!)

Finally, let’s run our server from the command line (assuming the server is named app.js)

最后，讓我們從命令行運行服務器(假設服務器名為app.js )

node app

節點應用

and see if it works! Let’s type in the name of our server (localhost, as it’s a local server running on our computer) and the port (3000 in this case) in our browser:

看看是否可行！ 讓我們在瀏覽器中輸入服務器的名稱( localhost ，因為它是在計算機上運行的本地服務器)和端口(在本例中為3000 )：

localhost:3000

本地主機：3000

Amazing!

驚人！

進一步閱讀 (Further reading)

You can learn everything you need to know about routing in the Express guide, and there’s a lot of handy things in the EJS website as well!

您可以在Express指南中了解有關路由所需的所有知識，并且EJS網站上還有很多方便的事情！

I hope this article was helpful for you. If it was, please leave a comment and clap it up!

希望本文對您有所幫助。 如果是這樣，請發表評論并鼓掌！

Happy coding… Or happy routing, I guess!

祝您編程愉快... 或祝您路由愉快！

翻譯自: https://www.freecodecamp.org/news/really-really-basic-routing-in-nodejs-with-express-d7cad5e3f5d5/