如何基于 Express.js 开发一个完整的Web应用
随着现代Web应用的普及,基于Express.js开发完整的Web应用对前端开发人员来说变得越来越重要。在本文中,我们将通过深入挖掘Express.js的核心功能,为您提供介绍如何基于Express.js开发完整的Web应用的指南。
1.安装和配置Express.js
首先,我们需要安装Express.js,使用npm安装的命令如下:
- --- ------- -------
安装完成后,你需要在你的应用程序中引入Express.js,让我们来编写一个简单的应用程序:
----- ------- - ------------------- ----- --- - ---------- ---------------- -- -- - ---------------------- -- ---- ------- ---
在这个示例中,我们引入了Express.js并创建了一个名为“app”的应用程序实例。我们还定义了一个端口号,该应用程序在该端口号上侦听传入的请求。
当你运行程序的时候,你应该可以在你的终端中看到“Listening on port 3000”这个 log 输出,这表示你的程序运行成功。
2.定义路由
下一步,我们要为我们的Web应用程序定义路由,以便当某个请求到达时我们可以返回对应的页面或数据。路由的定义跟你的应用程序实例挂钩,这是通过调用 app 对象上的方法来完成的:get、post、put、delete 等。举个例子:
------------ ----- ---- -- - ------------------- ------------- --
在这段代码中,我们定义了一个路由,它使用了app对象的 get 方法,并传递了两个参数:请求的 URL 路径('/')和处理请求的回调函数。在这个例子中,我们定义了根路径并返回了一个包含 HTML 标签的字符串。
3.使用模板引擎
虽然上述示例只是为了演示路由如何工作,但是 Web 应用程序需要的不仅仅是字符串。很多情况下,我们会需要从我们的数据库、文件系统或 Web 服务中获取数据,并将这些数据放到 HTML 模板中以便呈现给用户。这就是使用模板引擎的场景。
我们可以使用各种模板引擎来构建我们的 HTML 模板。在本节,我们要介绍的是常见的模板引擎之一:EJS。我们首先要安装 EJS,使用 npm 命令如下:
- --- ------- ---
安装完成后,我们需要在 app.js 中告诉 Express.js 使用 EJS 模板引擎:
------------- -------- -------
设置模板引擎后,我们就可以在路由中使用 EJS 模板了。在路由回调函数中,我们可以使用 res.render() 渲染模板并完成页面输出,比如:
------------ ----- ---- -- - ------------------------- - ---------- ----- ----- --- ---
在这个示例中,我们使用 res.render() 渲染名为 pages/index 的模板,并传递了一个包含标题的对象。模板中可以使用内置的 EJS 语法来访问数据,并且可以将它们插入到 HTML 中,例如:
--------- ----- ------ ------ ---------- --------- ---------- ------- ------ ----------- -- --- --------- -------- ------- -------
在这个示例中,我们使用 EJS 语法 <%= pageTitle %>将包含在 HTML 标题中。
4.处理表单数据
处理用户提交的表单数据是一个常见的任务,可以通过 Express.js 中的 req.body 属性来访问。要使用 req.body,我们需要在应用程序中使用 bodyParser 中间件。在 app.js 中添加以下代码来引入和配置 bodyParser:
----- ---------- - ----------------------- ------------------------------- --------- ----- ---- ---------------------------
在上面的代码中,我们将处理表单的方式(bodyParser)添加到 Express.js 应用程序中,并配置了使用JSON和urlencoded格式。一旦设置完毕,我们可以在路由回调函数中访问表单数据,例如:
------------------- ----- ---- -- - ------------- ---------- ---------------------- ---
在这个例子中,我们定义了一个 POST 路由 '/submit',并访问了 req.body.message。
5.使用数据库
使用数据库来存储和检索数据是您开发的 Web 应用程序中的一个关键方面。在介绍如何使用 Express.js 与数据库交互之前,我们需要选择和安装适合我们的应用程序的数据库。
在 Express.js 中处理数据库,我们有两个主要的选项:使用原始的 MySQL、PostgreSQL 等 SQL 数据库,或使用 NoSQL 数据库,如 MongoDB。在这里我们选择使用 MongoDB,因为它是一种在 JavaScript 中使用的流行的 NoSQL 数据库。
首先,我们需要安装 MongoDB。
然后,我们在应用程序中引入 mongoose,并连接到 MongoDB 数据库。实现方法如下:
----- -------- - -------------------- --------------------------------------------- - ---------------- ---- ---
该代码将在我们的应用程序中引入 mongoose,并连接到名为“myapp”Mongodb数据库。
定义数据库模型
在 MongoDB 中,我们将数据存储在集合中。每个集合都代表一个特定类型的数据,并包含一组文档。
我们可以使用 mongoose 来管理我们的数据模型,具体来说,我们可以定义一个 mongoose 模型来表示一个集合中所包含的数据的结构。以下是一个定义模型的简单的例子:
----- -------- - -------------------- ----- ------ - ---------------- ----- ---------- - --- -------- ------ ------- ------- ------- --------------- ----- ---------- ------- ------------- - ----- ----- -------- -------- -- --- -------------- - ---------------------- ------------
在这个模型中,我们定义了一个名为 Book 的模型,并定义了表示 Book 模型中的数据结构的 BookSchema。我们的模型表示包含 title、author、published_date、publisher 和 updated_date 属性的数据集合,并使用 Schema 数据类型来确定其类型。
我们接下来需要把这个模型导出,在我们的应用程序中使用它来与 Mongo 数据库进行交互:
----- ---- - ------------------
以上述示例为例,我们可以使用以下代码来增加一条记录:
----- ---- - --- ------ ------ ----------- ------- ------- ----- ----- --------------- --- ------- ---------- ----- ---------- ----- --- ------------
在上述代码中,我们使用 Book 模型插入了一条新的 book 记录,使用 save 方法将该记录保存到 MongoDB 数据库中。
6.使用WebSocket
WebSocket是一种新兴的通信协议,它使客户端与服务器之间的实时通信成为可能。Express.js 使用 socket.io 库提供 WebSocket 功能。首先,我们需要安装 socket.io:
--- ------- ---------
在我们的应用程序中定义WebSocket路由时,需要使用 socket.io库。我们可以像下面这样来定一个路由:
----- -- - ----------------------------- ---------------- -------- -------- - ------------------------- --- ------------- --------------- --------- -------- ----- - ------------- --------- ----- --- ----------------------- -------- -- - ------------------------- --- --------------- --- ---
在上述代码中,我们定义了一个路由,使用 socket.io 监听连接和断开连接的事件,还使用 socket.emit 方法发送消息和 socket.on 方法侦听来自客户端的消息。
7.静态文件服务
我们的应用程序中有许多文件可能需要作为静态文件提供。例如,CSS、JavaScript 或 图像 文件。在 Express.js 中,我们可以使用内置的 serve-static 中间件来提供静态文件服务。
在 app.js 中添加以下代码即可使用 serve-static 中间件提供静态文件服务:
----- ------- - ------------------- ----- ----------- - ------------------------ ----- --- - ---------- -------------------------------
在这个示例中,我们的应用程序将对 public 目录中的所有文件提供服务。客户端可以使用以下 URL 请求静态文件:
---------------------------------- ----------------------------- --------------------------------
这就是基于 Express.js 构建一个完整的 Web 应用程序的关键步骤。通过深度了解Express.js的核心功能,我们可以使用它来构建新型、灵活和充满活力的Web应用程序。
总结
在本文中,我们了解了如何使用 Express.js 构建完整的 Web 应用程序。我们从安装和配置 Express.js 开始,定义了路由、使用模板引擎渲染页面、处理表单数据、使用数据库模型、使用 WebSocket 和提供静态文件服务。这些都是构建成功的Web应用程序所必需的关键技能。熟悉这些技能后,我们可以使用Express.js来构建更加强大的应用程序,满足用户需求。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/649d2f1048841e98949e9adf