Web 开发框架 — Express 精讲（安装使用、静态托管、路由处理、中间件的使用）(1)-阿里云开发者社区

Web 开发框架 — Express 精讲（安装使用、静态托管、路由处理、中间件的使用）(1)

2022-04-13 285

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

服务治理 MSE Sentinel/OpenSergo，Agent数量不受限

简介： Web 开发框架 — Express 精讲（安装使用、静态托管、路由处理、中间件的使用）(1)

一、Express 安装

首先创建一个文件夹 study_Express 作为项目文件，在文件中创建入口文件 app.js；

在集成终端中使用命令 npm init -y 初始化一个 package.json 文件；

使用命令 npm install express -- save 下载 Express；安装成功后如下：

二、Express 使用

下载 Express 之后，就可以正常使用了，在 app.js 中创建一个应用服务器示例；

// study_Express/app.js
const express = require('express') //require函数引入express包
const app = express() //调用函数
const port = 3000 //设置端口3000
app.get('/', (req, res) => {
  res.send('Hello World!') //app对象调用get API，监听根路径 /，有根路径请求时返回“Hello World!”
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`) //监听3000端口，启动服务后触发回调函数
})

创建完成后启动服务；

此时我们查看本地地址的3000端口，就可以返回“Hello World!”;

以上就是一个最简单的应用服务器。

三、通过 Express 托管静态文件

所谓托管静态文件就是让图片、文档、js/css/html文件等等可以通过 url 地址来访问；我们新建文件 static.js 来演示静态文件的托管；

// study_Express/static.js
const express = require('express') //require函数引入express包
const app = express() //调用函数
//实现静态资源服务
let server = app.use(express.static('public')) //public就是静态资源的根目录，静态资源放于此文件夹
server.listen(3000, () => { //创建监听
  console.log('服务器启动成功...')
})

提示：app.use 语句可以写多条设置多个静态资源的根目录，访问时互不影响。

在以上代码中我们设置的根目录为 public，所以创建此目录并添加示例文件 1.html 和 1.jpg 用于静态托管；

接下来，启动服务；

此时就可以在浏览器中通过 url 来访问我们刚刚添加的静态资源了。

除此之外，我们也可以为访问的路径设置一个虚拟目录，具体做法是在 app.use 后新加一个参数；如下，设置虚拟目录 /express；

let server = app.use('/express',express.static('public')) //use的第一个参数指定虚拟目录(路径)

提示：应用服务器文件无论做任何修改都需要重新启动服务。

接下来在访问静态资源的 url 中也需要加入这个虚拟目录；

四、路由处理

根据请求路径和请求方式进行路径分发处理的就是路由；

http 的常用请求方式有 post(添加)、get(查询)、put(更新)、delete(删除)，即分别对应增删改查操作；我们新建文件 router.js 来演示路由处理：

// study_express/router.js
const express = require('express') //require函数引入express包
const app = express() //调用函数
//四种基本路由处理（处理特定请求）
app.get('/', (req, res) => {
  res.send('get数据！')
})
app.post('/', (req, res) => {
  res.send('post数据！')
})
app.put('/', (req, res) => {
  res.send('put数据！')
})
app.delete('/', (req, res) => {
  res.send('delete数据！')
})
//直接使用use分发可以处理所有的路由请求（处理所有请求）
// app.use((req,res) => {
//   res.send('ok!')
// })
app.listen(3000, () => { //创建监听
  console.log('router服务器启动成功...')
})