前端写接口的4种方法:你确定不进来看看?

2,656 阅读2分钟

写接口-整体说明

接口传参

我们使用ajax请求向服务器接口传参,按http协议的约定,每个请求都有三部分:

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

image.png

  • 请求:  本次请求携带的参数。至于这些参数到了后端应该如何解析出来,由请求头中的content-type来决定。

image.png

image.png

1.get 接口有参数

      //1.导入模块
      const express = require('express');
      //2.创建服务器
      const app = express();
      app.get('/get', function (req, res) {
        // 直接返回对象
        console.log(req.query);
        res.send({ name: 'abc' });
      });
      //3.开启服务器
      app.listen('8088', () => {
        console.log('8088');
      });

2.post接口-普通键值

post接口与get请求不同在于:它的参数一般是通过请求体来传递的。根据传递的参数的格式不同,分成三种情况来说

  • 传递普通键值对
  • 传递form表单(涉及文件上传)
  • 传递json

普通键值对参数

// 1. 使用中间件
    app.use(express.urlencoded());
    
    app.post("/add",(req,res)=>{
    // 2. 可以通过req.body来获取post传递的键值对	
    // res.json是express提供的一个函数,用来返回一个json数据给客户端,同时会结束请求
    // 类似于res.end, res.send()
        res.json(req.body)
    })

3. 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')
   })

4.post接口-form-data文件上传

需要在服务器端额外使用第三方multer这个包(不属于express)来获取上传的信息。

代码: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来获取其它参数 最后附上一张后端代码框架图便于理传参方式

image.png