express 基础入门

前端嘟老板
634 阅读4分钟

哈喽大家好，我是 SuperYing，最近准备搭建一个小程序后端服务，本着各种技术各种玩的原则，打算以 Nodejs 框架 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)，请求 Hello world.
app.get('/', function (req, res) {
  res.send('Hello World!');
});
  1. 跟路由（/）处理 post 请求
app.post('/', function (req, res) {
  res.send('Got a POST request');
});
  1. /user 路由(http://localhost:3000/user) 处理 put 请求
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});
  1. /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

可通过以下路径访问：

指定路径前缀

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

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

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

多个静态资源目录

若存在多个静态资源目录，可通过多次调用 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 应用。

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

avatar
文章
阅读
粉丝