导入http模块#

const http = require('http')

创建web服务器实例#

调用 http.createServer() 的方法，则可快速创建一个 web 服务器实例：

const server = http.createServer()

为服务器实例绑定request事件#

绑定 request 事件，则可监听客户端发送过来的网络请求。

只要服务器收到了客户端的请求，就会调用通过 server.on() 为服务器绑定的 request 事件处理函数。

Req 中存有客户端相关的数据或属性。

Res 中存有服务器相关的数据或属性。

server.on('request', (req, res) => {
    // 只要有客户端请去访问我们自己的服务器，就会触发 request 事件，从而调用这个事件处理函数
    console.log('Someone vist our web server.')
})

启动服务器#

调用服务器实例的 .listen() 方法，即可启动当前的 web 服务器实例：

server.listen(80, () => {
    console.log('This server is running')
})

完整代码#

const http = require('http')

const server = http.createServer()

server.on('request', (req, res) => {
    console.log('Someone vist our web server');
})

server.listen('80', () => {
    console.log('running');
})

module对象#

在每个 JS 自定义模块中都有一个 module 对象，它里面存储了和当前模块有关的信息。

module.exports = {
    username: 'zs',
    say: () => {
        console.log('Hello');
    }
}

console.log(module.exports === exports ) // true

module.exports = {
    user: 'zs'
}
exports = {
    name: 'ls'
}

console.log(module.exports) // { user: 'zs' }

express.static()#

Express 提供了一个非常好用的函数，叫做 express.static() ，通过它，可以非常方便快捷地创建一个静态资源服务器，比如，通过以下代码就可以将 piblic 目录下的图片、CSS 文件、 JS 文件对外开放访问：

app.use(express.static('public'))
// http://localhost:3000/images/bg.jpg
// http://localhost:3000/css/style.css
// http://localhost:3000/js/login.js

注意：Express 在指定的静态目录中查找文件，并对外提供资源的访问路径。所以，存放静态文件的目录名不会出现在 URL 中。

挂载路径前缀#

如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式：

app.use('/public', express.static('public'))
// http://localhost:3000/public/images/bg.jpg
// http://localhost:3000/public/css/style.css
// http://localhost:3000/public/js/login.js

路由的匹配过程#

每当一个请求到达服务器后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。

在匹配时，会按照路由的顺序进行匹配，如果请求类型和请求的 URL 同时匹配成功，则 Express 会将这次请求，转交给对应的 function 函数进行处理。

1. 按照定义的先后顺序进行匹配；

2. 请求类型和请求的 URL 同时匹配成功，才会调用对应的处理函数。

模块化路由#

为了方便对路由进行模块化管理，express 不建议将路由直接挂载到 app 上，而是推荐将路由抽离为单独的模块。

1. 创建路由模式对应的 JS 文件；

2. 调用 express.Router() 函数创建路由对象；

3. 向路由对象上挂载具体的路由；

4. 使用 module.exports 向外共享路由对象；

5. 使用 app.use() 函数注册路由模块。

// 该文件是 user.js
const express = require('express')      // 1.导入 express
const router = express.Router()         // 2.创建路由对象

router.get('/user/list', (req, res) => {// 3.挂载获取用户列表路由
    res.send('Get user list.')
}) 

router.post('/user/add', (req, res) => {// 4.挂载添加用户的路由
    res.send('Add new user.')
})

module.exports = router                 // 5.向外导出路由对象

// 1.导入路由模块
const userRouter = require('./router/user.js')
// 2.使用 app.use() 注册路由模块
// 注意：app.use() 函数的作用，就是来注册全局中间件
app.use(userRouter)
// eg: http://127.0.0.1:8080/user/list

app.use('/api', userRouter)
// eg: http://127.0.0.1:8080/api/user/list

调用流程#

当一个请求到达 Express 的服务器后，可以连续调用多个中间件，从而对这次请求进行预处理。

