nodejs -- Http模块

尚硅谷 44-66

1、创建一个Http服务器

（1）http://127.0.0.1永远表示本机的地址，不论是移动端还是客户端；

（2）createServer(回调函数)中回调函数执行的时间，浏览器发送请求的时候执行；request是请求对象，response是响应对象；

（3）listen('端口号', 回调函数)中回调函数执行时间，当服务器启动的时候就执行，即在命令行窗口输入node ...就开始启动；《启动服务：node 文件名； 停止服务： ctrl+c》

（4）在浏览器中，输入地址，http;//127.0.0.1:9000，敲回车。

// 1、导入 http 模块
const http = require('http')

// 2、创建服务器对象
const server = http.createServer((request, response) =>{
    response.end('Hello HTTP Server') //设置响应体
})

// 3、监听端口，启动服务器
server.listen('9000', () =>{
    console.log('服务已经启动....')
})

2、Http服务的注意事项

（1）启动服务器： node ...(文件名)

（2）停止服务器：ctrl+c

（3）修改服务器中的内容时候，只有先停止服务器，然后重新启动，返回结果才能改变。

（4）响应内容中文乱码的解决方法：

        response.setHeader('content-type', 'text/html; charset=utf-8')

（5）端口号被占用

       Error: listen EADDRINUSE: address already in use :::9000

        1）关闭当前正在监听端口的服务（使用较多）

        2）修改其他端口号

（6）HTTP协议默认端口是80.HTTPS协议的默认端口是443，HTTP服务开发常用端口有3000、8080、8090、9000等；

（7）如果端口被其他程序占用，可以使用资源监视器找到占用端口的程序，然后使用任务管理器关闭对应的程序。

3、浏览器查看Http报文

favicon.ico是浏览器默认的行为，获取请求的图标；

“标头”中存放的内容：请求行、请求头，可以点击“原始”按钮

“载荷”中存放的内容： 请求体（post请求） 和 url中查询字符串

“响应”中存放的内容：响应体

4、获取请求行和请求头

这里为什么我没有输出？脑子坏掉了，应该在命令行中输出结果。

// 1.导入 http 模块
const http = require('http')

// 2.创建服务对象
const server = http.createServer((request, response) =>{
    //获取请求的方法
    console.log(request.method)
    // 获取请求的url
    console.log(request.url) //只包含 url 中的路径与查询字符串
    // 获取 Http 协议的版本号
    console.log(request.httpVersion)
    // 获取Http的请求头
    console.log(request.headers.host)
    response.end('http')
})

// 3.监听端口，启动服务
server.listen(9000, () =>{
    console.log('服务已经启动....')
})

5、获取请求体 

post请求的请求体有数据，get请求的请求体无数据

  <form action="http://127.0.0.1:9000" method="post">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="submit" value="提交">
    </form>

// 引入 http 请求
const http = require('http')
// 创建服务对象
const server = http.createServer((request, response) =>{
    // 声明一个变量
    let body = ''
    //绑定 data 事件
    request.on('data', chunk =>{
        body += chunk //chunk 是一个buffer 这里使用了 + 号进行隐形转换
    })
    // 绑定 end 事件
    request.on('end', ()=>{
        console.log(body)
        // 响应
        response.end('Hello HTTP')
    })
})
server.listen(9000, ()=>{
    console.log('监听中。。。')
})

6、获取请求路径与查询字符串

方法1:通过url模块

使用内置的url模块， url.parse(request.url,true)方法，第二个参数设置为true可以解析查询参数为对象。

然后使用res.pathname 和 res.query.keyword来进行访问。

不设置为true

设置为true

// 导入 http 模块
const http = require('http')
// 导入 url 模块
const url = require('url')

// 创建服务对象
const server = http.createServer((request, response) => {
    // 解析 request.url
    // console.log(request.url) //这里的输出结果 既包括路径也包括查询参数
    let res = url.parse(request.url, true)
    // 路径
    let pathname = res.pathname
    // 查询字符串
    let keyword = res.query.keyword
    console.log(pathname) // /search
    console.log(keyword) // '章三'
    response.end('url')
})

// 监听端口，启动服务
server.listen(9000, () =>{
    console.log('服务已经启动.....')
})

方法2:通过创建URL对象 new URL(完整的路径)

// 导入 http 模块
const http = require('http')

// 创建服务对象
const server = http.createServer((request, response) => {
    // 实例化 URL 对象
    // 这里保证传入的是一个完整的地址即可
    // let url = new URL('/search?a=100&b=200', 'http://127.0.0.1:9000')
    let url = new URL(request.url, 'http://127.0.0.1')
    // 输出路径
    console.log(url.pathname)
    // 输出路径
    console.log(url.searchParams.get('keyword'))
    response.end('url new')
})

