express 基础入门

前言

哈喽大家好，我是 SuperYing，想要用 express 搭建后端服务的小伙伴请看过来。本文从 express 基础应用出发讲述其基础使用方法，帮助大家快速上手。

安装

如大部分 npm 包一样，使用 npm\pnpm\yarn 即可集成到项目中。

npm install -S express

上代码

编写 express 代码和编写普通的 js 代码一样，我们先来个简单的 Hello World。

以下代码需要在 node 工程中编写，操作步骤如下：

1. 新建项目文件夹 myFirstExpress。
2. 跳转项目文件夹，终端执行 cd myFirstExpress。
3. 初始化，终端执行 npm init。
4. 新建 index.js 文件。
5. 在 index.js 中写入以下代码。
6. 终端执行 node index.js 即可启动服务。
7. 打开浏览器，地址栏输入 http://localhost:3000，页面即可展示 Hello World。。

import express from 'express'

// 创建 express 应用实例
const app = express()

const port = 3000

// 路由，相当于后端接口。浏览器访问 localhost:3000 即可展示 Hello World
app.get('/', (req, res) => {
  res.send('Hello World!')
})

// 启动服务，监听端口 3000
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Express 生成器

如果小伙伴们不想手动搭建工程架构，express 也提供了代码生成器，以快速创建 express 引用框架。

可通过以下两种方式使用：

1. 使用 npx：npx express-generator。
2. 全局安装 express-generator

npm install -g express-generator
express

代码生成器支持设置模板引擎。

如：express --view=pug myapp 创建一个名为 myapp 的工程，并设置模板引擎为 pug。

模板引擎简介：

使用模板引擎可以在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送给客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易

与 Express 一起使用的一些流行的模板引擎是 Pug、Mustache 和 EJS。Express 应用程序生成器 使用 Jade 作为其默认值。

路由

路由 用于确定应用程序如何响应对特定端点的客户机请求，包含一个 URI（或路径）和一个特定的 HTTP 请求方法（GET、POST 等）。简单理解，相当于后端接口的请求路径。

对于 express 应用来说，路由 属于十分关键的特性。

路由 基本语法结构：app.METHOD(PATH, HANDLER)

app: express 的实例。

METHOD: http 请求方法，如 get、post、put、delete 等。

PATH: 服务器上的路径。

HANDLER: 路由处理函数，每个路由可以具有一个或多个处理程序函数，这些函数在路由匹配时执行。

路由示例

1. 浏览器打开主页(如 http://localhost:3000)，请求%EF%BC%8C%E8%AF%B7%E6%B1%82 “http://localhost:3000)%EF%BC%8C%E8%AF%B7%E6%B1%82”) Hello world.

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

2. 跟路由（/）处理 post 请求

app.post('/', function (req, res) {
  res.send('Got a POST request');
});

3. /user 路由(http://localhost:3000/user) 处理 put 请求

app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

4. /user 路由(http://localhost:3000/user) 处理 delete 请求

app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');
});

静态文件

express 可以提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件的访问，可以使用 express.static 内置中间件函数实现。

通常情况，需要将对外提供的静态文件放入 public 目录统一管理，并将该目录传递给 express.static 函数。

默认方式

app.use(express.static('public'));

现在可以通过根目录（/）拼接静态文件在 public 目录下的相对路径 访问静态文件：

假设 public 目录下存在以下静态文件：

• image/1.jpg
• js/2.js
• hello.js

可通过以下路径访问：

• http://localhost:3000/image/1.jpg
• http://localhost:3000/js/2.js
• http://localhost:3000/hello.js

指定路径前缀

可以通过给静态资源目录指定安装路径的方式，指定静态资源访问路径前缀

app.use('/static', express.static('public'));

此时静态文件的访问路径为：

• http://localhost:3000/static/image/1.jpg
• http://localhost:3000/static/js/2.js
• http://localhost:3000/static/hello.js

多个静态资源目录

若存在多个静态资源目录，可通过多次调用 express.static 中间件函数的方式实现：

app.use(express.static('public'));
app.use(express.static('files'));

推荐方式

express.static 提供的静态资源访问路径是相对于 node 进程启动目录的，如果从另一个目录启动 node 进程，访问路径会有所不同。

为保证资源路径的安全性，建议使用使用静态资源绝对路径：

// node path 模块
import path from 'path'

app.use(express.static(path.join(__dirname, 'public')));

结语

好啦，今天的「express 基础入门」就到这里，到这小伙伴应该已经对 express 的基本使用有大致的了解了，我将在后续的文章中继续深入 express 应用。

感谢阅读，愿你我共同进步，谢谢！！！