作为一名前端人员,深刻体会后端兄弟们的辛苦,是很有必要!!
体会一下 ,那就自己写个没有功能的伪接口吧
准备工作 三个包 服务器傻瓜操作框架express 文件上传multer 解决跨域问题的cors 转备好小demo
├── public
│ ├── js
| | └── axios.js
│ └── index.html # 提前准备好的页面
└── server.js
// 静态资源托管，直接访问public/index.html
// 1. 引入包
const express = require('express')//服务器框架
const multer = require('multer')//文件上传
const cors = require('cors')//解决跨域
// 2. 配置
const upload = multer({ dest: 'uploads/' })//文件上传 设置接收路径
const app = express()//服务器框架
app.use(cors())//处理跨域 的cros包
app.use(express.static('public'))//静态资源委托
app.use(express.urlencoded())//post 的键值对格式
app.use(express.json())//post 的json复杂数据格式
//接口get
app.get(`/getapi`, (req, res) => { //get请求 静态资源托管
console.log(`接收到的文件`, req.query)//get请求的url传参通过req.query获取
res.send({message:`ok`})
})
//post 键值对
app.post(`/post`, (req, res) => {
console.log(req.body) //post请求体传参通过 req.body 获取
res.send({ message: `ok` })
})
//post json格式
app.post(`/postJSON`, (req, res) => {
console.log(req.body)//json格式 复杂数据类型 跨域时要发送两个ajax请求 一个是探路的 options
res.send({ message: `ok` })
})
//接口4 文件上传 调包 multer 设置 这个中间件 (upload接收路径 调upload.single(`文件名`))
app.post(`/publish`, upload.single(`cover`), (req, res) => {
console.log(req.body);
console.log(req.file);
res.send({ message: `ok` })
})
app.listen(3000, () => {
console.log('3000');
})
前后端的对比 就可以看到不同的数据类型 对应的获取数据方式也是不同的 其实有了包的帮助 好像变得超简单了
get接口有参数
express框架会自动收集get类型的接口从url地址中传递的查询字符串参数，并自动保存在req对象的
query属性中。我们直接来获取即可。post接口-普通键值
当请求头的content-type为x-www-form-urlencoded时，表示上传的普通简单键值对 。 注意：
- app.use(....)之后，在res.body中就会多出一个属性res.body。
extended: false：表示使用系统模块querystring来处理传入的参数，也是官方推荐的extended: true：表示使用第三方模块qs来处理传入的参数post接口-json格式的参数
在post传递参数时，如果要传入的参数比较复杂（多级嵌套），则可以使用json格式上传
post接口-form-data文件上传
如果post涉及文件上传操作，则需要在服务器端额外使用第三方
multer这个包（不属于express）来获取上传的信息。安装包命令
npm install multerMulter 是一个 node.js 中间件，用于处理
multipart/form-data类型的表单数据，它主要用于上传文件。 说明：
- 如果当前目录下没有uploads，它会自动创建uploads这个文件夹
upload.single只是处理了文件的上传。你仍可以通过req.body来获取其它参数
最后还有跨域问题
这类的常见问题 还是要跟后端大哥说说好话的 因为不同源 所以我用了官方的CORS ,一个W3C标准而已，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出
XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
