用express写get,post接口/解决跨域问题

432 阅读2分钟

准备工作 1.创建项目 2.项目初始化 3.下express/multer/cors包

根目录
├── public
│   ├── js
│   │   └── axios.js
│   └── api.html
└── app.js     # 服务器

get 接口

//接口1 get 
app.get('/getapi', (req, res) => {
  console.log('接收到的参数是', req.body)
  res.send({ message: 'ok' })
})

post接口 普通键值对 需要添加中间件

app.use(express.urlencoded());
})

post接口 JSON类型 需要添加中间件

app.use(express.urlencoded());//接收参数普通键值对类

post接口 文件上传 需要借助第三方multer包

// 1. 引入包
const multer = require('multer');
// 2. 配置
const upload = multer({ dest: 'uploads/' }) // 上传的文件会保存在这个目录下
// uploads表示一个目录名,你也可以设置成其它的
// 3. 使用
// 这个路由使用第二个参数 .upload.single表示单文件上传, 'cover' 表示要上传的文件在本次上次数据中的键名。对应于前端页面上的:
//  <input type="file" name='cover'/>
app.post('/publish', upload.single('cover'), (req, res) => {
 // req.file 记录了文件上传的信息
 // req.body 记录了其它普通参数(非文件)的信息
 // 其它操作
  console.log('接收到的参数是', req.file)
  res.send({ message: 'ok' })
})

解决跨域问题

// 解决跨域问题
var cors = require('cors')
app.use(cors())

全部代码

// 静态资源托管,直接访问public/api.html
const express = require('express')
const app = express()
// 1. 引入包
const multer = require('multer');
// 2. 配置
const upload = multer({ dest: 'uploads/' }) // 上传的文件会保存在这个目录下
// uploads表示一个目录名,你也可以设置成其它的
app.use(express.static('public'))//静态资源托管
app.use(express.urlencoded());//接收参数普通键值对类
app.use(express.json()); //JSON类型
// 解决跨域问题
var cors = require('cors')
app.use(cors())
//接口1 get 
app.get('/getapi', (req, res) => {
  console.log('接收到的参数是', req.body)
  res.send({ message: 'ok' })
})
//接口2 post 普通键值对
app.post('/post', (req, res) => {
  console.log('接收到的参数是', req.body)
  res.send({ message: 'ok' })
})
//接口3 post JSON类型
app.post('/postJSON', (req, res) => {
  console.log('接收到的参数是', req.body)
  res.send({ message: 'ok' })
})
//接口3 post 文件上传
app.post('/publish', upload.single('cover'), (req, res) => {
  console.log('接收到的参数是', req.file)
  res.send({ message: 'ok' })
})
app.listen(3000, () => {
  console.log('3000');
})