使用Enide Studio 2014 IDE进行Express JS路由

最新推荐文章于 2024-08-09 15:52:11 发布

cunchi4221

最新推荐文章于 2024-08-09 15:52:11 发布

阅读量308

点赞数

文章标签： vue java python nodejs javascript ViewUI

原文链接：https://www.journaldev.com/8282/express-js-routings-with-enide-studio-2014-ide

版权

This post is a continuation post of my previous post “Express JS WebApplication with Enide Studio 2014 IDE”. In my previous post, we have discussed about “How to create a Express JS WebApplication with Enide Studio 2014 IDE”. We have just created and discussed about some code snippets. We have not discussed about Express JS Routings.

这篇文章是我之前的文章“ 使用Enide Studio 2014 IDE的Express JS WebApplication”的续篇。在我之前的文章中，我们讨论了“如何使用Enide Studio 2014 IDE创建Express JS WebApplication”。我们刚刚创建并讨论了一些代码片段。我们还没有讨论Express JS路由。

We are going to discuss Express JS Routings in this post in details. Before reading this post “Express JS WebApplication with Enide Studio 2014 IDE”, please refer my previous post and create Express JS WebApplication.

我们将在本文中详细讨论Express JS路由。在阅读本文“使用Enide Studio 2014 IDE的Express JS WebApplication”之前，请参考我之前的文章并创建Express JS WebApplication。

创建Express JS路由的简要步骤 (Brief Steps To Create Express JS Routings)

Here I’m going to give you the steps to follow to create Routings in Express JS WebApplication. First, We will discuss each step in detail with Enide Studio 2014 IDE Default “Node:Express JS Project”. Then we will discuss about how to create our own Express JS Routings in coming sections.

在这里，我将为您提供在Express JS WebApplication中创建路由的步骤。首先，我们将详细讨论Enide Studio 2014 IDE默认值“ Node：Express JS Project”中的每个步骤。然后，在接下来的部分中，我们将讨论如何创建自己的Express JS路由。

Create Routings
创建Craft.io路线
Create Views
创建视图
Load all newly created Routing files into Variables in app.js
将所有新创建的路由文件加载到app.js中的变量中
Map Client Requested URLs to Routings in app.js
将客户端请求的URL映射到app.js中的路由
Start Application and Test Routings
开始应用程序和测试路由

探索默认的Express JS路由 (Explore Default Express JS Routings)

When we create Express JS Sample WebApplication using Enide Studio 2014 IDE, it creates a “app.js” file at Project root directory. This is the starting point to access Express JS Application.

当我们使用Enide Studio 2014 IDE创建Express JS Sample WebApplication时，它将在Project根目录中创建一个“ app.js”文件。这是访问Express JS应用程序的起点。

First load “express” module into our application cache and create Express JS Application as shown below
首先将“ express”模块加载到我们的应用程序缓存中，然后创建Express JS Application，如下所示

var express = require('express');
var app = express();

It places all Express JS Routing files under “${EXPRESSJS_PROJECT_ROOT_DIR}\routes” folder
它将所有Express JS路由文件放在“ $ {EXPRESSJS_PROJECT_ROOT_DIR} \ routes”文件夹下
Our “expressjs” project contains default two routing files: index.js and users.js

我们的“ expressjs”项目包含默认的两个路由文件：index.js和users.js
It places all Express JS View files under “${EXPRESSJS_PROJECT_ROOT_DIR}\views” folder
它将所有Express JS View文件放在“ $ {EXPRESSJS_PROJECT_ROOT_DIR} \ views”文件夹下
As Default “Node JS: Express JS Project” uses JADE as default Template Engine, it creates jades as views at this location.
This project contains default three views: index.jade, layoug.jade and error.jade

由于默认的“ Node JS：Express JS Project”使用JADE作为默认的模板引擎，因此会在此位置创建jaade作为视图。
该项目包含默认的三个视图：index.jade，layoug.jade和error.jade

NOTE:- JADE is simple and very powerful Template Engine Framework to Design and Develop HTML pages very easily. Please refer some online tutorials on this Framework. I will try to give one to two posts on this JADE framework after sometime.

注意： JADE是一个简单且功能强大的模板引擎框架，可非常轻松地设计和开发HTML页面。请参考有关此框架的一些在线教程。一段时间后，我将尝试在此JADE框架上发表一两个帖子。
Explore Routings in index.js
在index.js中探索路由
index.js