// 监听端口 启动服务
server.listen(9000, ()=>{
    console.log('监听')
})

7、练习-Http请求练习

按照一下要求搭建HTTP服务

请求类型： get  请求地址：/login   响应体结果：登录页面

请求类型：get   请求地址：/reg  响应体结果：注册页面

// 导入http模块
const http = require('http')

// 创建服务对象
const server = http.createServer((request, response) =>{
    // 获取请求方法
    let {method} = request
    // 获取请求的url路径
    let {pathname} = new URL(request.url, 'http://127.0.0.1')
    // 判断请求的路径是否为 login
    if(method ==='GET' && pathname === '/login'){
        // 中文乱码解决方法
        response.setHeader('content-type', 'text/html;charset=utf-8')
        response.end('登录页面') //设置返回响应内容
    }else if(method === 'GET' && pathname==='/reg'){
        response.setHeader('content-type', 'text/html;charset=utf-8')
        response.end('注册页面')
    }else{
        response.end('Not Found')
    }
    
})

// 监听端口 启动服务
server.listen(9000, ()=>{
    console.log('服务已经启动。。。 端口')
})

 

8、设置Http响应报文

响应行：状态码statusCode、状态信息statusMessage、

响应头：setHeader

响应体：response.write() 和 response.end()

注意：write可以调用多次，但是end有且只有一个

// 导入 http 请求
const http = require('http')
// 创建服务对象
const server = http.createServer((request,response) =>{
    //设置响应状态码
    response.statusCode = 203
    // response.statusCode = 404
    // 响应状态的描述《一般不设置》
    response.statusMessage = 'iloveyou'
    // 响应头
    response.setHeader('content-type', 'text/html;charset=utf-8')
    response.setHeader('Server', 'Node.js')
    response.setHeader('myHeader','test text text')
    response.setHeader('test', ['a','b','c'])
    // 响应体的设置 write可以调用多次，end只能调用一次
    response.write('love')
    response.write('love')
    response.write('love')
    response.end('love')
})

server.listen(9000,()=>{
    console.log('监听端口。。。。')
})

9、练习-Http响应练习

搭建HTTP服务，响应一个4行3列的表格，并且要求表格有隔行换色效果，且点击单元格能够高亮显示

安装nodemon 实时监控 服务器的改变 node install -g nodemon

 

// 引入 http 模块
const http = require('http')

// 创建服务对象
const server = http.createServer((request, response) => {
    response.end(`
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        td{
            padding:20px 40px;
        }
        table tr:nth-child(odd){
            background:#add;
        }
        table tr:nth-child(even){
            background:pink;
        }
        table, td{
            border-collapse:collapse;
        }
    </style>
</head>

<body>
    <table border="1">
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
    </table>
    <script>
        //获取所有的td
        let tds = document.querySelectorAll('td')
        // 遍历
        tds.forEach(item => {
            item.onclick = function(){
                this.style.background = '#222'
            }
        })
    </script>
</body>

</html>
    `) //设置响应体
})

// 监听端口，启动服务
server.listen(9000, () => {
    console.log('服务器已经启动.....')
})

 

10、练习-响应文件内容《优化》

通过let html = fs.readFileSync(__dirname + '/10')模块读取文件，获取buffer

响应体内传入的参数不是 html 而是一个 buffer ，response.end(html)

// 导入 http 模块
const http = require('http')
// 导入 fs 模块
const fs = require('fs')

// 创建服务对象
const server = http.createServer((request, response)=>{
    // 读取文件内容
    let html = fs.readFileSync(__dirname + '/table.html')// html 是一个buffer对象
    response.end(html) //response 可以传入一个buffer对象
})

// 监听端口，启动服务
server.listen(9000, () =>{
    console.log('服务已启动.....')
})

11、网页资源加载基本过程

输入请求地址url后/点击浏览器运行下列代码，系统一共发送了6个请求，且这些请求是异步的/并行的；

发送index.html请求，获取html；

浏览器解析到link标签，发送样式请求；

浏览器解析到图片，发送图片请求；

浏览器解析到js文件，发送js请求；

ws请求是vscode默认发送的请求，使网页自动刷新；

favicon.icon是浏览器默认请求网页图标；

 

 

12、实现网页引入外部资源

table.html文件：放置页面结构

index.css文件：放置页面样式

index.js文件：放置页面交互行为

过程：

浏览器解析html文件的时候，遇到link标签，发送css请求；遇见script标签，发送js请求；

服务器根据请求的路径url来判断响应体返回的内容；（先读文件然后再将文件返回给浏览器）

