【Node.js学习 day3——http模块】

创建HTTP服务端

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

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

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

HTTP服务的注意事项

1. 命令行ctrl + c停止服务
2. 当服务启动后，更新代码必须重启服务才能生效
3. 响应内容中文乱码的解决办法

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

4. 端口号被占用

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

• 关闭当前正在运行监听端口的服务（使用较多）
• 修改其他端口号

5. HTTP协议默认端口是80。HTTP服务开发常用端口有3000,8080,8090,9000等。

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

浏览器查看HTTP报文

获取请求行和请求头

想要获取请求的数据，需要通过request对象

含义	语法
请求方法	request.method
请求版本	request.httpVersion
请求路径	request.url
URL路径	require(‘url’) .parse(request.url).pathname
URL查询字符串	require(‘url’).parse(request.url, true).query
请求头	request.headers
请求体	request.on(‘data’,function(chunk){}) request.on(‘end’,function(){});

注意事项：

1. request.url只能获取路径以及查询字符串，无法获取URL中的域名以及协议的内容
2. request.headers将请求信息转化成一个对象，并将属性名都转化成了[小写]
3. 关于路径：如果访问网站的时候，只填写了IP地址或者是域名信息，此时请求的路径为[/]
4. 关于favicon.ico：这个请求是属于浏览器自动发送的请求

获取请求体

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

//2.创建服务对象
const server = http.createServer((request, response) => {
    //声明一个变量
    let body = '';
    //绑定data事件
    request.on('data', chunk =>{
        body += chunk;
    })
    //绑定end时间
    request.on('end',() =>{
        console.log(body);
        //响应
        response.end('Hello HTTP');
    });
});

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

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

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

//2.创建服务对象
const server = http.createServer((request, response) => {
   //实例化URL对象
   let url = new URL(request.url, 'http://127.0.0.1');
   //输出路径
   console.log(url.pathname);
   //输出keyword查询字符串
   console.log(url.searchParams.get('keyword'));
   response.end('url new');
});

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

HTTP请求练习

按照一下要求搭建HTTP服务，请求类型GET

请求地址	响应体结果
/login	登录页面
/reg	注册页面

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

//2.创建服务对象
const server = http.createServer((request, response) => {
   //获取请求的方法
   let {method} = request;
   //获取请求的url路径
   let {pathname} = new URL(request.url, 'http://127.0.0.1');
   response.setHeader('content-type','text/html;charset=utf-8');
   //判断
   if(method === 'GET' && pathname === '/login'){
        //登录的情形
        response.end('登录页面');
   }else if(method === 'GET' && pathname === '/reg'){
        //register注册
        response.end('注册页面');
   }else{
    //默认的响应
    response.end('404 Not Found');
   }
});

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

设置HTTP响应报文

作用	语法
设置响应状态码	response.statusCode
设置响应状态描述	response.statusMessage(用的非常少)
设置响应头信息	response.setHeader（‘头名’，‘头值’）
设置响应体	response.write(‘xx’) response.end(‘xxx’)

HTTP响应练习

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

//2.创建服务对象
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('myHeader','test test test');
   response.write('love');
   response.write('love');
   response.write('love');
   response.write('love');
   response.end('xxx');//设置响应体
});

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

响应练习

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

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

//2.创建服务对象
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('myHeader','test test test');
   response.end(`
   
       
           
           
           
           
           
       
       
           
           
       
   `);//设置响应体
});

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

响应文件练习

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

//2.创建服务对象
const server = http.createServer((request, response) => {
   //读取文件内容
   let html = fs.readFileSync(__dirname + '/form.html');
   response.end(html);//设置响应体
});

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

网页资源加载基本过程

先HTML，后CSS，最后JS

实现网页引入外部资源

test.js

const http = require('http');
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 + '/form.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.setHeader('Content-Type', 'application/javascript');
        response.end(js);
    } else {
        response.statusCode = 404;
        response.end(`
404 Not Found 
`);
    }
});

server.listen(9000, () => {
    console.log('服务已经启动...');
});

form.html

index.css

td{
    padding:20px 40px;
}
table tr:nth-child(odd){
    background:#aef ;
}
table tr:nth-child(even){
    background:#fcb;
}
table, td{
    border-collapse: collapse;
}

index.js

 //获取所有的td
 let tds = document.querySelectorAll('td');
 //遍历
 tds.forEach(item => {
     item.onclick = function(){
         this.style.background = '#222';
     }
 })

静态资源与动态资源

静态资源是指内容长时间不发生改变的资源，例如图片，视频，CSS文件，JS文件，HTML文件，字体文件等。
动态资源是指内容经常更新的资源，例如百度首页，网易首页，京东搜索列表页面等。

搭建静态资源服务

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

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

网页URL之绝对路径

绝对路径可靠性强，而且相对容易理解，在项目中运用较多

形式	特点
http://atguigu.com/web	直接向目标资源发送请求，容易理解。网站的外链会用到此形式
//atguigu.com/web	与页面URL的协议拼接形成完整URL再发送请求。大型网站用的比较多
/web	与页面URL的协议、主机名、端口拼接形成完整URL再发送请求。中小型网站

网页URL之相对路径

相对路径在发送请求时，需要与当前页面URL路径进行计算，得到完整URL后，再发送请求，学习截断用的较多
例如当前网页url为http://www.atguigu.com/course/h5.html

形式	最终的URL
./css/app.css	http://www.atguigu.com/course/css/app.css
js/app.js	http://www.atguigu.com/course/js/app.js
…/img/logo.png	http://www.atguigu.com/img/logo.png
…/…/mp4/show.mp4	http://www.atguigu.com/mp4/show.mp4

页面URL的使用场景

包括但不限于如下场景：

• a标签href
• link标签href
• script标签src
• img标签src
• video audio 标签 src
• form中的action
• AJAX请求中的URL

设置mime类型

媒体类型（通常称为Multipurpose Internet Mail Extensions或MIME类型）是一种标准，用来表示文档、文字或字节流的性质和格式

mime类型结构：[type]/[subType]
例如: text/html text/css image/jpeg image/png application/json

HTTP服务可以设置响应头Content-Type来表明响应体的MIME类型，浏览器会根据该类型决定如何处理资源。
下面是文件对应的mime类型

html: 'text/html',
css:'text/css',
js:'text/javascript',
png:'image/png',
jpg:'image/jpeg',
gif:'image/gif',
mp4:'video/mp4',
mp3:'audio/mpeg',
json:'application/json'

对于未知的资源类型可以选择application/octet-stream类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是常见的下载效果

GET和POST应用场景与区别

GET请求的情况：

• 在地址栏直接输入url访问
• 点击a链接
• link标签引入css
• script标签引入js
• video与audio引入多媒体
• img标签引入图片
• form标签中的method为get（不区分大小写）
• ajax中的get请求

POST请求的情况：

• form标签中的method为post（不区分大小写）
• AJAX的post请求

GET和POST请求的区别
GET和POST是HTTP协议请求的两种方式，主要有如下几个区别

1. 作用。GET主要用来获取数据，POST主要用来提交数据
2. 参数位置。GET带参数请求是将参数缀到URL之后，POST带参数请求是将参数放到请求体中
3. 安全性。POST请求相对GET安全一些，因为在浏览器中参数会暴露在地址栏
4. GET请求大小有限制，一般为2K，而POST请求则没有大小限制