当前位置: 首页 > news >正文

node---express

主要记录express的基本使用,系统学习可以去官网
express中文网

初探express

什么是express

express是基于node的一个服务器框架,它是对http模块的封装,简化了node服务器的创建。
目前已经有不错的生态,但他的作者又制作了koa2,我觉得这个东西估计用不久,简单看看就好了。

基本使用

按照下面的指令来安装express框架

npm i express

可以按照下面的代码来创建一个最基本的服务器

const express = require('express');

const app = express();

app.listen(8080, () => {
  console.log('服务器已经启动');
})

可以直接在服务器上挂载请求

// get请求
app.get('/user/:id',(req,res) => {
  // req.qurey可以获取到用户发送的查询参数,默认情况下req.query是一个空的参数
  // res.send(req.query)
  // req.params可以获取到通过:匹配的动态参数
  // 注意: 动态参数的名字会对应params的key名字  ,  动态参数可以有多个
  res.send(req.params)
})

可以使用static方法来托管静态资源
对于use函数之后再做解释

// 可以通过参数挂载路径前缀
// static传入静态资源文件夹的路径
app.use('/static' , express.static('public'))

nodemon

nodemon是一个node服务器的调试工具
可以让我们在修改代码之后不必再重启服务器

通过下面的指令来安装nodemon

npm i nodemon -g

通过nodemon来启动服务器

nodemon app.js

中间件

认识中间件

中间件就是服务器的一些处理程序,通过这些程序来连接前端数据和数据库

中间件本质就是一些函数,这些函数接收三个参数

  • req:前端发送的数据
  • res:用于向前端返回数据的对象
  • next:交给下一个中间件

有点类似于vue的导航守卫,req和res是全局共享的,在执行next()之后,会将他们交给下一个中间件或者路由来处理。
例如:

// 这就是一个中间件函数
const mw = (req , res , next) => {
  console.log('中间件处理完成');
  next();
}

(路由就是一个特殊的中间件,只不过它没有next参数,作为处理的终点)
注意在next之后最后不要再出现任何代码,next要作为中间件的结尾

中间件的分类

全局中间件和局部中间件

  1. 通过 app.use() 注册的中间件称为全局中间件,这些中间件会在全局生效。
    当注册多个中间件时会按照从上到下的顺序依次执行这些中间件。
  2. 在路由函数中注册的中间件称为局部中间件,也就是路由的处理函数。

官方分类

  1. 应用级别:通过app.use(),get(),post()等注册的中间件
  2. 路由级别:挂载在某个路由对象上的中间件
  3. 错误级别:这个中间件会在项目发生错误时被调用,它接收四个参数err,req,res,next,一般放在最后。
  4. 内置中间件:这些中间件不需要引入,可以直接使用
    例如:
    • static 托管静态资源

    • json 处理json数据

    • urlencoded 处理url-encoded格式的数据

  5. 第三方中间件:按照下载,引入,注册的顺序使用,具体有哪些好用的中间件之后再说。

路由

跟前端一样,路由就是映射关系,一个路由对应一个处理函数。

路由的组成

后端的路由由三部分组成:

  • url
  • 请求类型
  • 处理函数

在前端发送请求时,只有url和请求类型都对应时才会执行对应的处理函数。
路由会按照从上到下的顺序依次匹配这些路由。
如果找到对应的路由久停止查找,或者直到最后也没有找到。

路由的使用

  • 路由可以直接在app上进行挂载。
app.get('/user/:id',(req,res) => {
  res.send('ok')
})
  • 也可以使用模块化 的方式

    1. 创建路由
    // 引入express框架
    const express = require('express');
    // 创建路由
    const router = express.Router();
    
    1. 挂载请求
    // 向路由挂载请求
    router.get('/home',(req,res) => {
      res.send('<h1>这里是首页</h1>')
    })
    
    router.get('/about',(req,res) => {
      res.send('<h1>这里是关于</h1>')
    })
    
    1. 导出路由对象
    // 导出路由
    module.exports = router;
    
    1. 注册路由
    const router = require('./router.js')
    // app.use的作用就是注册全局中间件
    // 在注册路由时也可以添加前缀
    app.use(router);
    

接口

接口其实就是路由,不同的url对应不同的处理函数

接口编写

下面是一个接口示例,跟路由的写法几乎一样

const express = require('express')
const apiRouter = express.Router();

// 在这里编写接口
// get接口
apiRouter.get('/get',(req,res) => {
  const query = req.query;
  res.send({
    status: 0,
    msg: '请求成功',
    data: query
  })
})

跨域

