1.创建一个下列的文件目录结构.
根目录
├── public
│ ├── js
│ │ └── axios.js
│ └── api.html # 通过axios.js发请求调用接口
└── app.js # 提供接口
2.在集成终端下载.express包
2.1初始化.(npm init --yes)
2.2下载express包.(npm i express)
3.用express写get端口
express框架会自动收集get类型的接口从url地址中传递的查询字符串参数,并自动保存在req对象的query属性中。我们直接来获取即可。
//引入
const express = require('express')
// 调用 express() 得到一个 app
// 类似于 http.createServer()
const app = express();
// 设置请求对应的处理函数
app.use(express.static('public'))
app.get('/getapi', (req, res) => {
//直接返回对象
console.log('接受到的参数是', req.query)
res.send({ massage: 'OK' })
})
// 监听端口号,启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))
注意:req.query属性是express框架额外提供的属性。
4.post接口.普通键值
post接口与get请求不同在于:它的参数一般是通过请求体来传递的。根据传递的参数的格式不同,分成三种情况来说. (传递普通键值对,传递form表单(涉及文件上传),传递json) 代码:
//中间值
app.use(express.urlencoded())
app.post('/post', (req, res) => {
//可以通过req.body来获取post传递的键值对.
res.send({ massage: 'ok' })
console.log('返回的参数是', req.body)
})
注意:app.use(....)之后,在res.body中就会多出一个属性res.body。
5.post接口-json格式的参数.
app.use(express.json())
app.post('/postJSON', (req, res) => {
//如何收JSON 对象
res.send({ massage: 'ok' })
console.log('返回的参数是', req.body)
})
注意:如果post涉及文件上传操作,则需要在服务器端额外使用第三方multer这个包(不属于express)来获取上传的信息
6.post接口-form.data文件上传
6.1下在multer包.
6.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来获取其它参数