在写api的接口之前做好准备下载express模块到当前文件夹

在小黑窗下载 npm i express

书写api的四个接口的代码如下:

一 get接口

这里需要用到 express的一个特点就是中间件的特性强大而又灵活
需要用到 express 的 static的属性进行处理 static意思是静止的静态的
所以express.static()这个语法叫静态托管资源静态托管资源是什么呢？
在web 的领域，一切请求全都是为了资源，资源也可以任意的形式，文本文件，图片文件，字符片段等等。只要明白了这一点，理解静态文件服务就相对轻松了。静态资源就是获取这些资源的。

 // 引入express模块
const express = require('express')

// 调用express()函数 用常量接收
const app = express()

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

app.get('/getapi', (req, res) => {
  console.log('接收的参数是', req.query)
  // 返回数据给客服端  结束这次响应
  res.send({ message: 'ok' })
})

// 启动服务器
app.listen(3000, () => {
  console.log('服务器启动了');
})

二 post接口传普通键值对数据

 // 引入express模块
const express = require('express')

// 调用express()函数 用常量接收
const app = express()

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

// 接口一 get接口 
app.get('/getBooks', (req, res) => {
  console.log('接收的参数是', req.query)
  // 返回数据给客服端  结束这次响应
  res.send({ message: 'ok' })
})

 // 接口2 post 普通键值对
app.post('/post', (req, res) => {
  // 如何接受普通键值对的参数？
  console.log('接受到的参数是', req.body)
  res.send({ message: 'ok' })
})

// 启动服务器
app.listen(3000, () => {
  console.log('服务器启动了');
})

三 post接口 + 复杂的json数据类型

// 引入express模块
const express = require('express')

// 调用express()函数 用常量接收
const app = express()

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

app.get('/getBooks', (req, res) => {
  console.log('接收的参数是', req.query)
  // 返回数据给客服端  结束这次响应
  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) => {
  // 如何接受json数据类型的参数？
  console.log('接受到的参数是', req.body)
  res.send({ message: 'ok' })
})

// 启动服务器
app.listen(3000, () => {
  console.log('服务器启动了');
})

四 post接口 form-data 文件上传

这里就需要安装一个第三方的包multer这个包（不属于express）来获取上传的信息。 Multer 是一个 node.js 中间件，用于处理 multipart/form-data 类型的表单数据，它主要用于上传文件。

enctype="multipart/form-data"

1.安装multer包

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

// 引入express模块
const express = require('express')

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

// 调用express()函数 用常量接收
const app = express()

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

app.get('/getBooks', (req, res) => {
  console.log('接收的参数是', req.query)
  // 返回数据给客服端  结束这次响应
  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) => {
  // 如何接受json数据类型的参数？
  console.log('接受到的参数是', req.body)
  res.send({ message: 'ok' })
})

// 接口4 post 文件上传
app.post('/publish', upload.single('cover'), (req, res) => {
  // 如何接受文件上传的参数？
  console.log('接受到的参数是', req.body)
  res.send({ message: 'ok' })
})

// 启动服务器
app.listen(3000, () => {
  console.log('服务器启动了');
})

解决跨域的问题

当你双击点击app.html页面去运行代码的时就会报一个跨域的错误
跨域错误:不同源的ajax请求====> 报跨域的错误

怎么去解决这个问题呢

我们可以下载一个第三包来解决这个跨域的问题。
CORS包什么是CORS包呢
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
1.它是一个npm包，要单独下载使用 npm 包 cors
npm i cors
2. 当做express中的中间件，注意代码应该放在顶部

// 引入express模块
const express = require('express')
// 引入包multer
const multer = require('multer');
// 配置    uploads表示一个目录名，你也可以设置成其它的
const upload = multer({ dest: 'uploads/' }) // 上传的文件会保存在这个目录下
// 引入 cors包
var cors = require('cors')
// 处理跨域请求
app.use(cors())
// 调用express()函数 用常量接收
const app = express()
// 设置请求对应的处理函数
app.use(express.static('public'))
app.get('/getBooks', (req, res) => {
  console.log('接收的参数是', req.query)
  // 返回数据给客服端  结束这次响应
  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) => {
  // 如何接受json数据类型的参数？
  console.log('接受到的参数是', req.body)
  res.send({ message: 'ok' })
})

// 接口4 post 文件上传
app.post('/publish', upload.single('cover'), (req, res) => {
  // 如何接受文件上传的参数？
  console.log('接受到的参数是', req.body)
  res.send({ message: 'ok' })
})

// 启动服务器
app.listen(3000, () => {
  console.log('服务器启动了');
})

这样就解决了这个问题在重新启动服务运行就没问题了

还有每次发送请求的时候都去黑窗口或者Visual Studio Code下面的终端里试一下有没有错误
要不然都写完了突然在执行代码时出错可就有点难找错误了

今天心情不错，写了个简单的四个不同数据的接口 慢慢学习后端

在写api的接口之前做好准备 下载express模块到当前文件夹