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/