写接口-整体说明
接口传参
我们使用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可以从请求体中进行传参。
另外，请求头中的content-type用来告之服务器应该以何种方式去解析请求体中的数据。
express写get接口
get无参数
const express = require('express');
const app = express();
app.get('/get', function(req, res) {
// 直接返回对象
res.json({ name: 'ceshi' });
});
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);
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）来获取上传的信息。
Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。
enctype="multipart/form-data"
步骤
1.安装包
npm install 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) |
接口传参-整体示例
目录结构
根目录
├── public
│ ├── js
│ │ └── axios.js
│ └── api.html # 通过axios.js发请求调用接口
└── app.js # 提供接口
要求：
- localhost:3000/api.html。l可以访问public下的api.html文件
- 在后端实现四个接口，分别来处理在api.html中发出的请求
前端
用axios来发请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="btn1_get">接口测试1：get请求带参数</button>
<button id="btn2_post"> 接口测试2:post-传递普通键值对</button>
<hr/>
<button id="btn3_postJSON">接口测试3:post-传递json</button>
<hr/>
<form id="myform">
<input type="text" name="title">
<input type="file" name="cover">
</form>
<button id="btn4_formdata">接口测试4:post-传递formdata</button>
<hr/>
<script src="./js/axios.js"></script>
<script>
document.getElementById('btn1_get').addEventListener('click',() => {
axios.get('http://localhost:3000/getapi', {params: {a:1,b:2}})
})
var obj = {
"name":"abc",
"address":{
"a":1,
"b":2,
"info":"c"
}
}
document.getElementById('btn2_post').addEventListener('click', () => {
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('http://localhost:3000/post', params, {
headers: {"content-type":"application/x-www-form-urlencoded"}})
})
document.getElementById('btn3_postJSON').addEventListener('click', () => {
axios.post('http://localhost:3000/postJSON', obj)
})
document.getElementById('btn4_formdata').addEventListener('click', () => {
console.log(1)
var fd = new FormData(document.getElementById('myform'));
axios.post('http://localhost:3000/publish',
fd
)
})
</script>
</body>
</html>
后端
// 实现get接口
const express = require('express')
const app = express();
app.use(express.static('public'))
// 引入bodyParse包
const bodyParser = require('body-parser')
// 使用包. 则在后续的post请求中
// 会自动加入req.body属性，这个属性中就包含了post请求所传入的参数
// 处理普通的键值对格式
// Content-Type: application/x-www-form-urlencoded
app.use(express.urlencoded())
// 处理JSON格式
// Content-Type: application/json;
app.use(express.json())
// 引入multer包
const multer = require('multer');
// 配置一下multer
// 如果本次post请求涉及文件上传，则上传到uploads这个文件夹下
// Content-Type: multipart/form-data;
var upload = multer({ dest: 'uploads/'})
// 实现接口1： get类型接口
// 返回所传入的参数，并附上上时间戳
app.get('/getapi',(req,res)=>{
// 通过 req.query快速获取传入的参数
console.log(req.query);
let obj = req.query
obj._t = Date.now();
res.json( obj )
})
// 实现接口2：普通post 键值对
app.post('/post',(req,res)=>{
// 希望在后端收到post传参
console.log(req.body);
let obj = req.body
obj._t = Date.now();
res.json(obj)
})
// 实现接口3：用来JSON格式的数据
// Content-Type: application/json;
app.post('/postJSON',(req,res)=>{
// 希望在后端收到post传参
console.log(req.body);
// res.send('/postJSON')
res.json( req.body )
})
// 实现接口4：接口formDate
app.post('/publish',upload.single('cover'),(req,res)=>{
console.log('publish...')
//upload.single('cover')
// 这里的cover就是在页面中表单元素中的name
// <input type="file" name="cover" />
// 把要上传文件放在指定的目录
console.log(req.file);
// 其它参数，还是在req.body中找
console.log(req.body);
res.json({code:200,msg:'上传成功',info:req.file.path})
})
app.listen(3000,()=>{
console.log('express应用在3000端口启动了');
})
拓展介绍-RESTful接口(了解)
网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备…）。因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致API构架的流行，甚至出现"APIFirst"的设计思想。RESTful API是目前比较成熟的一套互联网应用程序的API设计理论。
REST（Representational State Transfer）表述性状态转换，REST指的是一组架构约束条件和原则。 如果一个架构符合REST的约束条件和原则，我们就称它为RESTful架构。REST本身并没有创造新的技术、组件或服务，而隐藏在RESTful背后的理念就是使用Web的现有特征和能力， 更好地使用现有Web标准中的一些准则和约束。
符合REST规范的设计，我们称之为RESTful设计。 它的设计哲学是将服务器端提供的内容实体看作一个资源，并表现在url上。
普通接口设计
例如：
接口名：localhost:8080/getarticle
类型：get
功能：获取文章信息
接口名：localhost:8080/addarticle
类型：post
功能：添加新文章
接口名：localhost:8080/delarticle
类型：post
功能：删除文章
接口名：localhost:8080/updatearticle
类型：post
功能：编辑文章
//------------下面是普通的api设计---------------
app.get('/getarticle',(req,res)=>{
res.send('获取')
})
app.post('/addarticle',(req,res)=>{
res.send('添加')
})
app.post('/delarticle',(req,res)=>{
res.send('删除')
})
app.post('/updatearticle',(req,res)=>{
res.send('编辑')
})
RESTful接口设计
区别上述功能,主要依靠接口名称和请求类型而在restful设计中，它们应该是这样的：
接口名：localhost:8080/articles
类型：get
功能：获取文章信息
接口名：localhost:8080/articles
类型：post
功能：添加新文章
接口名：localhost:8080/articles
类型：delete
功能：删除文章
接口名：localhost:8080/articles
类型：put
功能：编辑文章
RESTful设计是：
- 通过URL设计资源。接口名一般都是名词，不包含动词。
- 请求方式（get,post,delete,put）决定资源的操作类型
参考代码
const express = require('express')
const app = express();
app.get('/articles',(req,res)=>{
res.send('获取')
})
app.post('/articles',(req,res)=>{
res.send('添加')
})
app.delete('/articles',(req,res)=>{
res.send('删除')
})
app.put('/articles',(req,res)=>{
res.send('编辑')
})
app.listen(8080,()=>{
console.log(8080);
})
