Express 是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架对不同的请求能够显示页面;提供接口服务
安装express
express是一个第三方框架在使用之前要先使用npm下载 ,在下载包之前要先创建项目,项目目录名字不要取中文,也不要取为express
,
1. npm init -y 创建package.json文件完成初始化。
2. npm i express 命令下载express
如果安装不成功:
- 换个网络环境
- 运行下
npm cache clean -f
,再重新运行下载命令试试
快速创建web服务器步骤
1.加载 Express
const express = require('express')
2. 调用 express() 得到一个 app, 类似于 http.createServer()
const app = express();
3. 设置请求对应的处理函数
app.get('/access', (req, res) => {
res.send('hello world')
})
4. 监听端口号,启动 Web 服务
app.listen(3000, () => console.log('app成功启动 3000!'))
说明:
- app.get('/access')相当于添加事件监听:当用户以get方式求"/access"时,它后面的回调函数会执行。
- res.send()是exprss框架给res对象补充提供的方法(http模块中的res是没有这个方法的),用于结束本次请求。类似的还有res.json(), res.sendFile()。
托管静态资源
根目录
├── public
│ ├── css
│ │ └── index.css
│ ├── img
│ │ └── bg.jpeg
│ ├── js
│ │ └── axios.js
│ └── index.html
└── serve.js # 服务器
例如,如上url分别是请求一张图片,一份样式文件,一份js代码。我们实现的web服务器需要能够直接返回这些文件的内容给客户端浏览器。
如果使用http模块要写很多代码,现在使用express框架,只需一句代码就可以搞定了,这句代码是 express.static('public')
// 加载 Express
const express = require('express')
// 1. 调用 express() 得到一个 app
const app = express();
// 2. 设置请求对应的处理函数
app.use(express.static('public'))
// 3. 监听端口号,启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))
此时,所有放在public下的内容可以直接访问,注意,此时在url中并不需要出现public这级目录。在public下新建index.html,可以直接访问到。
限制访问前缀
app.use('/public', express.static('public'))
这意味着想要访问public下的内容,必须要在请求url中加上/public
路由和接口
路由(Routing)是由一个 URL(或者叫路径标识)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何处理响应客户端请求。每一个路由都可以有一个或者多个处理器函数,当匹配到路由时,这些个函数将被执行。
const app = express();
// 定义路由
app.METHOD(PATH, HANDLER)
app
是 express 实例 。(const app = express())METHOD
是一个 [HTTP 请求方法] 全小写格式。如:post,get,delete等PATH
是请求路径(相当于在http模块中用到过的url.parse(req.url).pathname
)HANDLER
是当路由匹配到时需要执行的处理函数。(req,res)=>{ }
接口传参
我们使用ajax请求向服务器接口传参,按http协议的约定,每个请求都有三个部分:
-
请求行: 保存了请求方式,地址,可以查询字符串的格式附加一部分数据。
-
请求头:它可以附加很多信息,其中content-type用来约定请求体中保存的数据格式。
content-type常见有三种取值: | content-type的值 | 表示请求体的数据格式 | 示例 | | -------------------------------- | ---------- | ------------- |
| application/x-www-form-urlencode | 普通键值对象 | a=2&c=1 | | application/json | json对象 | {a:1,b:{c:1}} | | multipart/form-data | 上传文件 | file | -
请求体: 本次请求携带的参数。至于这些参数到了后端应该如何解析出来,由请求头中的content-type来决定。
-
方法一:请求行。常见方式如下:
- 使用ajax技术,通过get方式传参。
- 在浏览器地址栏中输入接口地址并补充上查询字符串。
-
方法二:请求体
- ajax中的post, put, delete可以从请求体中进行传参。
express写get接口
get无参数接口
const express = require('express');
const app = express();
app.get('/get', function(req, res) {
// 直接返回对象
res.json({ name: '测试' });
});
app.listen('8088', () => {
console.log('8088');
});
- res.json()是express提供的方法,同时会结束请求(类似于res.end)。 get接口有参数
express框架会自动收集get类型的接口从url地址中传递的查询字符串参数,并自动保存在req对象的query
属性中。我们直接来获取即可。
const express = require('express');
const app = express();
app.get('/get', function(req, res) {
// 直接返回对象
console.log(req.query); //get类型的接口接收返回的参数使用req.query
res.send({ name: 'abc' });
});
app.listen('8088', () => {
console.log('8088');
});
注意:req.query属性是express框架额外提供的属性
post接口-普通键值
post接口与get请求不同在于:它的参数一般是通过请求体来传递的。根据传递的参数的格式不同,分成三种情况来说
- 传递普通键值对
- 传递form表单(涉及文件上传)
- 传递json
普通键值对参数
具体来说当请求头的content-type为x-www-form-urlencoded时,表示上传的普通简单键值对 。
// 1. 使用中间件
app.use(express.urlencoded()); //可以用于接收一些简单类型数据,例如字符串类型,数组类型。
app.post("/add",function(req,res){
// 2. 可以通过req.body来获取post传递的键值对
// res.json是express提供的一个函数,用来返回一个json数据给客户端,同时会结束请求
// 类似于res.end, res.send()
res.json(req.body)
})
注意:
- app.use(....)之后,在res.body中就会多出一个属性res.body。
extended: false
:表示使用系统模块querystring来处理传入的参数,也是官方推荐的extended: true
:表示使用第三方模块qs来处理传入的参数.
post接口-json格式的参数
在post传递参数时,如果要传入的参数比较复杂(多级嵌套),则可以使用json格式上传。
前端要传入的代码
var data = {
name:"abc",
address:{
"a":1,
"b":2,
"info":"c"
}
}
后端代码
app.use(express.json());
// 会自动加入req.body属性,这个属性中就包含了post请求所传入的参数
// 用来处理JSON格式的数据
app.post('/postJSON',(req,res)=>{
// 后端收到post传参
console.log(req.body);
res.send('/postJSON')
})
post接口-form-data文件上传
如果post涉及文件上传操作,则需要在服务器端额外使用第三方multer
这个包(不属于express)来获取上传的信息。
1.安装包
npm i multer
2.使用
1. 引入包
const multer = require('multer');
2. 配置
const upload = multer({dest:'uploads/'}) // 上传的文件会保存在这个目录下
uploads表示一个目录名,你也可以设置成其它的
3. 使用
这个路由使用第二个参数 .upload.single表示单文件上传, 'cover' 表示要上传的文件在本次上次数据中的键名。对应于前端页面上的:
<input type="file" name='cover'/>
app.post("/postfile",upload.single('cover'), function(req,res){
req.file 记录了文件上传的信息
req.body 记录了其它普通参数(非文件)的信息
})
说明:
- 如果当前目录下没有uploads,它会自动创建uploads这个文件夹
upload.single
只是处理了文件的上传。你仍可以通过req.body来获取其它参数
后端框架代码小结
传参方式 | 前端 content-type | 后端框架express |
---|---|---|
请求行 | get方式 | req.query |
请求体 | application/x-www-form-urlencode | app.use(express.urlencoded()); req.body |
请求体 | application/json | app.use(express.json() ); req.body |
请求体 | multipart/form-data | 1. 引入包 const multer = require('multer'); 2. 配置app.post('/apiname', upload.single() , req.body) |
req.query
该属性主要用于get()方法时传递参数使用,会直接获取地址栏传递的参数。app.use(express.urlencoded())
可以用于接收一些简单类型数据,例如字符串类型,数组类型。req.body
用来获取post传递的键值对。app.use(express.json())
可以接收复杂数据类型,例如对象的嵌套类型。