只要协议、域名、ip、端口号任意一项不同就会存在跨域问题

后端解决跨域问题有两种方案:cors和jsonp

cors

cors是express的一个第三方中间件

const cors = require('cors');

// 默认情况下,浏览器有同源安全策略
// 但是如果服务器配置了相关的响应头,就可以实现跨域请求
// cors就是由一系列的响应头组成的
app.use(cors())

原理
默认情况下,浏览器有同源安全策略
但是如果服务器配置了相关的响应头,就可以实现跨域请求
cors就是由一系列的响应头组成的

响应头
使用res.setHeader()来配置响应头

  • Access-Control-Allow-Origin : 配置允许访问的外域url
  • Access-Control-Allow-Headers:设置允许访问的请求头
  • Access-Control-Allow-Methods:设置允许请求的请求类型

使用cors之后我们可以不用再去手动配置

简单请求和预检请求
cors的请求分为简单请求和预检请求。
默认的cors为简单请求

  • 仅支持get、post、head请求
  • http头部只支持默认的九种

简单请求的对立面就是预检请求

在发送这些请求的时候,浏览器会先尝试发送option告知服务器,当收到服务器允许访问的请求之后才会发送正式的请求

区别在于:

  • 简单请求只会执行一次
  • 预检请求会发送两次,一次发送option,一次发送正式请求

jsonp

jsonp不推荐使用,很麻烦,而且不属于ajax请求

通过script标签的src属性来向服务器发送请求,服务器返回一个函数并调用

但是这样仅支持get请求
并且不属于ajax

注意jsonp的接口需要在配置cors之前

服务器端返回的是一个立即执行函数

利用jquery配置dataType参数可以发送jsonp请求

相关文章:

  • [Linux]进程间通信(进程间通信介绍 | 匿名管道 | 命名管道)
  • Allegro Design Entry HDL(OrCAD Capture HDL)RF-PCB菜单详细介绍
  • 电商数仓项目中各层的表
  • 移动安全规范 — 3 -个人密码(PIN)传输规范
  • Spring之AOP思想
  • TypeScript 小结
  • Netty(10)协议设计与解析(IdleStateHandler:空闲检测器、心跳)
  • PostgreSQL数据库统计信息——analyze大致流程
  • C开发环境与基础
  • Android系统_MSM8953_android10_adb连接adbd加入密码检测
  • 23设计模式之 --------- 什么是设计模式?
  • 在以「基础设施」为定位的发展阶段里,产业变成了一个可以有诸多创新的存在
  • Vue相关面试题(1)
  • 基于SpringBoot的网上购物商场管理系统
  • Python——time模块
  • 【402天】跃迁之路——程序员高效学习方法论探索系列(实验阶段159-2018.03.14)...
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式
  • JS专题之继承
  • Octave 入门
  • Spring Security中异常上抛机制及对于转型处理的一些感悟
  • Vue 动态创建 component
  • vue 配置sass、scss全局变量
  • WePY 在小程序性能调优上做出的探究
  • zookeeper系列(七)实战分布式命名服务
  • 闭包--闭包作用之保存(一)
  • 基于OpenResty的Lua Web框架lor0.0.2预览版发布
  • 精益 React 学习指南 (Lean React)- 1.5 React 与 DOM
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • 时间复杂度与空间复杂度分析
  • 使用iElevator.js模拟segmentfault的文章标题导航
  • 突破自己的技术思维
  • 学习Vue.js的五个小例子
  • 《TCP IP 详解卷1:协议》阅读笔记 - 第六章
  • ​iOS安全加固方法及实现
  • (06)Hive——正则表达式
  • (52)只出现一次的数字III
  • (libusb) usb口自动刷新
  • (备忘)Java Map 遍历
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (附源码)ssm高校升本考试管理系统 毕业设计 201631
  • (附源码)基于SSM多源异构数据关联技术构建智能校园-计算机毕设 64366
  • (接口封装)
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (一)【Jmeter】JDK及Jmeter的安装部署及简单配置
  • (一)基于IDEA的JAVA基础12
  • (原創) 如何安裝Linux版本的Quartus II? (SOC) (Quartus II) (Linux) (RedHat) (VirtualBox)
  • (原創) 如何將struct塞進vector? (C/C++) (STL)
  • (转)淘淘商城系列——使用Spring来管理Redis单机版和集群版
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • .jks文件(JAVA KeyStore)
  • .NET CORE使用Redis分布式锁续命(续期)问题
  • .net反混淆脱壳工具de4dot的使用
  • @Data注解的作用
  • [20171106]配置客户端连接注意.txt