web服务器学习小结

2.1、介绍

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

请求：

请求行、请求头、请求体

响应：

响应行、响应头、响应体

2.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

2.3、页面渲染模式

2.3.1、ssr(服务器端渲染)

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

优缺点：

1、利用SEO（搜索引擎）

2、页面渲染时间短

3、服务器压力过大

2.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('服务已启动')

})

2.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)

        }

})

2.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)

2.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)

2.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