【HTTP请求和响应的处理】

꒰ঌsnail໒꒱

已于 2022-07-22 17:53:31 修改

阅读量409

点赞数

分类专栏： node.js 文章标签： http 前端

于 2022-07-21 23:12:47 首次发布

本文链接：https://blog.csdn.net/m0_46839072/article/details/125921542

版权

node.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、HTTP请求和响应的处理

1、get请求参数的处理

(1)get参数是放在浏览器的地址栏中发送的(即请求参数和url绑在一起)

(2)get参数的获取方式

a、通过请求对象(req)的url属性获取客户端请求的URL(req.url)

b、使用Node的内置模块url对请求地址进行解析，获取请求参数
let { query,pathname } = url.parse(clientURL,true)

☀️举个例子：

const http =require('http')
const url = require('url')
const app=http.createServer()
app.on('request',(req,res)=>{
    //1、获取客户端请求的url
    let clientURL=req.url
    console.log(clientURL)
    //2、解析url
    let {query,pathname}=url.parse(clientURL,true)
    console.log('请求参数：',query)
    console.log('请求路径：',pathname)

    res.writeHead(200,{
        'content-type':'text/html;charset=utf8'
    })
    //3、对请求进行判断
    if(pathname=='/index'||pathname=='/'){
        res.end('<h1>hello'+query.username+'</h1>')
    }else if(pathname == '/list'){
        res.end('<h1>list page</h1>')
    }else{
        res.end('<p>not found</p>')
    }
})
app.listen(3000)
console.log('服务器已启动，运行在3000端口上')

2、post请求参数的处理

(1)post请求参数放在请求体中,而不是放在url中

在这里插入图片描述

(2)post参数的获取方式

a、导入Node的内置模块querystring，将post请求参数转换成对象
b、给请求对象(req)注册’data’事件,用于监听参数的传输，将传输的参数读取出来
c、给请求对象(req)注册’end’事件,用于监听参数传输完毕，该事件被触发表明参数传递完成就可以对参数进行处理

☀️举个例子：
客户端：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div{
         width: 500px;
         margin: 100px auto;
    }
</style>
<body>
    <div>
        <form action="http://localhost:4000" method="">
            <label>
                用户名：<input type="text" name="username"> <!--服务器通过name属性来得到输入框数据的值  -->
            </label>
            <br><br>
            <label>
                  密&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd">
            </label>
            <br><br>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button type="reset">重置</button>
            <button type="submit">提交</button>
        </form> 
    </div>
</body>
</html>

服务器端：

const http =require('http')
const querystring = require('querystring')
const app=http.createServer()
app.on('request',(req,res)=>{
    let postParams=''//用来存储post请求参数
    //给req注册'data'事件，监听参数传递
    req.on('data',(params)=>{//params表示请求参数，参数的传递是以字符流的方式进行的
        postParams +=params
    })
    //给req注册'end'事件，该事件被触发表名参数传递完成
    req.on('end',()=>{
        console.log('获得的参数：',postParams)
        let temp =querystring.parse(postParams)//因为传递出来的参数是字符串形式，所以要用querystring模块的parse方法将字符串转换为对象
        console.log('解析后的参数：',temp)
        console.log('用户名：',temp.username)
        console.log('密码：',temp.pwd)
    })
    res.end('ok')
})
app.listen(3000)
console.log('服务器已启动，运行在3000端口上')

强调：关于querystring被弃用的解决办法

使用querystringify模块替代querystring模块。因为querystringify模块不是Node的内置模块,需要安装,

安装指令为npm install querystringify -g //-g指全局安装

优秀文章（更加理解）：http://t.csdn.cn/duhR7

3、路由

(1)路由是指客户端请求地址与服务器端程序代码的对应关系。用户在浏览器地址栏中输入不同的请求地址，服务器端会为客户端响应不同的内容。

☀️举个例子：

const http=require('http')
const url=require('url')
const path =require('path')//用于路径的拼接
const fs=require('fs')//用于读取文件
const mime =require('mime')

const server=http.createServer()

server.on('request',(req,res)=>{
    //1、获取用户的请求方式,将请求方式转换为小写
    const method = req.method.toLowerCase()

    //2、解析用户的请求方式
    const pathname = url.parse(req.url).pathname

    //3、设置响应头信息
    res.writeHead(200,{
        'content-type':'text/html;charset=utf8'
    })

    //4、进行路由
    if(method=='get')
    {
        if(pathname == '/'||pathname == '/index'){
            let msg = '<h1>欢迎来到首页</h1>'+
                      '<p>你的请求方式：get</p>'
                      res.end(msg)
        }else if(pathname=='/list'){
            let msg='<h1>欢迎来到列表项</h1>'+
            '<p>你的请求方式：get</p>'
            res.end(msg)
        }else{
            res.end('请求的页面不存在')
        }
   }else if(method=='post'){}
})
server.listen(4000)
console.log('服务器已启动，服务器运行在4000端口上...')

(2)静态资源的访问

a、静态资源：是指客户端向服务器端请求的资源,服务器端不需要处理,可以直接响应给客户端的资源。

b、静态资源的类型：CSS、JavaScript、image文件，以及HTML文件

c、动态资源：指的是相同的请求地址可以传递不同的请求参数,得到不同的响应资源

d、访问过程：

①创建一个文件夹用于存放静态资源

②获取用户的请求路径

③使用path模块对请求路径进行转换(将请求路径转换成静态资源对应的硬盘路径)

④使用mime模块获取静态资源的类型

⑤使用fs模块读取静态资源文件

⑥将读取的静态资源响应给用户

☀️举个例子：

服务器端：server.js

const http=require('http')
const url=require('url')
const path =require('path')//用于路径的拼接
const fs=require('fs')//用于读取文件
const mime =require('mime')
const server=http.createServer()
server.on('request',(req,res)=>{
    //1、获取用户请求路径
    let pathname=url.parse(req.url).pathname
    pathname = pathname =="/"?'/default.html':pathname//判断用户是否请求了静态资源，三元表达式，地址如果为空，则显示默认页面default.html
    //2、将用户的请求路径转换成实际的服务器的硬盘路径
    let realPath = path.join(__dirname,'public'+pathname)
    //3、通过mime模块根据路径得到相应的资源类型
    let type = mime.getType(realPath)

    //4、读取文件
    fs.readFile(realPath,(err,result)=>{
        if(err!=null){//如果文件读取失败
            res.writeHead(404,{
                'content-type':'text/html;charset=utf8'
            })
            res.end('文件读取失败')
        }else{
            res.writeHead(200,{
            'content-type':type
            })
            res.end(result)
        }
})

})
server.listen(4000)
console.log('服务器已启动，服务器运行在4000端口上...')

服务器的public里的静态资源default.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是首页</h1>
</body>
</html>

꒰ঌsnail໒꒱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【HTTP请求和响应的处理】

a、静态资源是指客户端向服务器端请求的资源,服务器端不需要处理,可以直接响应给客户端的资源。b、给请求对象(req)注册’data’事件,用于监听参数的传输，将传输的参数读取出来。a、通过请求对象(req)的url属性获取客户端请求的URL(req.url)③使用path模块对请求路径进行转换(将请求路径转换成静态资源对应的硬盘路径)c、动态资源指的是相同的请求地址可以传递不同的请求参数,得到不同的响应资源。b、使用Node的内置模块url对请求地址进行解析，获取请求参数。②获取用户的请求路径。......
复制链接

扫一扫