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

初探express

什么是express

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

基本使用

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

npm i express
1

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

const express = require('express');

const app = express();

app.listen(8080, () => {
  console.log('服务器已经启动');
})
1
2
3
4
5
6
7

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

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

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

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

nodemon

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

通过下面的指令来安装nodemon

npm i nodemon -g
1

通过nodemon来启动服务器

nodemon app.js
1

中间件

认识中间件

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

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

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

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

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

（路由就是一个特殊的中间件，只不过它没有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
2
3

• 也可以使用模块化 的方式

  1. 创建路由

  // 引入express框架
  const express = require('express');
  // 创建路由
  const router = express.Router();
  1
  2
  3
  4

  2. 挂载请求

  // 向路由挂载请求
  router.get('/home',(req,res) => {
    res.send('
  这里是首页
  ')
  })
  
  router.get('/about',(req,res) => {
    res.send('
  这里是关于
  ')
  })
  1
  2
  3
  4
  5
  6
  7
  8

  3. 导出路由对象

  // 导出路由
  module.exports = router;
  1
  2

  4. 注册路由

  const router = require('./router.js')
  // app.use的作用就是注册全局中间件
  // 在注册路由时也可以添加前缀
  app.use(router);
  1
  2
  3
  4

接口

接口其实就是路由，不同的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
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13

跨域

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

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

cors

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

const cors = require('cors');

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

原理
默认情况下，浏览器有同源安全策略
但是如果服务器配置了相关的响应头，就可以实现跨域请求
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请求