如何用express写一个接口

Joker_Z
1,207 阅读7分钟

用express写一个接口

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

  • 请求行： 保存了请求方式，地址，可以以查询字符串的格式附加一部分数据。
  • 请求头：它可以附加很多信息，其中content-type用来约定请求体中保存的数据格式。
    content-type常见有三种取值：
content-type的值表示请求体的数据格式示例
application/x-www-form-urlencode普通键值对象a=2&c=1
application/jsonjson对象{a:1,b:{c:1}}
multipart/form-data上传文件file
  • 请求体:  本次请求携带的参数。至于这些参数到了后端应该如何解析出来，由请求头中的content-type来决定。

如何来进行传参

1.请求行传参:

  • 使用ajax技术,通过get方式来进行传参
  • 在浏览器地址栏中输入接口地址并补充上查询字符串。
    2.请求体传参 :
  • ajax中的post, put, delete可以从请求体中进行传参。

另外，请求头中的content-type用来告之服务器应该以何种方式去解析请求体中的数据。

express写get接口

get无参数

//1. 导入express包
const express = require('express')
//2. 调用express()
const app = express()
//3. 设置请求对应的处理函数
//3.1 第一个参数是url路径,第二个参数是要执行的回调函数
app.get('/api/getbooks', function(req, res) {
  // 3.2 直接返回对象( res.json()是express提供的方法)
  res.json({ name: 'ceshi' })
});
app.listen('3009', () => {
  console.log('服务器已经启动')
});

步骤:

  1. 先导入express包

  2. 调用express()

  3. 设置请求对应的处理函数 app是express的实例,app后面是请求方式,括号里面的第一个参数是url路径,第二个参数是一个回调函数
    req.url获取的是端口后面的url路径
    req.query获得的是get请求的参数,并返回一个对象
    res.send()是向客户端发送内容,并结束本次响应

  4. 监听端口号,启动服务app.listen()
    第一个参数是端口号
    第二个参数是回调函数,显示服务器是否启动成功

注意: res.json()是express提供的方法。

get有参数

//1.导入包
const express = require('express')

//2.调用express()
const zz = express()

//3.设置请求对应的处理函数
zz.get('/api/getbooks', (req, res) => {
    //3.1把图书信息单独存放
    const allBooks = [
        {
            "id": 1,
            "bookname": "西游记",
            "author": "吴承恩",
            "publisher": "北京图书出版社"
        },
        {
            "id": 2,
            "bookname": "红楼梦",
            "author": "曹雪芹",
            "publisher": "上海图书出版社"
        },
        {
            "id": 3,
            "bookname": "三国演义",
            "author": "罗贯中",
            "publisher": "北京图书出版社"
        }
    ]
    //3.2 获取id(解构赋值)
    let { id } = req.query

    //3.3声明一个空的数组
    let book = []
    //3.4 把用户给的参数和我们已经有的数据进行比较
    if (id) {
        book = allBooks.filter(item => item.id == id)
    } else {
        book = allBooks
    }
    //3.5 拿到我们要的数据
    const data = {
        "status": 200,
        "msg": "获取图书列表成功",
        "data": book
    }
    //给客户端发送内容,并结束响应
    res.send(data)
})

//4.开启服务器
zz.listen(3009, () => {
    console.log('服务器已经启动')
})

步骤:

  1. 先导入express包
  2. 调用express()
  3. 设置请求对应的处理函数 3.1 把图书的信息单独存放起来
    3.2 获取id req.query
    3.3 声明一个空的数组
    3.4 把客户端传过来的参数id和已经有的数据id进行条件判断,存入新的数组
    3.5 拿到我们要的数据,放进data里面
    3.6 给客户端发送内容,并结束响应
  4. 监听端口号,启动服务器

post参数-普通键值对

注意：
1.post的参数一般是通过请求体进行传参
2.当请求头的content-type为x-www-form-urlencoded时，表示上传的普通简单键值对

//1.导入包
const express = require('express')

//2.调用express()
const zz = express()

