javascript基本_JavaScript中的基本路由

javascript基本

Routing Using Express and EJS

使用Express和EJS进行路由

While working on my latest single page JavaScript application this week, I ran in to the need for a way to handle client-side routing. While there are many routing frameworks that exist for this purpose, I decided on using Express server since I had some familiarity with it and because of the extensive documentation available for it.

本周在开发我最新的单页JavaScript应用程序时，我遇到了需要一种方法来处理客户端路由。 尽管存在许多用于此目的的路由框架，但由于对它有一定的了解，并且由于有大量可用的文档 ，因此我决定使用Express服务器。

Routing refers to the way in which client requests to particular endpoints are handled in an application. It’s how we are able to go from one view on a website to another, depending on what URL we type in to the browser. The route definition is comprised of a path and a HTTP request method and takes the following basic structure:

路由是指在应用程序中处理对特定端点的客户端请求的方式。 这就是我们能够从网站上的一个视图转到另一个视图的方法，具体取决于我们在浏览器中键入的URL。 路由定义由路径和HTTP请求方法组成，并采用以下基本结构：

app.METHOD(PATH, HANDLER)

where the handler is the function that gets executed when there is a route match.

其中的处理程序是在路由匹配时执行的功能。

If we wanted to define a home route for our app at the path of ‘/’, we could write a simple route such as the one below:

如果我们想在'/'路径中为我们的应用程序定义一条本地路线，我们可以编写一条简单的路线，例如以下路线：

app.get('/', (req, res) => {
  res.send('Hello World!')
}); 

Before we go any further, let’s take a step back and look into what Express is and how to set it up.

在继续之前，让我们退后一步，了解什么是Express以及如何设置它。

Express Server

Express服务器

So what exactly is Express? Express is a web application framework for Node.js that allows us to structure and organize our web applications easily and efficiently. In order to install Express globally, we run the following command: npm install express — save .

那么Express到底是什么？ Express是Node.js的Web应用程序框架，它使我们能够轻松高效地构建和组织Web应用程序。 为了全局安装Express，我们运行以下命令： npm install express — save 。

Within our project, we would then create a server.js file, wherein which we initialize the Express server and configure our routes. A basic example of this is:

然后，在我们的项目中，我们将创建一个server.js文件，在其中我们初始化Express服务器并配置路由。 一个基本的例子是：

const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('Home Page')
});
app.get('/log', (req, res) => {
  res.send('Log Page')
})
app.listen(3000, () => console.log('Server Started'))

The above code sets up and initializes the Express server and defines two routes: the home page at ‘/’ and a log page at ‘/log’. We can then spin up our server by running node server.js . If we then go to localhost:3000, we should be taken to the home page (which at the moment just displays “Home Page”). If we go to localhost:3000/log, we should see “Log Page”.

上面的代码设置并初始化Express服务器，并定义了两条路径：主页位于'/'和日志页面位于'/log' 。 然后，我们可以通过运行node server.js启动服务器。 如果然后转到localhost：3000，则应转到主页(此刻仅显示“主页”)。 如果转到localhost：3000 / log，则应该看到“日志页”。

Using EJS for Templating

使用EJS进行模板制作

Next, we’ll want to set up a template engine to use with Express, which allows us to use static template files in our application. When the application is run, the template engine then transforms the template into an HTML file, which is what the client sees on their screen. There are various template engines compatible with Express, and for this project, I’ve chosen to use EJS. EJS lets us generate HTML markup using vanilla JavaScript.

接下来，我们要设置一个与Express一起使用的模板引擎 ，该引擎允许我们在应用程序中使用静态模板文件。 运行应用程序时，模板引擎会将模板转换为HTML文件，这是客户端在其屏幕上看到的内容。 有许多与Express兼容的模板引擎，对于这个项目，我选择使用EJS 。 EJS使我们可以使用原始JavaScript生成HTML标记。

To install EJS, run npm install ejs — save . We will then have to set our view engine to EJS in our server.js file:

要安装EJS，请运行npm install ejs — save 。 然后，我们必须在server.js文件中将视图引擎设置为EJS：

app.set('view engine', 'ejs');

To make sure our template files render correctly, we’ll then need to create a views directory within our project — this is where we’ll hold our template files.

为了确保模板文件正确呈现，我们需要在项目内创建一个views目录-这是我们保存模板文件的位置。

For styling, we’ll want to create a public folder in our root directory and then place our stylesheet(s) in that folder. Don’t forget to link the stylesheet to your EJS template by placing the link element in the head.

对于造型，我们希望在我们的根目录下创建一个公共文件夹，然后把我们的样式表(s)表示文件夹中。 不要忘记通过将link元素放在头部将样式表链接到EJS模板。

To render our views with the HTML markup, we can use the render method in our controller action. Within our server.js file, we would replace the code we had written with the following:

要使用HTML标记呈现视图，我们可以在控制器动作中使用render方法。 在server.js文件中，我们将用以下内容替换编写的代码：

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

This tells our application to render the ‘home’ template when it receives a GET request to ‘/’.

这告诉我们的应用程序在收到对'/'的GET请求时呈现“ home”模板。

Wrapping Up

结语

And that’s it!

就是这样！

Here is how my server.js file looks like:

这是我的server.js文件的样子：

const express = require('express');
const app = express();// sets the view engine to EJSapp.set('view engine', 'ejs');// directs Express to the public folder for 
stylesheetsapp.use(express.static("public"));// controller actionsapp.get('/', (req, res) => {
   res.render('home')
});app.get('/log', (req, res) => {
   res.render('log')
})app.listen(3000, () => console.log('Server Started'))

翻译自: https://medium.com/swlh/basic-routing-in-javascript-fb3e51a3a57b

javascript基本