使用Express创建接口

1,279 阅读6分钟

Express 是一个基于 Node.js 平台,快速、开放、极简的 web 开发框架对不同的请求能够显示页面;提供接口服务

安装express

express是一个第三方框架在使用之前要先使用npm下载 ,在下载包之前要先创建项目,项目目录名字不要取中文,也不要取为express,

1.  npm init -y       创建package.json文件完成初始化。
2.  npm i express     命令下载express

如果安装不成功:

  1. 换个网络环境
  2. 运行下npm cache clean -f,再重新运行下载命令试试

快速创建web服务器步骤

 1.加载 Express
const express = require('express')

 2. 调用 express() 得到一个 app, 类似于 http.createServer()
const app = express();

 3. 设置请求对应的处理函数
app.get('/access', (req, res) => {
  res.send('hello world')
})

 4. 监听端口号,启动 Web 服务
app.listen(3000, () => console.log('app成功启动 3000!'))

说明:

  • app.get('/access')相当于添加事件监听:当用户以get方式求"/access"时,它后面的回调函数会执行。
  • res.send()是exprss框架给res对象补充提供的方法(http模块中的res是没有这个方法的),用于结束本次请求。类似的还有res.json(), res.sendFile()。

托管静态资源

根目录
├── public
│   ├── css
│   │   └── index.css
│   ├── img
│   │   └── bg.jpeg
│   ├── js
│   │   └── axios.js
│   └── index.html
└── serve.js     # 服务器

例如,如上url分别是请求一张图片,一份样式文件,一份js代码。我们实现的web服务器需要能够直接返回这些文件的内容给客户端浏览器。

如果使用http模块要写很多代码,现在使用express框架,只需一句代码就可以搞定了,这句代码是  express.static('public')

// 加载 Express
const express = require('express')

// 1. 调用 express() 得到一个 app
const app = express();

// 2. 设置请求对应的处理函数
app.use(express.static('public'))


// 3. 监听端口号,启动 Web 服务
app.listen(3000, () => console.log('app listening on port 3000!'))

此时,所有放在public下的内容可以直接访问,注意,此时在url中并不需要出现public这级目录。在public下新建index.html,可以直接访问到。

限制访问前缀

app.use('/public', express.static('public'))

这意味着想要访问public下的内容,必须要在请求url中加上/public

路由和接口

路由(Routing)是由一个 URL(或者叫路径标识)和一个特定的 HTTP 方法(GET、POST 等)组成的,涉及到应用如何处理响应客户端请求。每一个路由都可以有一个或者多个处理器函数,当匹配到路由时,这些个函数将被执行。

const app = express();
// 定义路由
app.METHOD(PATH, HANDLER)
  • app 是 express 实例 。(const app = express())
  • METHOD 是一个 [HTTP 请求方法] 全小写格式。如:post,get,delete等
  • PATH 是请求路径(相当于在http模块中用到过的 url.parse(req.url).pathname
  • 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来决定。

yuque_diagram.jpg

  • 方法一:请求行。常见方式如下:

    • 使用ajax技术,通过get方式传参。
    • 在浏览器地址栏中输入接口地址并补充上查询字符串。
  • 方法二:请求体

    • ajax中的post, put, delete可以从请求体中进行传参。

express写get接口

get无参数接口

const express = require('express');
const app = express();
app.get('/get', function(req, res) {
  // 直接返回对象
  res.json({ name: '测试' });
});
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);     //get类型的接口接收返回的参数使用req.query
  res.send({ name: 'abc' });
});
app.listen('8088', () => {
  console.log('8088');
});

注意:req.query属性是express框架额外提供的属性

post接口-普通键值

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

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

普通键值对参数

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

前端要传入的代码

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

post接口-form-data文件上传

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

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

后端框架代码小结

传参方式前端 content-type后端框架express
请求行get方式req.query
请求体application/x-www-form-urlencodeapp.use(express.urlencoded()); req.body
请求体application/jsonapp.use(express.json() ); req.body
请求体multipart/form-data1. 引入包  const multer = require('multer'); 2. 配置app.post('/apiname', upload.single() , req.body)
  • req.query 该属性主要用于get()方法时传递参数使用,会直接获取地址栏传递的参数。
  • app.use(express.urlencoded())可以用于接收一些简单类型数据,例如字符串类型,数组类型。
  • req.body 用来获取post传递的键值对。
  • app.use(express.json())可以接收复杂数据类型,例如对象的嵌套类型。