likes
comments
collection
share

【Nodejs】Express实现接口

作者站长头像
站长
· 阅读数 39

介绍

  • Express 是一个第三方模块，用于快速搭建服务器 类似于jquery与DOM
  • Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架。
  • express保留了http模块的基本API，使用express的时候，也能使用http的API
  • express还额外封装了一些新方法，能让我们更方便的搭建服务器

Express 官网

Express 中文文档（非官方）

Express GitHub仓库

node框架

node-http模块 ==⇒ express框架 ==⇒ koa =⇒ egg.js

安装

npm i express

express封装的新方法

  • express
    • express.static() -- 开放静态资源
    • express.urlencoded() -- 获取POST请求体
  • app
    • app.get() -- 处理客户端的GET请求
    • app.post() -- 处理客户端的POST请求
    • app.use() -- 设置应用级别的配置
  • req
    • req.body -- 获取POST请求体
    • req.params -- 获取GET请求动态参数
    • req.query -- 获取GET请求参数(获取查询字符串参数)
  • res
    • res.sendFile(文件的绝对路径) -- 读取文件，并将结果响应
    • res.set({name, value}) -- 设置响应头
    • res.status(200) -- 设置响应状态码
    • res.send(字符串或对象) -- 响应结果
    • res.json(对象) -- 以JSON格式响应结果
    • res.jsonp() -- 以JSONP格式响应结果

请注意，在express中，我们仍然可以使用http模块中的方法。

简单请求和复杂请求

简单请求

符合以下条件的，为简单请求：

  1. 请求方式只能 为：GET, HEAD , POST
  2. 且Content-Type的值仅限于
    • text-plain
    • multipart/form-data
    • application/x-www-form-urlencoded

复杂请求

特点：发两次请求

会先发一次预检请求 OPTIONS

如果OPTIONS中又允许跨域的头信息，浏览器会发第二次请求

使用Express构造Web服务器

nodemon 启动服务。 【Nodejs】Express实现接口

步骤

  1. 加载 express 模块
  2. 创建 express 服务器
  3. 开启服务器
  4. 监听浏览器请求并进行处理
// 1. 导入express模块
const express = require('express')
// 2. 创建服务器
const app = express()
// 3. 启动服务器
app.listen(3000, function () {
  console.log('服务器启动成功')
})

// express 处理用户请求
// app.get() 用于处理用户的get请求
// app.post() 用于处理用户的post请求
app.get('/index',(req,res) => {
  res.send('你好，新世界')
})
app.get('/login', (req,res) => {
  res.send('<h1>哈哈</h1>')
})
// 更多的是返回一个数据（express自动把这个对象转化为JSON ）
app.get('/user', (req,res) => {
  res.send({
    name: 'zs',
    age: 18,
    gender: '女'
  })
})

实现get接口

接口服务器：

根据用户的请求返回数据（JSON数据）

实现一个简单的get接口

const express = require('express')

const app = express()
app.listen(3000, () => {
  console.log('服务器启动成功了')
})
app.get('/login', (req, res) => {
  // 允许该接口跨域访问  CROS
  res.setHeader('Access-Control-Allow-Origin', '*') // *表示都可以跨域访问
  res.send({
    code: 200,
    message: '成功'
    
  })
})

获取查询字符串

什么是查询字符串？

url地址后面的这些： 【Nodejs】Express实现接口

使用req.query获取查询字符串

  • 接口
const express = require('express')

const app = express()
app.listen(3000, () => {
  console.log('服务器启动成功了')
})
app.get('/login', (req, res) => {
  // 允许该接口跨域访问
  res.setHeader('Access-Control-Allow-Origin', '*') // *表示都可以跨域访问
  console.log(req.query)
  const {username, password} = req.query
  if(username === 'admin' && password === '123456') {
    res.send({
      code: 200,
      message: '成功'
    })
  } else {
    res.send({
      code: 400,
      message: '用户名或密码错误'
    })
  }
})

获取到的查询字符串：

【Nodejs】Express实现接口

  • 页面
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="text" placeholder="请输入用户名" class="username">
  <br>
  <input type="text" placeholder="请输入密  码" class="pwd">
  <br>
  <button>登录</button>
  <script src="node_modules/axios/dist/axios.js"></script>
  <script>
    document.querySelector('button').onclick = async function () {
      const username = document.querySelector('.username').value
      const password = document.querySelector('.pwd').value
      const res = await axios({
        method: 'get',
        url: 'http://localhost:3000/login',
        params: {
          username,
          password
        }
      })
      console.log(res)
    }
  </script>