中间件的格式#

Express 的中间件，本质上就是一个 function 处理函数，Express 中间件的格式如下：

const express = require('express')
const app = express()

app.get('/', (req, res, next) => {
    next()                        // 中间件
})
app.listen(300)

注意：中间件函数的形参列表中，必须包含 next 参数。而路由处理函数中只包含 req 和 res。

next 函数的作用#

next 函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下一个中间件或路由。

定义中间件函数#

// 常量 mw 所指向的，就是一个中间件函数
const mw = (req, res, next) => {
    console.log('一个简单的中间件函数')
    // 当中间件的业务处理完毕后，必须调用 next() 函数
    // 表示把流转关系转交给下一个中间件或路由
    next()
}

全局生效的中间件#

客户端发起的任何请求，到达服务器后，都会触发的中间件，叫做全局生效的中间件。

通过调用 app.use(中间件函数)，则可定义一个全局生效的中间件：

const mw = (req, res, next) => {
    console.log('中间件函数')
    next()
}

// 全局生效的中间件
app.use(mw)

app.use((req, res, next) => {
    console.log('中间件函数')
    next()
})

app.use((req, res, next) => {
    console.log('1')
    next()
})

app.use((req, res, next) => {
    console.log('2')
    next()
})

app.get('/user', (req, res) => {
    res.send('User page.')
})

局部生效的中间件#

不适用 app.use() 定义的中间件，叫做局部生效的中间件：

const mw = (req, res, next) => {
    console.log('中间件函数')
}

// mw 这个中间件只在当前路由中生效，这种用法属于局部生效的中间件
app.get('/', mw, (req, res) => {
    res.send('Home page')
})

// 以下两种写法完全等价
app.get('/', mw1, mw2, (req, res) => { res.send('Home page') })
app.get('/'m [mw1, mw2], (req, res) => { res.send('Home page') })

中间件的作用#

多个中间件之间，共享同一份 req 和 res。基于这样的特性，我们可以在上游的中间件中，统一为 req 或 res 对象添加自定义的属性或方法，供下游的中间件或路由进行使用。

5个注意事项#

1. 在路由之间注册中间件；

2. 客户端发送过来的请求，可以调用多个中间件进行处理；

3. 执行完中间件的业务代码之后，不要忘记调用 next() 函数；

4. 为了防止代码逻辑混乱，调用 next() 函数之后不要再写额外的代码；

5. 连续调用多个中间件时，多个中间件之间，共享 req 和 res 对象。

中间件的分类#

Express 官方把常见的中间件用法，分成了5大类：

1. 应用级别的中间件；

2. 路由级别的中间件；

3. 错误级别的中间件；

4. 错误级别的中间件；

5. 第三方中间件。

const mw = (req, res, next) => {
    console.log('中间件函数')
}

// mw 这个中间件只在当前路由中生效，这种用法属于局部生效的中间件
app.get('/', mw, (req, res) => {
    res.send('Home page')
})

const app = express()
const router = express.Router()

router.use((req, res, next) => {
    console.log('Time:', Date.now())
    next()
})

app.use('/', router)

(err, req, res, next) => {}

app.get('/', (req, res) => {
    throw new Error('服务器内部发生错误')
    res.send('Home page')
})

app.use((err, req, res, next) => {
    console.log('发生了错误：' + err.message)
    res.send('Error!' + err.message)
})

app.use(express.json())
app.use(express.urlendoded({ extended: false }))

自定义中间件#

// 导入 express
const express = require('express')
// 创建 web 服务器
const app = express()
// 导入 NodeJS 内置的 querystring 模块
const qs = require('querystring')