index.js
```
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;
```
Code Explanation

代码说明
1. Line 1, Loaded Express JS Module into our application cache and stored it into a variable “express”
  第1行，将Express JS模块加载到我们的应用程序缓存中，并将其存储到变量“ express”中
2. Line 2, use Router class to create a router object. We use “express” variable to create Router object: ” express.Router()”
  第2行，使用Router类创建一个路由器对象。我们使用“ express”变量创建Router对象：“ express.Router（）”
3. Line 5-7, using “router” object, we have created a function to handle HTTP GET Requests
  第5-7行，使用“路由器”对象，我们创建了一个函数来处理HTTP GET请求
4. Line 6, it is very important because here we wrote our Routings. When Client or WebBrowser sends request using “/” (That is https://localhost:3000/) using HTTP GET Request method, then it comes to this function and route the controller to the “index” view. It is automatically mapped to “index.jade” and populate “title” attribute with ‘Express’ value (Please refer below index.jade file).
  第6行，这非常重要，因为在这里我们编写了路由。当客户端或WebBrowser使用HTTP GET Request方法使用“ /”（即https：// localhost：3000 /）发送请求时，它就涉及到此功能并将控制器路由到“索引”视图。它会自动映射到“ index.jade”，并用“ Express”值填充“ title”属性（请参阅下面的index.jade文件）。
5. index.jade
  
  玉器
```
extends layout

block content
  h1= title
  p Welcome to #{title}
```
  That’s why when we access our application using “https://localhost:3000/”, we got the following output showing this “title” attribute value as ‘Express’.
  
  这就是为什么当我们使用“ https：// localhost：3000 /”访问我们的应用程序时，我们得到以下输出，将该“ title”属性值显示为“ Express”。
  
  NOTE:- I guess you all are already familiar with Spring MVC or Struts Frameworks. Even in these frameworks also, we do similar kind of Routings right.
  
  注意：-我想大家都已经熟悉Spring MVC或Struts框架。即使在这些框架中，我们也可以进行类似的路由选择。
6. Line 9, we have exported our router object to be used in other modules in the Same or different Projects.
  第9行，我们已导出路由器对象，以在相同或不同项目中的其他模块中使用。
Explore Routings in users.js
在users.js中探索路由
users.js

users.js
```
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});

module.exports = router;
```
It is just duplication of index.js file but it does NOT map to any view here. We are just sending a response text ‘respond with a resource’ to the Client or Browser.

它只是index.js文件的副本，但此处未映射到任何视图。我们只是向客户端或浏览器发送“带有资源响应”的响应文本。

If we access the same application with “https://localhost:3000/users”, then we will get the following output on Browser:

如果我们使用“ https：// localhost：3000 / users”访问同一应用程序，则将在浏览器上获得以下输出：
Explore app.js
探索app.js
Once we have developed both Views and Routes, now it’s time to map them. We need to map them in app.js file. This is very important and staring point for a Node:Express JS application. When we execute “npm start” command from Command Prompt at Project Root Directory, it searches for “app.js” file. Then it loads all project files into Server and waits for Client Requests.

一旦我们开发了视图和路线，现在是时候将它们映射。我们需要将它们映射到app.js文件中。对于Node：Express JS应用程序，这是非常重要和凝视的重点。当我们从项目根目录的命令提示符处执行“ npm start”命令时，它将搜索“ app.js”文件。然后它将所有项目文件加载到服务器中并等待客户端请求。

Now we will see how to map these files in “app.js” file in step by step.

现在，我们将逐步了解如何将这些文件映射到“ app.js”文件中。
1. First step is loading our Routing files into variables as shown below
  第一步是将我们的路由文件加载到变量中，如下所示
2. ```
var routes = require('./routes/index');
var users = require('./routes/users');
```
  Like loading other Node JS Module into our Project Cache, We use require() call to load our Routing files into variables .
  
  就像将其他Node JS模块加载到项目缓存中一样，我们使用require（）调用将路由文件加载到变量中。
3. Map URLs to these Routing variables as shown below using “app” Express JS Application Object.
  如下所示，使用“ app” Express JS Application Object将URL映射到这些路由变量。
4. ```
app.use('/', routes);
app.use('/users', users);
```
  That means, when Client or WebBroswer sends request to our “Node:Express JS” Application, then application maps those URLs to Hadlers as shown below
  
  这意味着，当Client或WebBroswer向我们的“ Node：Express JS”应用程序发送请求时，该应用程序会将这些URL映射到Hadlers，如下所示
  
  https://localhost:3000/
  
  https：//本地主机：3000 /
```
https://localhost:3000/    --> It maps to app.use('/', routes);
app.use('/', routes);     --> It in turn maps to './routes/index.js'
Then finally, it executes Functions defined in index.js
Prepare Views and send that Response back to the Client
```
  Similarly, https://localhost:3000/users
  
  同样， https：// localhost：3000 / users
```
https://localhost:3000/users    --> It maps to app.use('/users', users);
app.use('/users', users);     --> It in turn maps to './routes/users.js'
Then finally, it executes Functions defined in users.js
Prepare Views and send that Response back to the Client
```
创建新的Express JS路由 (Create New Express JS Routings)

So far we have explored about Default Routings. To make it clear, we will create some new Routings.
We are going to provide the following CRUD operations Routings on USER domain object. We are not going to write much logic to perform any DB logic. We are just displaying some message.

到目前为止，我们已经探讨了默认路由。为了清楚起见，我们将创建一些新的路由。
我们将在USER域对象上提供以下CRUD操作路由。我们不会编写太多逻辑来执行任何数据库逻辑。我们只是显示一些消息。
```
/create    ----> createUser.js
/select    ----> selectUser.js
/delete    ----> deleteUser.js
/update    ----> updateUser.js
```
Please follow these steps to “Create New Express JS Routings”:

请按照以下步骤“创建新的Express JS路由”：
- Please create new Routing Files under “${EXPRESSJS_PROJECT_ROOT_DIR}\routes” folder
  请在“ $ {EXPRESSJS_PROJECT_ROOT_DIR} \ routes”文件夹下创建新的路由文件
- createUser.js
  
  createUser.js
```
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('User Created Successfully.');
});

module.exports = router;
```
selectUser.js

selectUser.js
```
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('Retrieved User Details Successfully.');
});

module.exports = router;
```
deleteUser.js

deleteUser.js
```
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('User Deleted Successfully.');
});

module.exports = router;
```
updateUser.js

updateUser.js
```
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('User Updated Successfully.');
});

module.exports = router;
```
Create New View files
创建新的视图文件
In real-time projects, we need to create some HTML Page or JADE templates or any Views for each Routings. However, for simplicity We are not going to write much logic.
We are just using some useful message from Routing Function handler as shown in above step.

在实时项目中，我们需要为每个路由创建一些HTML页面或JADE模板或任何视图。但是，为简单起见，我们不会编写太多逻辑。
我们只是使用来自路由功能处理程序的一些有用消息，如上一步所示。
Load all newly created Routing files into Variables as shown below in app.js
如以下app.js所示，将所有新创建的路由文件加载到变量中

var createUser = require('./routes/createUser');
var selectUser = require('./routes/selectUser');
var deleteUser = require('./routes/deleteUser');
var updateUser = require('./routes/updateUser');

Map Client Requested URLs to Routings in app.js
将客户端请求的URL映射到app.js中的路由

app.use('/', routes);
app.use('/users', users);
app.use('/create', createUser);
app.use('/select', selectUser);
app.use('/delete', deleteUser);
app.use('/update', updateUser);

Now its time to start our Express JS WebApplication to test our newly created Routings.
现在该启动Express JS WebApplication来测试我们新创建的路由。
Open command prompt at our project ROOT Directory and execute the following command:

在我们的项目“根目录”中打开命令提示符，然后执行以下命令：
```
npm start
```
Access the URLs and observe the output console.
访问URL并观察输出控制台。
Access this url: https://localhost:3000/create

访问此URL： https：// localhost：3000 / create

Access this url: https://localhost:3000/select

访问此URL： https：// localhost：3000 / select

Similarly, we can test all our Express JS Routings.

同样，我们可以测试所有Express JS路由。

That’s it about Express JS Routings. By using Enide Studio 2014 IDE Default “Node:Express JS Project”, We can update or add our requirements and can implement very big and real-time application.

关于Express JS Routings就是这样。通过使用Enide Studio 2014 IDE默认的“ Node：Express JS Project”，我们可以更新或添加需求，并可以实现非常大的实时应用程序。

Try to implement one real-time application.

尝试实现一个实时应用程序。

Please drop a comment if you face any issues.

如果您遇到任何问题，请发表评论。

翻译自: https://www.journaldev.com/8282/express-js-routings-with-enide-studio-2014-ide