web服务器

1.1、介绍

Web服务器一般指的是网站服务器，是指驻留因特网上某一台或N台计算机的程序，可以处理浏览器等Web客户端的请求并返回相应响应，目前最主流的三个Web服务器是Apache、 Nginx 、IIS、Tomcat。

请求：

请求行、请求头、请求体

响应：

响应行、响应头、响应体

1.2、服务器相关概念

ip地址或域名

ip地址

IP地址就是互联网上每台计算机的唯一地址，因此IP地址具有唯一性。在开发期间，自己的电脑既是一台服务器，也是一个客户端，可以在本机浏览器中输入127.0.0.1进行访问。
域名：尽管 IP地址能够唯一地标记网络上的计算机，但IP地址是一长串数字，不直观，而且不便于记忆，于是人们又发明了另一套字符型的地址方案，叫域名地址。IP地址和域名是一一对应的关系，这份对应关系存放在一种叫做域名服务器(DNS)的电脑中。在开发测试期间， 127.0.0.1 对应的域名是 localhost。

本地如果localhost无法使用，则是因为本机中的hosts文件中没有匹配上ip地址

网络协议

网络上的计算机之间交换信息,就像我们说话用某种语言一样，在网络上的各台计算机之间也有一种语言，这就是网络协议，不同的计算机之间必须使用相同的网络协议才能进行通信。如：TCP、UDP、HTTP、FTP等等。

端口

服务器的端口号就像是现实生活中的门牌号一样。通过门牌号，外卖员就可以准确把外卖
送到你的手中。同样的道理，在一台电脑中，可以运行N多个web 服务。每个 web 服务都对应一个唯一的端口号。客户端发送过来的网络请求，通过端口号，可以被准确地交给对应的 web 服务进行处理。1-1024系统保留，不要用。
注：服务器上的端口号是不可以重复的，必须是独一无二
http服务默认端口号为 80 https默认端口号443

1.3、页面渲染模式

1.3.1、ssr(服务器端渲染)

ssr (Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面响应给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

优缺点：

1、利用SEO（搜索引擎）
2、页面渲染时间短
3、服务器压力过大

1.3.2、csr(客户端渲染) 【不依赖任何流量或后台管理】

CSR(Client Side Rendering)：是一种目前流行的渲染方式，页面由js渲染，js运行于浏览器端，所以称客户端渲染。

优缺点：

1、前后端并行开发，开发速度提升
2、首屏渲染时间比较长（首屏加载速度慢）
3、不利于SEO
2.4、创建web服务
NodeJs是通过官方提供的http模块来创建 web服务器的模块。通过几行简单的代码，就能轻松的手写一个web服务，从而对外提供 web 服务。

创建web服务基本步骤

①、导入http模块
const http = require(‘http’)
②、创建web服务对象实例 – 我的协议 http
const server = http.createServer()
③、绑定监听客户端请求事件request
server.on(‘request’, (request, response) => {})

request: 接受客户端请求对象，它包含了与客户端相关的数据和属性
		   request.url      客户端请求的uri地址  -- 路由
		   request.method  客户端请求的方式 get或post
		   req.headers	  客户端请求头信息
response:服务器对客户端的响应对象
		  # 设置响应头信息 ，用于响应时有中文时乱码解决处理
		  response.setHeader('content-type', 'text/html;charset=utf-8')
		  # 设置状态码
		  res.statusCod = 200
		  # 向客户端发送响应数据,并结束本次请求的处理过程
		  res.end('hello world')

④、启动服务
#在window中查看当前电脑中是否占用此端口命令
# 如果返回为空，表示此端口没有表占用，有值则为占用
# window netstat -ano | findstr 8080
# mac sudo lsof -i tcp:port
server.listen(8080, ‘0.0.0.0’ () => {
console.log(‘服务已启动’)
})

1.5、静态资源服务器

实现思路

客户端请求的每个资源uri地址，作为在本机服务器指定目录中的文件。通过相关模块进行读取文件中数据进行响应给客户端，从而实现静态服务器。

实现步骤

①、导入需要的模块
const http = require(‘http’)
const fs = require(‘fs’)
const path = require(‘path’)
const url = require(‘url’)
②、使用http模块创建web服务器
const server = http.createServer()
③、将资源的请求uri地址映射为文件的存放路径
// 事件监听
server.on(‘request’, (req, res) => {
// 得到请求的uri
let pathname = req.url
pathname = pathname === ‘/’ ? ‘/index.html’ : pathname
if (pathname !== ‘/favicon.ico’) {
// 请求静态地址
let filepath = path.join(__dirname, ‘public’, pathname)
}
})
④、读取文件内容并响应给客户端
fs.readFile(filepath, (err, data) => {
if (err) {
res.statusCode = 500
res.end(‘服务器内部错误’)
}else{
res.end(data)
}
})

1.6、get数据获取

get数据通过地址栏使用query方式进行传递的数据 例?id=1&name=zhangsan
const http = require(‘http’);
const url = require(‘url’);
http.createServer((req, res) => {
// 获取地址栏中 query数据
let { query } = url.parse(req.url, true);
console.log(query);
}).listen(8080)

1.7、post数据获取

表单数据多数为post进行提交到服务器端。
const http = require(‘http’);
const queryString = require(‘querystring’);
http.createServer((req, res) => {

let data = ‘’;
// 数据接受中
req.on(‘data’, res => {
data += res
});
// 数据传输结束了 接受到的所有数据
req.on(‘end’, () => {
// post数据
let post = queryString.parse(data)
console.log(post);
});

}).listen(8080)

1.8、浏览器缓存

浏览器缓存类型

强缓存

响应头中去设置 服务器主动发送给浏览器
Expires: GMT格式时间 http1.0
Cache-Control: max-age=秒数 http1.1

协商缓存

Last-Modified: GMT格式时间 http1.0 服务器发送给浏览器
Etag: “hash字符串” http1.1 服务器发送给浏览器

服务器还需要接受浏览器发过来的头信息,进行比较，然后来返回,如果返回的和上一次不一致，则更新
Last-Modified => 客户端发送给服务器 if-modified-since
Etag => 客户端发送给服务器 If-None-Match