</body>
</html>

获取动态参数

url/:id/:name/:age :后面的就叫动态参数

使用req.params获取动态参数

app.get('/getUser/:id', (req, res) => {
  // 允许该接口跨域访问
  res.setHeader('Access-Control-Allow-Origin', '*')
  console.log(req.params)
  res.send({
    id: req.params.id,
    name: 'zs',
    age: 10

  })
})

【Nodejs】Express实现接口 【Nodejs】Express实现接口

接口风格

目前比较流行的是rest风格， 即简洁的接口风格

表现： id直接拼接到url中，也就是使用动态参数

实现post请求

注意：由于post请求的Content-Type是application/json , 所以它是一个复杂请求。

发送post请求步骤

  1. 处理所有的options请求
app.options('*', (req, res) => {
  // 允许CORS跨域的域名
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许CORS跨域的请求方式，默认只有GET,POST
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE')
  // 允许CORS跨域请求的请求头
  res.setHeader('Access-Control-Allow-Headers', 'content-type')
  res.send(null)
})
  1. 发送post请求
app.post('/login', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.send({
    code: 200,
    message: '登陆成功'
  })
})
  1. 如果要拿到post请求的请求体
    • 使用req.body
    • 必须使用一个**内置的中间件 **express.json()
app.use(express.json())
...
...
app.post('/login', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  console.log(req.body)
  res.send({
    code: 200,
    message: '登陆成功'
  })
})

【Nodejs】Express实现接口 【Nodejs】Express实现接口

服务器端接收不同类型的请求体，使用的方式是不同的

  • urlencoded ---> app.use(express.urlencoded({extended: false}));
  • application/json ---> app.use(express.json()); -- 没有演示
  • form-data ---> 服务器端使用第三方模块处理（multer）

中间件

特质业务处理流程中的中间处理环节 【Nodejs】Express实现接口

  • 中间件就是一个函数, 一般写在请求之前
  • 有三个基本参数
    • req 请求相关的对象
    • res 响应相关的对象
    • next 函数，必须调用next 中间件才会向下传递
    const express = require('express')
const app = express()
// app.use(中间件) // 所有的请求之前都会调用中间件
const middle = function (req, res, next) {
  console.log('我是中间件')
  // 处理完一定要记得调用next
  next()
}
app.use(middle)
app.listen(3000, () => {
  console.log('服务器启动了')
})

app.get('/login', (req, res) => {
  res.send('登录')
})
app.get('/user', (req, res) => {
  res.send('用户')
})
app.get('/index', (req, res) => {
  res.send('首页')
})

【Nodejs】Express实现接口

用中间件解决跨域

声明一个中间件AllowCrossDomain

const express = require('express')
const app = express()
// app.use(中间件) // 所有的请求之前都会调用中间件
const AllowCrossDomain = function (req, res, next) {
  // 允许CORS跨域的域名
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许CORS跨域的请求方式，默认只有GET,POST
  res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE')
  // 允许CORS跨域请求的请求头
  res.setHeader('Access-Control-Allow-Headers', 'content-type')
  // 处理完一定要记得调用next
  next()
}
app.use(AllowCrossDomain)
app.listen(3000, () => {
  console.log('服务器启动了')
})

app.post('/login', (req, res) => {
  res.send({
    code: 200,
    message: '登陆成功'
  })
})
app.get('/user', (req, res) => {
  res.send('用户')
})
app.get('/index', (req, res) => {
  res.send('首页')
})

express内置的中间件

  1. static

静态资源

// img是一个文件夹
// 直接把img作为公共的静态资源目录
app.use(express.static('img'))
  1. urlencoded
  • 处理application/x-www-form-urlencoded
  • 把请求体挂到req.body上
  1. json
    • 处理application/json
    • 把请求体挂到req.body上

一般 2， 3 同时使用

// 处理json数据
app.use(express.json())
// 处理form-urlencoded数据
app.use(express.urlencoded({extended: false}))
转载自:https://juejin.cn/post/7230613183185076280
评论
请登录