// 导入 http 模块
const http = require('http')
// 导入 fs 模块
const fs = require('fs')

// 创建服务对象
const server = http.createServer((request, response) =>{
    // 获取请求的地址
    let {pathname} = new URL(request.url, 'http://127.0.0.1')
    if(pathname === '/'){
        // 读取文件内容
        let html = fs.readFileSync(__dirname + '/table.html')
        response.end(html)
    }else if(pathname === '/index.css'){
        // 读取文件内容
        let css = fs.readFileSync(__dirname + '/index.css')
        response.end(css)
    }else if(pathname === '/index.js'){
        // 读取文件内容
        let js = fs.readFileSync(__dirname + '/index.js')
        response.end(js)
    }else{
        response.statusCode = 404
        response.end('<h1>404 Not Found</h1>')
    }

})

// 监听端口
server.listen(9000, ()=>{
    console.log('服务器已经启动......')
})

13、静态资源和动态资源

静态资源：内容长时间不发生改变的资源，例如图片、视频、CSS文件、JS文件、HTML文件、字体文件等；

动态资源：内容经常更新的资源，例如百度首页、网易首页、京东搜索列表页面等；

14、搭建静态资源服务

搭建静态资源服务的目的：解决之前服务器使用if else反复判断的情况；

关键点是，文件路径的拼接，filePath = __dirname + '/page' + pathname 

读取文件路径 = __dirname + '文件夹' + 请求地址《pathname》

// 导入 http 模块
const http = require('http')
// 导入 fs 模块
const fs = require('fs')

// 创建服务对象
const server = http.createServer((request, response) =>{
    // 获取请求的url的路径
    const {pathname} = new URL(request.url, 'http://127.0.0.1')
    // 拼接文件路径
    let filePath = __dirname + '/page' + pathname
    // 读取文件 fs 异步 API
    fs.readFile(filePath,(err, data) =>{
        if(err){
            response.statusCode = 500
            response.end('文件读取失败～～～')
            return
        }
        // 响应内容
        response.end(data)
    })
})

// 监听服务器端口
server.listen(9000, () =>{
    console.log('监听端口中.....')
})

15、静态资源目录与网站根目录

HTTP服务在哪个文件夹中寻找静态资源，那个文件夹就是 静态资源目录，也称之为 网站根目录。

思考：vscode中使用live-server访问HTML时，它启动的服务网站根目录是谁？

答：就是vscode打开的文件夹。

16、网页URL-绝对路径

网页中的URL：相对路径 + 绝对路径

最常用的是绝对路径中的/web

17、网页url-相对路径

18、网页url的使用场景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/app.css"> -->
    <!-- 推荐使用 -->
    <link rel="stylesheet" href="/css/app.css">
    <!-- <link rel="stylesheet" href="http://127.0.0.1:9000/css/app.css"> -->
</head>
<body>
    <div>
        尚硅谷前端
    </div>
</body>
</html>

19、设置mime类型

// 导入 http 模块
const http = require('http')
// 导入 fs 模块
const fs = require('fs')
// 导入 path 模块
const path = require('path')
// 声明一个变量
const mimes = {
    html:'text/html',
    css:'text/css',
    js:'text/javascript',
    png:'image/jpeg',
    gif:'image/gif',
    mp4:'video/mp4',
    mp3:'audio/mpeg',
    json:'application/json'
}

// 创建服务对象
const server = http.createServer((request, response) =>{
    // 获取请求的url的路径
    const {pathname} = new URL(request.url, 'http://127.0.0.1')
    // 声明一个变量
    const root = __dirname + '/page'
    // 拼接文件路径
    let filePath = root + pathname
    // 读取文件 fs 异步 API
    fs.readFile(filePath,(err, data) =>{
        if(err){
            response.statusCode = 500
            response.end('文件读取失败～～～')
            return
        }
        // 获取文件的后缀名
        let ext = path.extname(filePath).slice(1) //html css
        // 获取对应的类型
        let type = mimes[ext]
        if(type){
            // 匹配到了
            response.setHeader('content-type', type)
        }else{
            // 没有匹配到
            response.setHeader('content-type', 'application/octet-stream')
        }
        // 响应文件内容
        response.end(data)
    })
})

// 监听服务器端口
server.listen(9000, () =>{
    console.log('监听端口中.....')
})

20、解决乱码问题

中文乱码问题，解决方法 ：在设置响应头的时候，拼接上‘;charset=utf-8’

response.setHeader('content-type', type + ';charset=utf-8')

[注意]：为什么 css和js会乱码，而html不会乱码呢？

因为html的meta标签中设置了<meta charset ='UTF-8'>

优先级：meta的优先级比较高

