前端程序员福利利用node写接口

最新推荐文章于 2024-08-11 23:35:06 发布

nz一只肥猫

最新推荐文章于 2024-08-11 23:35:06 发布

阅读量2.2k

点赞数 3

分类专栏： node.js 文章标签：前端 javascript node.js

本文链接：https://blog.csdn.net/weixin_48357279/article/details/124503500

版权

node.js 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文详述了前端程序员为何要了解接口，包括HTTP请求的组成部分，如请求行、请求头和请求体，以及不同content-type的含义。通过示例介绍了如何使用Express框架创建GET和POST接口，包括处理普通键值对、JSON数据和文件上传。同时，给出了前端使用axios调用接口的实例代码，以及推荐使用API测试工具Apifox进行接口测试。

摘要由CSDN通过智能技术生成

Code is never die !

前端程序员为什么要自己写接口?

🤡🤡🤡🤡首先我们前端程序员可以不知道怎么写接口,但一定要了解它,工作中,经常会发生前后端扯皮的事,只要了解了写接口的原理我们前端就有充足的话语权,不至于那么被动 , 对方叭叭半天却不知道他在说啥.

了解接口传参

我们使用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来决定。

🍗🍗了解以上类容之后我们就可以开始写包了

首先我们下一个名叫express的一个包,写接口基本都需要这个框架

1.get无参数接口

//引入这个express
const express = require('express');
const app = express();
app.get('/get', (req, res)=> {
  // 直接返回对象
  res.json({ name: 'ceshi' });
});
app.listen('8088', () => {
  console.log('8088');
});

此时就创建一个 8088/get的一个接口

注意:

res.json()是express提供的方法

2.get接口有参数

//1.导入模块
const express = require('express')
//2.创建服务器
let app = express()
app.get('/api/get',(req,res)=>{
//req.query属性是express框架额外提供的属性。
  console.log(req.query);
  res.send({ name: 'abc' });
})
//3.开启服务器
app.listen(3000,()=>{
console.log('success')
})

post接口-普通键值

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

传递普通键值对
传递form表单（涉及文件上传）
传递json

普通键值对参数

具体来说当content-type为x-www-form-urlencoded时，表示上传的普通简单键值对。

// 接口1
//1.导入模块
const express = require('express')
//2.创建服务器
let app = express()
// 1. 使用中间件
app.use(express.urlencoded())
app.post('/addbooks/post', (req, res) => {
  console.log('发送请求', req.body)
  res.send({ a: 1 })
})
//3.开启服务器
app.listen(3000, () => {
  console.log('success')
})

注意：
中间件: app.use(express.urlencoded())

app.use(…)之后，在res.body中就会多出一个属性res.body。

post接口-json格式的参数

//1.导入模块
const express = require('express')
//2.创建服务器
let app = express()
app.use(express.json())
app.post('/addbooks/json', (req, res) => {
  console.log('发送请求', req.body)
  res.send(data = {
    name:"abc",
    address:{
        "a":1,
        "b":2,
        "info":"c"
    }
   })
})
//3.开启服务器
app.listen(3000, () => {
  conso

注意：
中间件: app.use(express.json())

post接口-form-data文件上传

如果post涉及文件上传操作，则需要在服务器端额外使用第三方multer这个包（不属于express）来获取上传的信息。

Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。

第一步安装Multer

npm install multer

第二步使用


//1.导入模块
const express = require('express')
const multer = require('multer')
const upload = multer({dest:'uploads/'}) 
//2.创建服务器
let app = express()
app.post("/postfile", upload.single('imges'), function(req,res){
  // req.file 记录了文件上传的信息
  // req.body 记录了其它普通参数（非文件）的信息
  // 其它操作
  console.log(req.file)
  console.log(req.body)
  res.send(req.body)
})
//3.开启服务器
app.listen(3000, () => {
  console.log('success')
})

说明：

如果当前目录下没有uploads，它会自动创建uploads这个文件夹
upload.single只是处理了文件的上传。你仍可以通过req.body来获取其它参数

整活!!!

接口传参-整体示例

目录结构

根目录
├── public
│   ├── js
│   │   └── axios.js
│   └── api.html # 通过axios.js发请求调用接口
└── app.js         # 提供接口

前端

用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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <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端口启动了'); 
})