定制设计在写之前先来了解一下接口传参!!!

我们使用ajax定制设计请求向服务器接口传参，按的约定，定制设计每个请求都有三个部分：

请求行：定制设计保存了请求方式，地址，定制设计可以以查询字符串的格定制设计式附加一部分数据。
请求头：定制设计它可以附加很多信息，其中content-type定制设计用来约定请求体中保存定制设计的数据格式。
content-type定制设计常见有三种取值：

请求体: 定制设计本次请求携带的参数。至于这些参数到了后端应该如何解析出来，由请求头中的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接口-普通键值

具体来说当请求头的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格式上传。


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 类型的表单数据，它主要用于上传文件。(npm i multer)


// 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来获取其它参数

定制设计太简单,前端也可以写接口了