Express
一、Express简介
1、概念
express是基于 Node.js
平台,快速、开放、极简的 Web 开发框架,是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
通俗理解:Express 的作用和Node.js内置的http 模块类似,是专门用来创建web服务器的
。
2、Express 的本质
就是一个npm 上的第三方包,提供了快速创建 web 服务器的便捷方法。
3、Express 能做什么
常见服务器分为两种:Web 网站服务器和API接口服务器
使用Express ,我们可以方便、快速的创建web 网站的服务器或API 接口的服务器。
4、Express框架核心特性:
- 可以设置中间件来响应http请求
- 定义了路由用于执行不同的http请求
- 可以通过向模板传递参数来动态渲染html页面
5、安装Express
npm install express --save
以上命令会将 Express 框架安装在当前目录的 node_modules 目录中, node_modules 目录下会自动创建 express 目录。以下几个重要的模块是需要与 express 框架一起安装的:
body-parser
— node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
cookie-parser
—这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
multer - node.js 中间件
—用于处理enctype=“multipart/form-data”(设置表单的MIME编码)的表单数据。
二、创建基本服务器
//1.导入 express
const express = require('express')
//2.创建 web 服务器
const app = express()
//3.启动 web 服务器.
app.listen(80,()=>{
console.log('服务器运行在80端口');
})
启动终端之后,服务器就可以运行了。
三、Express 的基本使用
1、监听get 与 post 请求
1)监听get 请求
通过app.get()
方法,可以监听客户端的GET请求,语法格式:
app.get("请求URL",function(req,res){/*请求处理函数*/})
参数1:客户端请求的url 地址。
参数2:请求对应的处理函数[req:
请求对象(包含了与请求相关的属性和方法)res:
响应对象(包含了与响应相关的属性和方法)]
2)监听post 请求
通过app.post
方法,可以监听客户端的POST请求,语法如下:
app.post("请求URL",function(req,res){/*请求处理函数*/
参数同get 一致。
3)把内容响应给客户端
通过res.send()
方法,可以把处理好的内容,发送给客户端。
app.get('/user',(req,res)=>{
//向客户端发送JSON对象
res.send({name:'小王',age:20,gender:'女'})
})
app.post('/user',(req,res)=>{
//向客户端发送文本内容
res.send('请求成功')
})
完整代码
//1.导入 express
const express = require('express')
//2.创建 web 服务器
const app = express()
//4.监听客户端的get 和 post请求,并向客户端响应具体的内容
app.get('/user',(req,res)=>{
//调用express 提供的 res.send()方法,向客户端响应一个JSON对象
res.send({name:'小王',age:20,gender:'女'})
})
app.post('/user',(req,res)=>{
//调用express 提供的 res.send()方法,向客户端响应一个文本字符串
res.send('请求成功')
})
//3.启动 web 服务器.
app.listen(80,()=>{
console.log('服务器运行在80端口');
})
利用/postman 进行测试get请求:输入url 地址
服务器将返回一个JSON对象,如下图所示
利用/postman 进行测试 post 请求:输入url 地址同上,得到一个html文本
2、获取URL中携带的查询参数
通过req.query
对象,可以访问到客户端通过查询字符串的形式,发送到服务器的参数:
app.get("/",(req,res)=>{
//通过req.query 可以获取到客户端发送过来的查询参数
//注意:默认情况下req.query 是一个空对象
console.log(req.query);
res.send(req.query)
})
利用/postman 进行测试 get 请求:输入url 地址:
服务器返回一个空对象
当我们在url 地址中输入这样的信息之后:
同时服务器也能响应相应的对象属性信息
3、获取URL中的动态参数
通过req.params
对象,可以访问到URL中通过:
匹配到的动态参数。
app.get('/user/:id',(req,res)=>{
//req.params:是动态匹配到的 URL 参数,默认是一个空对象
console.log(req.params);
res.send(req.params)
})
利用/postman 进行测试 get 请求:当客户端输入如下url 地址:
服务器相应回来一个包含id 属性的对象
注意:URL地址中,只有
:
是固定的,后面的id是一个动态的参数,是可以更换的。动态参数是可以有多条。
四、托管静态资源
首先,我们先了解一下Web资源:
所谓 Web 资源即放在 Internet 网上供外界访问的文件或程序,又根据它们呈现的效果及原理不同,将它们划分为静态资源和动态资源。
什么是静态资源
静态资源是浏览器能够直接打开的,一个 js 文件,在打开方式中选择 IE 浏览器打开,浏览器可以直接打开没有出现问题,那么就说明它是一个静态资源。html 文件、css 文件、 js 文件等这些都是静态资源。
1、express.static()
express 提供了一i个非常好用的函数,叫做 express.static()
,通过他,我们可以非常方便创建一个静态资源服务器,例如,通过以下代码就可以将public 目录下的图片,css文件,js文件对外开放访问了。
app.use(express.static('public'))
通过这个方法,就可以访问public 目录中的所有文件了:比如:在我的vs中存在这样一种文件排放方式:那么我就可以访问
http://localhost:3000/html/index.html
http://localhost:3000/images/1.png
http://localhost:3000/js/login.js
注意
:Express 在指定的
静态目录中查找文件,并对外提供资源的访问路径。因此,存放静态文件的目录名不会出现在 URL 中。
在src文件夹中编写static.js
const express = require('express')
const app = express()
app.use(express.static('public')) //在客户端访问服务器静态资源时使用
app.listen(3000)
console.log('服务器运行在3000端口上');
启动服务器后,浏览器中输入地址:http://localhost:3000/images/1.png
通过静态查找最终可以访问public文件夹下的图片,如上图。
2、托管多个静态资源目录
如果要托管多个静态资源目录,可以多次调用 express.static()函数。访问静态资源文件时, express.static()函数会根据目录的添加顺序查找所需的文件。
app.use(express.static('public'))
app.use(express.static('files'))
3、挂载路径前缀
如果需要在托管的静态资源访问之前,挂载路径前缀,可以使用如下方法:
app.use('/public',express.static('public'))
现在就可以通过带有 /public 前缀路径访问 public 目录中的文件了。
打开浏览器,输入http://localhost/public/html/index.html