📜  你好世界 expressjs - Javascript (1)

📅  最后修改于: 2023-12-03 15:22:07.186000             🧑  作者: Mango

你好世界 expressjs - Javascript

Express.js 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供了一系列强大的特性和工具,方便开发者快速构建高效、可靠、易于扩展的 web 应用程序。本文将向大家介绍基于 Express.js 开发 web 应用程序的基础知识,并提供一些实用的代码片段和资源,帮助读者快速开发出自己的 web 应用程序,同时深入了解 Express.js 的精髓。

Express.js 简介
什么是 Express.js

Express.js 是 Node.js 平台上的一个 web 应用开发框架,它提供了一系列内置的特性和工具,方便开发者快速构建基于 HTTP、HTTPS、WebSocket 等协议的 web 应用程序。它简单灵活、易于扩展,并已成为 Node.js 后端开发的首选框架之一。

Express.js 的优势
  • 灵活性和易于扩展:Express.js 提供了一个基础框架,可以根据需求选择各种插件和功能库进行扩展。
  • 广泛的插件生态:Express.js 拥有庞大的插件生态圈,其中包括了许多与数据库(如 MongoDB)、模板引擎(如 EJS、Pug)、身份验证等相关的插件和中间件。
  • 清晰的路由规则:Express.js 提供了简洁而明了的路由规则,可以轻松地将 HTTP 请求与路由映射到适当的处理程序上。
  • 轻松处理 HTTP 请求和响应:Express.js 提供了内置的请求和响应对象,简化了开发人员的编码复杂度。
一个简单的 Express.js 应用程序
安装和运行

在开始之前,需要确保已经安装了 Node.js 和 npm。然后,执行以下命令安装 Express.js:

npm install express --save

接着,我们创建一个 index.js 文件,并在其中添加以下代码:

const express = require('express');

const app = express();

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

app.listen(3000, () => {
  console.log('应用程序正在监听 3000 端口...');
});

最后,在命令行中执行以下命令:

node index.js

打开浏览器,并访问 http://localhost:3000,应该可以看到类似以下内容的页面:

Hello World!
代码解读

代码中,我们首先引入了 Express.js 模块并创建一个 app 对象。然后,我们定义了一个 GET 路由,用于处理根路径(/)的请求。GET 方法的第一个参数是路径,第二个参数是回调函数,其中 req 参数代表 HTTP 请求对象,而 res 参数代表 HTTP 响应对象。

在回调函数中,我们使用 res.send() 方法向客户端返回一条消息。最后,我们调用 app.listen() 方法监听本地的 3000 端口,当有新的请求到达时,Express.js 会自动将其分配给正确的路由处理程序。

中间件
什么是中间件

在 Express.js 中,中间件是一种非常重要的概念。它充当了在请求到达处理程序之前和响应发送回客户端之后的中介角色。中间件可以让我们对请求与响应进行处理,以便进行日志记录、身份验证、错误处理等各种操作。

中间件的使用

Express.js 提供了一个非常简单的方式来定义中间件。可以将中间件函数添加到 app 对象上,以便在请求处理程序之前执行,例如:

const express = require('express');

const app = express();

app.use((req, res, next) => {
  console.log('有新的请求到达,路径是:', req.url);
  next();
});

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

app.listen(3000, () => {
  console.log('应用程序正在监听 3000 端口...');
});

代码中,我们使用 app.use() 方法添加了一个中间件函数,该函数用于记录 HTTP 请求的路径信息。next 参数表示调用下一个中间件函数或路由处理程序。

路由控制
路由的定义

在 Express.js 中,可以使用 app 对象定义各种路由规则。路由规则基于 HTTP 方法(如 GET、POST、PUT、DELETE 等),并具有路径和回调函数(也称为路由处理程序)。

app.METHOD(PATH, CALLBACK);

其中,METHOD 可以是任意 HTTP 方法(get、post、put、delete 等),PATH 是 URL 路径(可以包含参数),CALLBACK 是路由处理程序函数。

动态路径

在 Express.js 中,可以定义动态路径来捕获 URL 中的参数。例如:

app.get('/user/:id', (req, res) => {
  res.send('User ID: ' + req.params.id);
});

在代码中,我们定义了一个 GET 路由,其路径为 /user/:id。其中,:id 表示一个动态的参数。当使用此路由时,参数将包含在 req 对象的 params 属性中,并通过 req.params.id 访问。

处理 POST 请求

在 Express.js 中,可以使用 app.post() 方法处理 HTTP POST 请求。示例代码如下:

app.post('/users', (req, res) => {
  res.send('User created successfully!');
});

在代码中,我们定义了一个 POST 路由,其路径为 /users,并指定回调函数以处理请求。

模板引擎
什么是模板引擎

在 web 应用程序中,模板引擎充当了显示服务器端数据的角色。模板引擎将服务器端的数据与 HTML 模板集成在一起,并生成要发送到客户端的最终 HTML 页面。

EJS 模板引擎

EJS(Embedded JavaScript)是一个简单而灵活的模板引擎,可以与 Express.js 配合使用。EJS 的优点是易于使用,可以轻松集成服务器端数据到 HTML 页面中。

安装 EJS:

npm install ejs --save

我们使用 EJS 创建一个简单的模板,然后将其渲染到 HTML 页面上。下面是一个示例代码:

const express = require('express');
const app = express();
const ejs = require('ejs');

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/', function (req, res) {
  res.render('index', {
    title: '欢迎使用 Express.js 和 EJS',
    message: '这是一个演示页面'
  });
});

app.listen(3000, function () {
  console.log('应用程序正在监听 3000 端口...');
});

在代码中,我们引入了 EJS 模块,并将其设置为 express 对象的视图引擎。然后,我们定义了一个 GET 路由,其处理程序通过 res.render() 方法来渲染视图模板。对于 index 视图模板,我们将传递一个包含标题和消息的对象。最后,我们将应用程序监听在本地的 3000 端口上。

总结

本文向大家介绍了 Express.js 的基础知识,包括如何安装和运行 Express.js 应用程序,如何定义各种路由规则和中间件函数,以及如何使用 EJS 模板引擎渲染视图。通过本文的学习,相信读者已经可以熟练地使用 Express.js 框架开发自己的 web 应用程序了。当然,Express.js 拥有非常丰富的功能和用例,并且不断发展和演进,因此我们还需要不断学习和提高,以确保能够深入了解和充分利用这个强大的工具。