在写之前先来了解一下接口传参!!!

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

请求行：保存了请求方式，地址，可以以查询字符串的格式附加一部分数据。
请求头：它可以附加很多信息，其中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来获取其它参数

后端框架代码

(最后给大家安利一个测试端口的很强大的软件,避免了写代码去测试端口是否成功 )

Apifox

太简单,前端也可以写接口了相关推荐

java写接口给前端_看看人家那后端API接口写得，那叫一个优雅！
来源: r6d.cn/tEvn 在移动互联网,分布式.微服务盛行的今天,现在项目绝大部分都采用的微服务框架,前后端分离方式 ,(题外话: 前后端的工作职责越来越明确 ,现在的前端都称之为大前端 , ...
业务逻辑写在存储过程好还是后端好_后端两小时，前端一星期！你只是一个写接口的工程师吗？...
故事从一名前端工程师的呐喊开始: 我们公司做项目分配任务,一个星期的活,后端呢,两三个小时就弄完了,前端要做界面,做交互,做功能,忙活一个星期还得和设计师对 UI,和需求方对业务逻辑,最后呢,管事的还 ...
前端程序员福利利用node写接口
Code is never die ! 前端程序员为什么要自己写接口?
【前端必备】使用NodeJs写接口(本地连接MySQL + 连接到云服务MySQL)
使用NodeJs写接口包准备引入包介绍使用NaviCat连接MySQL并创建表,并连接到MySQL 简单接口调用示例: 登录接口示例: 注册接口本地测试接口云服务器安装MySQL 包准备 ...
前端写接口请求后台数据存vuex中打印到控制台
最近从B站上面跟着敲 vue 的项目,多次看到有关于前台拿到后端的接口地址文档,写前端接口,然后请求后台数据,放到 vuex 当中,再然后再在需要展示数据时渲染出来,于是做个输出小结,分享出来,供大家 ...
php写简单接口_php写接口的日常
php写接口的日常 /* 评论列表 */ public function commentListW(){ $base = new Base(); $info = $base->getUserBy ...
springboot整合knife4j，从此告别手写接口文档
关于knife4j Knife4j的前身是swagger-bootstrap-ui,前身swagger-bootstrap-ui是一个纯swagger-ui的ui皮肤项目一开始项目初衷是为了写一个增 ...
开发小程序，05 后程序员直呼“太简单”？
作者 | 伍杏玲出品 | CSDN(ID:CSDNnews) 在今年 Stack Overflow 的开发者调查报告里,我们发现一项有趣的数据:调查的 9 万名开发者中,70.8% 的开发者早在 1 ...
有理有据：一篇来自前端同学对后端接口的吐槽！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | juejin.im/post/5cfbe8c7 ...

太简单,前端也可以写接口了