一、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>
密 码:<input type="password" name="pwd">
</label>
<br><br>
<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>