返回

Node.js(笔记12) - Express - 创建基本的Web服务器

发布时间:2023-01-05 20:31:08 344
# 前端# npm# postman# java# 服务器

什么是Express

官方:Express是基于Node.js 平台,快速、开放、极简的Web开发框架;

通俗:Express的作用和Node.js 内置的 http 模块类似,是专门用来创建 Web 服务器的;

Express的本质:就是一个npm上的第三方包,提供了快速创建Web服务器的便捷方法。

Express官网: ​​http://expressjs.com​​


进一步理解Express

问题:不使用Express 能否创建 Web 服务器? 

答案:能,使用 Node.js 提供的原生 http模块也行。 


问题:有了http内置模块,为什么还用Express?

答案:http 内置模块用起来复杂,效率低,Express 是基于内置 http 模块进一步封装的,效率高;


问题:http内置模块与 Express 是什么关系?

答案:类似于浏览器 Web Api 和 JQuery 的关系,后者是基于前者进一步封装出来的。


Express 能做什么?

对于前端程序员来说,最常见的两种服务器,分别是:

Web网站服务器:对外提供 Web 网页资源的服务器;

API接口服务器:对外提供 API 接口的服务器。

使用 Express,我们可以方便、快速的创建 Web网站的服务器或 API接口的服务器


Express 安装

项目所在目录下执行终端命令。

> npm i express@4.17.1

指定版本的意思是说,跟当前教程保持同步;

Node.js(笔记12) - Express - 创建基本的Web服务器_Express


创建基本的Web服务器

1)导入 express

2)创建 Web服务器

3)调用 app.listen(port,fn) 启动服务器

const express = require('express')
const app = express()
app.listen(8000,()=>{
console.log('server is running at http://127.0.0.1:8000');
})


监听GET请求

通过 app.get() 方法,可以监听客户端 GET 请求:

// 参数1:客户端请求的URL地址
// 参数2:请求对应的处理函数
// req:请求对象(包含了与请求相关的属性和方法)
// res:响应对象(包含了与响应相关的属性和方法)

app.get('请求地址',function(req,res){
// 处理函数
})


监听POST请求

通过 app.post() 方法,可以监听客户端 POST 请求:

// 参数1:客户端请求的URL地址
// 参数2:请求对应的处理函数
// req:请求对象(包含了与请求相关的属性和方法)
// res:响应对象(包含了与响应相关的属性和方法)

app.post('请求地址',function(req,res){
// 处理函数
})


把内容响应给客户端

通过 res.send() 方法,可以把处理好的内容,发送给客户端:

app.get('/user',(req,res)=>{
// 向客户端发送 JSON 对象
res.send({name:'jack',age:20,gender:'male'})
})
app.post('/user',(req,res)=>{
// 向客户端发送文本
res.send("The request succeeded.")
})

res.send() 方法比较强大,即可以响应 JSON数据,也可以响应文本字符串;


创建基本Web服务器(代码整理)

新建个 server.js 文件

const express = require('express')
const app = express()
app.get('/user',(req,res)=>{
res.send({name:'jack',age:20,gender:'male'})
})
app.post('/add',(req,res)=>{
res.send('the request accessed.')
})
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})

在 apifox(或postman)来测试新建的Web服务器


GET请求:

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_02

POST请求:

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_03


获取URL中携带的查询参数

通过 req.query 对象,可以访问到客户通过查询字符串的形式,发送到服务器的参数:

app.get('/',(req,res)=>{
console.log(req.query)
res.send(req.query)
})

apifox中新建 get 请求,地址+端口

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_04

提示:req.query 默认是一个空对象

客户端使用 ​?name=jack&age=20​ 这种查询文字符串形式,发送到服务器的参数,可以通过 req.query 对象访问到。

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_05

结果:

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_06

获取到 ​res.query​​ 后,可以通过 ​req.query.name​​  ​req.query.age​ 来使用。


获取URL的动态参数

通过 res.params 对象,可以访问到 URL中通过 ​:​ 匹配的动态参数;

app.get('/user/:id',(req,res)=>{
console.log(req.params);
})

提示: 这里的 ​:id​,是一个动态的参数

注意:​:​是固定用法,id 并不是;

req.params 默认是个空对象,里面存放着通过 ​​动态匹配的参数值

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_07

红框:URL地址中的参数;

黄框:就是动态匹配来的参数值;

还可以传递多个参数

app.get('/user/:userid/:username',(req,res)=>{
console.log(req.params);
})

提示:这次改了两个参数名

apifox 试一下:

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_08

红框发送参数,黄框是匹配的参数


托管静态资源 express.static()

Express 提供一个非常好用的函数,叫 express.static() ,通过它,可以方便地创建静态资源服务器。

通过如下代码可以将 public 目录中的图片、css样式、js文件对外开放访问了

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

现在,就可以访问 public 目录中的所有文件了;

把之前做的 clock 文件夹放在当前根目录中:

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_09

服务器文件是 server.js ,要共享的文件夹是 clock;

完整代码:

const express = require('express')
const app = express()
app.use(express.static('./clock')) // 注意相对路径不能写错了
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})

注意:Express在指定的静态目录中查找文件,并对外提供资源的访问路径,因此,存放静态文件的目录名不会出现在 URL中。

浏览器分别访问clock目录中的三个文件:

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_10

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_11

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_12

注意:共享出去的 clock 目录并不会显示在URL上。

看起来是很强大,一行代码,就可以共享整个目录了(包括子目录)。

托管多个静态资源

const express = require('express')
const app = express()
app.use(express.static('./clock')) // 注意相对路径不能写错了
app.use(express.static('./files')) // 共享多个目录
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})

可以共享多少个目录,同样的方法多写一行代码就可以了;

如果两个目录中都有 index.html 文件算谁的呢? 

按顺序加载,谁先加载显是谁。


路径前缀

如果希望在托管在静态资源访问路径之前,挂载路径前缀:

app.use('/myfloder',express.static('clock'))

有时,希望把挂载的目录也显示出来,那就加个访问前缀;

Node.js(笔记12) - Express - 创建基本的Web服务器_Express_13


回顾一下

创建基本Web服务器的几个要点

// 引入 express
const express = require('express')
// 创建实例
const app = express()
// 监听 get 请求
app.get('/user',(req,res)=>{
// 响应 json 数据
res.send({name:'jack',age:20,gender:'male'})
})
// 监听 post 请求
app.post('/add',(req,res)=>{
// 响应文本字符串数据
res.send('the request accessed.')
})
// 接收query字符串参数 ?name=jack&age=20&gender=male
app.get('/',(req,res)=>{
console.log(req.query);
res.send(req.query)
})
// 接收匹配参数 /user/66/jacky
app.get('/user/:userid/:username',(req,res)=>{
console.log(req.params);
res.send(req.params)
})
// 对外共享文件 express.static()
app.use('/clock',express.static('clock'))
// 启动服务,端和回调
app.listen(8000,()=>{
console.log('Server is running at http://127.0.0.1:8000')
})

看起来不是很难,上手几段代码熟悉一下就会了。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线