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