app.use((req, res, next) => {
    // 定义变量，用来存储客户端发送过来的请求体数据（如果数据量大，客户端会分批发送，需要手动拼接）
    let str = ''
    req.on('data', (chunk) => {
        // 拼接请求体数据，隐式转换为字符串
        str += chunk
    })
    // 监听 req 对象的 end 事件（请求体发送完毕后自动触发）
    req.on('end', () => {
        // 打印完整的请求体数据
        console.log(str);
        const body = qs.parse(str)
        console.log(body);
        // 把解析出来的请求体对象，挂载为 req.body 属性
        req.body = body
        // 执行后续业务逻辑
        next()
    })
})

app.post('/user', (req, res) => {
    // res.send('ok')
    res.send(req.body)
})

app.listen(8080, () => {
    console.log('express server running at http://127.0.0.1:8080')
})

接口的跨域问题#

解决接口跨域问题的方案主要有两种：

1. CORS（主流的解决方案，推荐使用）；

2. JSONP（有缺陷的解决方案：只支持 GET 请求）。

使用 CORS 中间件解决跨域问题#

cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。

const cors = require('cors') // 导入中间件
app.use(cors)                // 在路由之前配置中间件

什么是 CORS#

CORS（Cross-Origin Resource Sharing，跨域资源共享）由一系列 HTTP 响应头组成，这些 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源。

浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可以解除浏览器端的跨域访问限制。

CORS 的注意事项#

1. CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口；

2. CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服务器端口。

CORS 响应头部 - Acess-Control-Allow-Origin#

响应头部中可以携带一个 Access-Control-Allow-Origin 字段：

Access-Control-Allow-Origin: <origin> | *

其中，origin 参数的值指定了允许访问该资源的外域 URL。

例如，下面的字段值将只允许来自 https://sytusramlethal.github.io/ 的请求：

res.setHeader("Access-Control-Allow-Origin", "https://sytusramlethal.github.io/")

如果制定了 Access-Control-Allow-Origin 字段的值为通配符 * ，表示允许来自任何域的请求：

res.setHeader("Access-Control-Allow-Origin", "*")

CORS 响应头部 - Acess-Control-Allow-Header#

默认情况下，CORS 仅支持客户端向服务器发送如下的9个请求头：

1. Accept;

2. Accept-Language;

3. Content-Language;

4. DPR;

5. Downlink;

6. Save-Data;

7. Viewport-Width;

8. Width;

9. Content-Type。

如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过 Acess-Control-Allow-Header 对额外的请求头进行声明，否则这次请求会失败。

// 多个请求头之间使用英文的都好进行分割
res.setHeader("Access-Control-Allow-Header", "Content-Type, X-Custom-Header")

CORS 响应头部 - Acess-Control-Allow-Methods#

默认情况下，CORS 仅支持客户端发起 GET、POST、HEAD 请求。

如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Acess-Control-Allow-Methods 来指明实际请求所允许使用的 HTTP 方法。

res.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, HEAD")
// 允许所有方法
res.setHeader("Access-Control-Allow-Methods", "*")

CORS 请求的分类#

客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将 CORS 的请求分为两大类：

1. 简单请求；

2. 预检请求。

JSONP 接口#

概念：浏览器通过 <script> 标签的 src 属性，请求服务器上的数据，同时，服务器返回一个函数的调用。这种请求数据的方式叫做 JSONP。

1. JSONP 不属于真正的 AJAX 请求，因为它没有使用 XMLHttpRequest 对象；

2. JSONP 仅支持 GET 请求，不支持其他请求。

// 优先创建 JSONP 接口，使其不会被处理成 CORS 接口
app.get('/api/jsonp', (req, res) => {})
// 再配置 CORS 中间件
app.use(cors())

app.get('/api/jsonp', (req, res) => {
    //1.获取客户端发送过来的回调函数名字
    const funcName = req.query.callback
    //2.得到要通过 JSONP 形式发送给客户端的数据
    const data = { name: 'zs', age: 20 }
    //3.根据前两步得到的数据，拼接出一个函数调用的字符串
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    //4.把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
    res.send(scriptStr)
})