判断当前是否为html文件，如果是html设置字符集，否则不需要设置字符集，使用网页的字符集进行解析

// 导入 http 模块
const http = require('http')
// 导入 fs 模块
const fs = require('fs')
// 导入 path 模块
const path = require('path')
// 声明一个变量
const mimes = {
    html:'text/html',
    css:'text/css',
    js:'text/javascript',
    png:'image/jpeg',
    gif:'image/gif',
    mp4:'video/mp4',
    mp3:'audio/mpeg',
    json:'application/json'
}

// 创建服务对象
const server = http.createServer((request, response) =>{
    // 获取请求的url的路径
    const {pathname} = new URL(request.url, 'http://127.0.0.1')
    // 声明一个变量
    const root = __dirname + '/page'
    // 拼接文件路径
    let filePath = root + pathname
    // 读取文件 fs 异步 API
    fs.readFile(filePath,(err, data) =>{
        if(err){
            response.statusCode = 500
            response.end('文件读取失败～～～')
            return
        }
        // 获取文件的后缀名
        let ext = path.extname(filePath).slice(1) //html css
        // 获取对应的类型
        let type = mimes[ext]
        if(type){
            // 匹配到了                                  text/html;charset=utf-8
            // response.setHeader('content-type', type + '; charset=utf-8')
            if(ext === 'html'){//如果是html，就需要加上 字符集
                response.setHeader('content-type',type + ';charset=utf-8')
            }else{//否则不需要加字符集
                response.setHeader('content-type',type)
            }
        }else{
            // 没有匹配到
            response.setHeader('content-type', 'application/octet-stream')
        }
        // 响应文件内容
        response.end(data)
    })
})

// 监听服务器端口
server.listen(9000, () =>{
    console.log('监听端口中.....')
})

 

21、完善错误处理

1、判断请求是否是get请求

2、ENOENT - 404 - 找不到资源

3、EPERM - 403 - 禁止访问

4、500 - 服务器内部的错误

 if(request.method !== 'GET'){
        response.statusCode = 405
        response.end(`<h1>405 Method Not Allowed</h1>`)
        return
    }

 fs.readFile(filePath,(err, data) =>{
        if(err){
            switch(err.code){
                case 'ENOENT':
                    response.statusCode = 404
                    response.end(`<h1>404 Not Found</h1>`)
                case 'EPERM':
                    response.statusCode = 403
                    response.end(`<h1>403 Forbidden</h1>`)
                default:
                    response.statusCode = 500
                    response.end(`<h1>500 Internal Server Error</h1>`)

            }
            return
        }

 

22、Get 和 post应用场景

最终服务器的代码

// 导入 http 模块
const http = require('http')
// 导入 fs 模块
const fs = require('fs')
// 导入 path 模块
const path = require('path')
// 声明一个变量
const mimes = {
    html:'text/html',
    css:'text/css',
    js:'text/javascript',
    png:'image/jpeg',
    gif:'image/gif',
    mp4:'video/mp4',
    mp3:'audio/mpeg',
    json:'application/json'
}

// 创建服务对象
const server = http.createServer((request, response) =>{
    if(request.method !== 'GET'){
        response.statusCode = 405
        response.end(`<h1>405 Method Not Allowed</h1>`)
    }
    // 获取请求的url的路径
    const {pathname} = new URL(request.url, 'http://127.0.0.1')
    // 声明一个变量
    const root = __dirname + '/page'
    // 拼接文件路径
    let filePath = root + pathname
    // 读取文件 fs 异步 API
    fs.readFile(filePath,(err, data) =>{
        if(err){
            switch(err.code){
                case 'ENOENT':
                    response.statusCode = 404
                    response.end(`<h1>404 Not Found</h1>`)
                case 'EPERM':
                    response.statusCode = 403
                    response.end(`<h1>403 Forbidden</h1>`)
                default:
                    response.statusCode = 500
                    response.end(`<h1>500 Internal Server Error</h1>`)

            }
            return
        }
        // 获取文件的后缀名
        let ext = path.extname(filePath).slice(1) //html css
        // 获取对应的类型
        let type = mimes[ext]
        if(type){
            // 匹配到了                                  text/html;charset=utf-8
            // response.setHeader('content-type', type + '; charset=utf-8')
            if(ext === 'html'){//如果是html，就需要加上 字符集
                response.setHeader('content-type',type + ';charset=utf-8')
            }else{//否则不需要加字符集
                response.setHeader('content-type',type)
            }
        }else{
            // 没有匹配到
            response.setHeader('content-type', 'application/octet-stream')
        }
        // 响应文件内容
        response.end(data)
    })
})

// 监听服务器端口
server.listen(9000, () =>{
    console.log('监听端口中.....')
})