//3. post请求（键值对格式）
//3.1 设一个中间件(普通键值对)
zz.use(express.urlencoded())
zz.post('/testpost', (req, res) => {
//3.2 获得客户端发过来的参数
    console.log('post请求是', req.body)
//3.3 给客户端发送内容，并结束响应
    res.send({message：'ok' })
})

//4.开启服务器
zz.listen(3009, () => {
    console.log('服务器已经启动')
})

步骤：
1.导入express包
2.调用express()
3.设一个中间件（普通键值对）
zz.use(express.urlencoded())
4.设置请求对应的处理函数
5.req.body会自动收集,通过x-www-form-urlencoded这种方式传过来的参数 req.body
6.给客户端发送内容，并结束请求 7.监听端口号，启动服务器

post参数-json格式的参数

注意：在post传递参数时，如果要传入的参数比较复杂（多级嵌套），则可以使用json格式上传

//1.导入包
const express = require('express')

//2.调用express()
const zz = express()

//3.  传一个复杂的json数据
//3.1 加一个中间件(json格式的参数)
zz.use(express.json())
//3.2 设置请求处理函数
zz.post('/testpost-json', (req, res) => {
//3.3 获得客户端发过来的参数
console.log('post请求', req.body)
//3.4 给客户端发送内容，并结束响应
res.send({message：'ok' })
    
//4.开启服务器
zz.listen(3009, () => {
onsole.log('服务器已经启动')
})
})

步骤：
1.导入express包
2.调用express（）
3.设一个中间件（json格式的参数）zz.use(express.json())
4.设置请求对应的处理函数
5.获取客户端传过来的参数 req.body
6.给客户端发送内容，并结束响应
7.监听端口号，启动服务器

post参数-form-data文件上传

  • 如果post涉及文件上传操作，则需要在服务器端额外使用第三方multer这个包（不属于express）来获取上传的信息
  • Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件
//1.导入包
const express = require('express')
const multer = require('multer')

// 2. 配置
const upload = multer({ dest: 'uploads/' }) 
// 上传的文件会保存在这个目录下
// uploads表示一个目录名，你也可以设置成其它的

//3.设置请求处理函数
zz.post('/upload-img', upload.single('images'), (req, res) => {
    //1.文件(images)
    //自动保存到upload指定的位置,信息会保存在req.file里面
    //req.file记录了上传文件的信息
    //req.body记录了其他信息
    //2. 普通属性name
    //3.给客户端发送内容,并结束响应
    res.send(req.body)
})

//4.开启服务器
zz.listen(3009, () => {
    console.log('服务器已经启动')
})

步骤：
1.安装一个我们需要的包multer
2.引入这个包const multer = require('multer')
3.进行配置const upload = multer({ dest: 'uploads/' })
4.设置请求的处理函数：
在这里，第一个参数是url路径，第二个参数是upload.single('images')，upload.single表示单文件上传， 'images' 表示要上传的文件在本次上次数据中的键名。对应于前端页面上的：<input type="file" name='cover'/>，第三个参数是一个回调函数
5.给客户端发送内容，并结束响应
6.监听端口号，开启服务器

后端的框架代码

传参方式前端 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)

拓展RESTful接口

  • RESTful API是目前比较成熟的一套互联网应用程序的API设计理论
  • 如果一个架构符合REST的约束条件和原则，我们就称它为RESTful架构。REST本身并没有创造新的技术、组件或服务，而隐藏在RESTful背后的理念就是使用Web的现有特征和能力， 更好地使用现有Web标准中的一些准则和约束。
  • RESTful设计是：
    1.通过URL设计资源。接口名一般都是名词，不包含动词
    2.请求方式（get,post,delete,put）决定资源的操作类型

普通的接口设计和RESTful接口设计的区别

1.普通接口设计后面的url是不同的，是通过url来决定资源的操作类型
2.RESTful接口设计后面的url可以是相同的，它是通过请求方式来决定资源的操作类型

avatar
文章
阅读
粉丝