前端程序员如何去写接口
站长
· 阅读数 40
Express基本介绍
Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架。
-
框架: 是一个半成品,用来快速解决一类问题;哭就是工具集,(使用费仓灵活) (框架：是一个半成品，用来快速解决一类问题；库就是工具集，使用非常灵活） （框架有：bootstrap, lay-ui, express, vue, react ; 库：zepto.js , jQuery, day.js, underscore, lodash, art-template, axios, echart.....)
-
web 开发: 对不同的请求能够显示页面；提供接口服务；
理解:
- 我们前面用http模块来支持 web服务，现在要用 express 来写 web服务
- 对于node.js来说，Express 是一个第三方模块，有丰富的 API 支持，强大而灵活的中间件特性
- Express 不对 Node.js 已有的特性进行二次抽象，只是在它之上扩展了 Web 应用所需的基本功能
中间件
- 给用户提供更好的服务
- 可方便的拆卸
下载express包
express包下载方式与其它第三方包一致,本地安装npm i express 注意:
- 项目目录名字不能去中文,也不要取为express
- 如果安装不成功:
- 换个网络环境
- 运行npm cache clean -f,再重新运行下载命令试试
快速创建web服务器
在项目根目录下新建一个js文件,例如app.js,其中输入代码如下:
1 // 0. 加载 Express
2 const express = require('express')
3
4 // 1. 调用 express() 得到一个 app
5 // 类似于 http.createServer()
6 const app = express()
7
8 // 2. 设置请求对应的处理函数
9 // 当客户端以 GET 方法请求 / 的时候就会调用第二个参数：请求处理函数
10 app.get('/', (req, res) => {
11 res.send('hello world')
12 })
13
14 // 3. 监听端口号，启动 Web 服务
15 app.listen(3000, () => console.log('app listening on port 3000!'))
说明：
- app.get('/') 相当于添加事件监听：当用户以get方式求 "/" 时，它后面的回调函数会执行，其回调函数中的req,res与前面所学http模块保持一致。
- res.send() 是 exprss框架给res对象补充提供的方法(http 模块中的 res 是没有这个方法的），用于结束本次请求。类似的还有res.json(), res.sendFile() 。
- express 框架会增强req,res的功能
路由和接口
路由(Routing)是由一个URL(或者叫路径标识)和一个特定的HTTP方法(GET、POST等)组成的,涉及到应用处理响应客户端请求。每一个路由都可以有一个处理器函数.当匹配到路由时,这些个函数将被执行。
格式
1 const app = express();
2
3 //定义路由
4 app.METHOD(PATH,HANDLER)
其中:
- app 是 express 实例。(const app = express())
- MRTHOD 是一个 HTTP 请求方法。 全小写格式。如:post,get,delete等
- PATH 是请求路径(相当于在http模块中用到过得 url.parse(req.url).pathname)
| 浏览器url | 服务端路径 |
|---|---|
| http://localhost:8080 | / |
| http://localhost:8080/public/a/index.html | /public/a/index.html |
| http://localhost:8080/index.html?a=1&b=2 | /index.html |
HANDLER是当路由匹配到时需要执行的处理函数。（req,res）=>{ }
写接口-整体说明
接口传参
我们使用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无参数
接口1: get请求不带参数
1 const express = require('express');
2 const app = express();
3 app.get('/get', function(req, res) {
4 // 直接返回对象
5 res.json({ name: 'ceshi' });
6 });
7 app.listen('8088', () => {
8 console.log('8088');
9 });
注意:
- res.json() 是 express 提供的方法。
get接口有参数
express框架会自动收集get类型的接口从url地址中传递的查询字符串参数，并自动保存在req对象的query属性中。我们直接来获取即可。
接口2: get接口有参数
1 const express = require('express');
2 const app = express();
3 app.get('/get', function(req, res) {
4 // 直接返回对象
5 console.log(req.query);
6 res.send({ name: 'abc' });
7 });
8 app.listen('8088', () => {
9 console.log('8088');
10 });
注意:
- req.query属性是express框架额外提供的属性。
get接口示例
1 const express = require('express')
2 //引入express包
3
4 const app = express()
5
6 app.listen(3006,()=>{
7 console.log('服务器启动了.....');
8 })
小黑窗运行正常404报错
const express = require('express')
const app = express()
//app.方式(url,回调)
app.get('/api/getbooks',(req,res) => {
//当前的参数是
console.log('当前的参数是',req.query);
const data = {
"status" : 200,
"msg" : "获取图书列表成功",
"data" : [
{
"id" : 1,
"bookname" : "卷王强者恐怖如斯",
"author" : "鹏桑",
"publisher" : "上海图书出版社"
}, {
"id" : 2,
"bookname" : "我和故乡的樱花",
"author" : "谭桑",
"publisher" : "富士山出版社"
}, {
"id" : 3,
"bookname" : "我和卷王的宫斗",
"author" : "刘桑",
"publisher" : "418出版社"
}
]
}
res.send(data)
})
app.listen(3006,()=>{
console.log('服务器启动了.....');
})
post接口
post接口与get请求不同在于: 它的参数一般是通过请求体来传递的。根据传递的参数的格式不同,分为成三种情况来说:
- 传递普通键值对
- 传递form表单（涉及文件上传）
- 传递json
普通键值对参数
具体来说当请求头的 content-type 为 x-www-form-urlencoded 时，表示上传的普通简单键值对 。
post接口-普通键值对接口
const express = require("express");
// 引入express包
// 中间件(获取参数)
app.use(express.urlencoded());
//post接口-普通键值对接口
//post: 本机ip:3009/testpost
app.post("/testpost", (req, res) => {
//普通键值对格式的参数
//上面使用了app.use(express.urlencoded())这个中间件
//req.body会自动收集 通过x-www-form-urlencoded这种方式传过来的参数
//user'name = xxx & password = xxxxx
console.log("post请求", req.body);
//真的假接口
//机接口是真的,但是没有实现具体功能
// res.send({a: 1,msg:"xxx"})
res.send({ a: 1 });
});
app.listen(3009, () => {
console.log("服务器启动了....");
});
注意：
app.use(....)之后，在res.body中就会多出一个属性res.body。extended: false：表示使用系统模块querystring来处理传入的参数，也是官方推荐的extended: true：表示使用第三方模块qs来处理传入的参数.
post接口-json格式的参数
在post传递参数时，如果要传入的参数比较复杂（多级嵌套），则可以使用json格式上传。
const express = require("express");
// 引入express包
//会自动加入req.body属性，这个属性中就包含了post请求所传入的参数
app.use(express.json());
// post + 复杂的JSON格式的数据
app.post('/testpost-json', (req, res) => {
// 普通键值对格式的参数
// 上面使用了app.use(express.urlencoded())这个中间件，
// req.body会自动收集 通过 x-www-form-urlencoded 这种方式传过来的参数
// username=xxx&password=xxxxx
console.log('post请求', req.body)
// 真的假接口
// 接口是真的
// 没有实现具体功能 =====》 在开发的时候使用
res.send({a: 1,msg:"xxx"})
})
app.listen(3009, () => {
console.log("服务器启动了....");
});
post接口-form-data文件上传
要先下载multer包 npm intall multer
//引入包
const multer = require("multer");
//配置
//上传文件保存在这个目录下
const upload = multer({ dest: "uploads/" });
//uploads表示一个目录名,随便设置成什么都可以
app.post("/upload-img", upload.single("image"), (req, res) => {
/*
如何接收参数
1. 文件(image)
自动保存到upload指定的位置,会保存的信息放在req.file
req.file 记录了文件上传的信息
req.body 记录了其他普通参数(非文件)的信息
2. 普通属性name
*/
console.log(req.file);
console.log(req.body);
res.send({ status: 200, file: req.file, data: req.body });
});
app.listen(3009, () => {
console.log("服务器启动了....");
});
说明：
- 如果当前目录下没有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) |
转载自:https://juejin.cn/post/7091670387192234021