Node.js(笔记05) - http 服务器模块

关于什么是客户端、服务器、IP地址和DNS等基础知识略去；

推荐阅读：

​​HTTP协议简介、工作原理、请求方法、请求/响应步骤、示例​​

​​Node.js的HTTP模块官网​​

创建Web服务器

1）导入 http 模块

2）创建 Web 服务器实例

3）为服务实例绑定 request 事件，监听客户端的请求

4）启动服务

代码实现

新建Web服务文件 server.js，根据创建的步骤，写代码：

// 引入模块
const http =require('http')
// 创建实例
const server = http.createServer()
// 绑定事件,request
server.on('request',(req,res)=>{
    console.log('有人访问了')
})
server.listen(8000,()=>{  // 启动监听服务，并在终端提示
    console.log('server is running at http://127.0.0.1:8000');
})

提示1：实例的 on() 方法用来绑定事件， 回调函数用来处理请求与响应；

提示2：req 代表请求的各种方法；res 代表响应的各种方法；

提示3：server 实例的方法可以链式调用，也可以分开调用 ；

提示4：启动服务使用 listen() 方法，8000是指定端口，回调函数用来处理提示；

终端运行代码：

> node server.js

浏览器端访问文件： http://127.0.0.1:8000/；

提示：页面没有响应，这里就卡着一直转圈；

服务器终端输出：

> 有人访问了

req 请求对象

只要服务器接收到了客户端的请求，就会调用通过  server.on() 为服务器绑定 request 事件处理函数。在事件处理函数中，访问与客户端相关的数据或属性可以使用如下方式（方法和属性有很多，这里例举两个）：

req.url 

客户端的请求 URL 地址

req.method

客户端的 method 请求类型

代码片段：

server.on('request',(req,res)=>{
    const str = `Your request url is ${req.url}, and request method is ${req.method}`
    console.log(str);
})

提示：使用模板字符串输出  req.url 和 req.method 。

提示：但凡修改了 server.js 的服务端代码，要重启服务；

浏览器访问一下：

提示：因为没有给客户端响应任何数据，所以一直在转圈，最后会请求失败；

看下终端结果：

提示： req.url  是  “​​/​​​”  ;  req.method 是 “​​GET​​”。

要测试POST请求，可以借用 postman 或 apifox 这样的请求工具；

我这里使用 apifox 来创建个 post 请求：

看下终端结果：

请求的地址 req.url 还是 "​​/​​​" 没变，请求方法变为 “​​POST​​”了；

res 响应对象

在服务器的 request 事件处理函数中，如果想访问与服务器相关的数据和属性，可以使用以下方法（同样的 res 也有很多方法和属性）：

res.end()

向客户端发送指定的内容，并结束这次请求的处理过程

代码片段：

server.on('request',(req,res)=>{
    const str = `Your request url is ${req.url}, and request method is ${req.method}`
    res.end(str)
})

提示：这次把在终端输出的内容，响应给客户端了；

提示：修改了服务端代码要重启服务 ；

浏览器看一下：

提示：这次在页面上看到响应的内容了；

使用 apifox 也可以看查 POST的请求：

中文乱码的问题

当调用  res.end() 方法，向客户端发送中文内容的时候，会出现乱码问题，此时，需要手动设置内容的编码格式，可以先了解一下 http 协议的请求头和响应头设置，响应的编码类型 Content-Type；

res.setHeader() 

设置响应头 Content-Type 的值为 text/html;charset=utf-8

设置响应头可以解决响应里中文乱码的问题

完整代码：

const http =require('http')
const server = http.createServer()
server.on('request',(req,res)=>{
    const str = `您请求的路径是 ${req.url}, 您请求的方法是 ${req.method}`
    res.setHeader('Content-Type','text/html;charset=utf-8')
    res.end(str)
})
server.listen(8000,()=>{
    console.log('server is running at http://127.0.0.1:8000');
})

提示：res.seHeader() 设置响应头方法；

提示：Content-type 和 text/html;charset=utf-8 是固定写法；

看下浏览器结果：

中文正常显示，如果把设置响应头那行注释掉，就会乱码：

指定路由

根据不同的URL响应不同的HTML内容；

实现步骤

1）获取请求的 URL 地址；

2）设置默认的响应内容为 404 Not found；

3）判断用户请求的是否为 / 或 /index.html 首页；

4）判断用户请求的是否为 /about.html 关于页面；

5）设置 Content-Type 响应头，防止中文乱码；

6）使用 res.end() 方法把内容响应给客户端；

代码实现

根据步骤逐行写代码

const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
    const url = req.url
    let content = ''
    if (url === '/' || url === '/index.html') {
        content = '<h1>欢迎访问首页</h1>'
    } else if (url === '/about.html') {
        content = '<h1>关于页面</h1>'
    } else {
        content = '<h1>404 Not found!</h1>'
    }
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end(content)
})
server.listen(8000, () => {
    console.log('server is running at http://127.0.0.1:8000');
})

提示：代码不难理解，不需要注释；

看下浏览器地址： / 

看下浏览器地址：/index.html

看下浏览器地址：/about.html

看下浏览器地址：访问不存在的页面；

案例：clock时钟

需求，把上节使用的 clock 时钟拿来服务器响应的页面；

核心思路

把文件的实际存放路径，作为每个资源的 请求 URL地址；

用户访问的是  http://127.0.0.1:800/clock/index.html

把用户传来的URL，拼接成服务器对应文件的地址，把读取的内容再响应回用户；

实现步骤

1）导入需要的模块

2）创建基本的 web 服务器；

3）将资源的请求 URL 地址映射为文件的存放路径；

4）读取文件内容并响应给客户端 ；

5）优化资源的请求路径 ；

完整代码

const http = require('http')
const fs = require('fs')
const path = require('path')

const server = http.createServer()
server.on('request', (req, res) => {
    let url = req.url
    let fpath = path.join(__dirname, url)
    console.log(fpath);
    fs.readFile(fpath, 'utf8', (err, dataStr) => {
        if (err) return res.end('404,Not Found!')
        res.setHeader('Content-Type', 'text/html;charset=utf-8')
        res.end(dataStr)
    })
})
server.listen(8000, () => {
    console.log('server is running at http://127.0.0.1:8000');
})

提示：获取路径，拼接路径，打开路径，响应读取的内容；

终端响应：

看下浏览器：

奇怪的问题：终端已经正确响应的 index.html 、index.css 和 index.js 三个文件，而且三个文件都存在，但是页面上却没有加载到 index.css ，不知道为什么？

network 中查看也正常：

单独访问 index.css 也没问题：

请问，为什么访问 http://127.0.0.1:800/clock/index.html 加载不了 css 文件？