node.js中接口 你会了嘛

197 阅读4分钟

牛掰的技术都是留给那些愿意看枯燥文章的人

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属性中。我们直接来获取即可。
  • 注意:req.query属性是express框架额外提供的属性
const app = express();
app.get('/get', function(req, res) {
  // 直接返回对象
  console.log(req.query);
  res.send({ name: 'abc' });
});
app.listen('8088', () => {
  console.log('8088');
});

get有参和无参的区别就是有参需要调用rq,query来接受 无参则不需要

post接口--普通键值对

  • post接口与get请求不同在于:它的参数一般是通过请求体来传递的。根据传递的参数的格式不同,分成三种情况来说
  1. 传递普通键值对
  2. 传递form表单(涉及文件上传)
  3. 传递jso

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

注意:

  • app.use(....)之后,在res.body中就会多出一个属性res.body。
  • extended: false:表示使用系统模块querystring来处理传入的参数,也是官方推荐的
  • extended: true:表示使用第三方模块qs来处理传入的参数.
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)
})

post接口--json格式参数

  • 在post传递参数时,如果要传入的参数比较复杂(多级嵌套),则可以使用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 install multer

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是那种格式的参数 普通,json,form-data

image.png

跨域

什么原因导致了浏览器报跨域错误

  1. 发起ajax请求的那个页面的地址 和 ajax接口地址 不在同一个域中
  • 跨域错误:不同源ajax请求====> 报跨域的错误

同源

  • 是指 协议 ,端口 ,域名 都相同叫同源 同样的三者之一有一个不同就是不同源

跨域错误

  1. 浏览器觉得不安全。跨域问题出现的基本原因是浏览器的同源策略。同源策略是一个重要的安全策略,它限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互
  2. 注意,错误是发生在浏览器端的。请求是可以正常从浏览器发到服务器端,服务器也可以处理请求,只是返回到浏览器端时出错了

image.png

解决跨域问题

方法

  1. 使用cros 他是一个npm包,要单独下载使用 npm 包 cors
    npm i cors

  2. 当做express中的中间件,注意代码应该放在顶部

app.use(cors())