前言
哈喽大家好,我是 SuperYing,想要用 express
搭建后端服务的小伙伴请看过来。本文从 express
基础应用出发讲述其基础使用方法,帮助大家快速上手。
安装
如大部分 npm
包一样,使用 npm\pnpm\yarn
即可集成到项目中。
npm install -S express
上代码
编写 express
代码和编写普通的 js
代码一样,我们先来个简单的 Hello World
。
以下代码需要在 node 工程中编写,操作步骤如下:
- 新建项目文件夹 myFirstExpress。
- 跳转项目文件夹,终端执行
cd myFirstExpress
。- 初始化,终端执行
npm init
。- 新建 index.js 文件。
- 在 index.js 中写入以下代码。
- 终端执行
node index.js
即可启动服务。- 打开浏览器,地址栏输入
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
引用框架。
可通过以下两种方式使用:
- 使用 npx:
npx express-generator
。 - 全局安装
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
: 路由处理函数,每个路由可以具有一个或多个处理程序函数,这些函数在路由匹配时执行。
路由示例
- 浏览器打开主页(如 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!');
});
- 跟路由(/)处理
post
请求
app.post('/', function (req, res) {
res.send('Got a POST request');
});
/user
路由(http://localhost:3000/user) 处理put
请求
app.put('/user', function (req, res) {
res.send('Got a PUT request at /user');
});
/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'));
此时静态文件的访问路径为:
- 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
应用。
感谢阅读,愿你我共同进步,谢谢!!!