一、服务端与客户端

1. 什么是上网

通过因特网（internet）进行获取各种各样的资源（文字、图片、音频、视频,....css/js）

获取资源的过程就也就是享受服务的过程 。

2. 享受服务的流程

1、现实生活中的服务

请求：一定用户主动向海底捞这里发起诉求（ 鸳鸯锅、羊肉、牛肉、粉丝、生菜、虾仁 ）10斤一只 （ 以后我们前端工程师要做的事情 ）

处理：处理用户的诉求 （后端干的）

响应：把结果响应给客户，比如：正常的结果，没货，厨子不在，饭店未营业 （后端干的）

客户端（用户），根据响应的结果做后续的事情（ 以后我们前端工程师要做的事情 ）

2、互联网上的服务(客户端与服务器端的一次请求流程)

请求：用户主动通过浏览器（客户端）发起网页诉求

处理/响应：把对应的文件内容返回给客户

渲染：浏览器根据服务器端返回的内容渲染在页面上。

3. 服务器

就是远程的一台电脑。它的配置比我们 PC（Personal Computer）的配置要高。服务器也是连网的（Internet）

举例：CTS服务器、优就业官网、中公教育服务器、淘宝www.taobao.com、百度www.baidu.com、腾讯www.qq.com

4. 客户端

浏览器（发起诉求：请求），客户端有很多种表现形式。 app。

qq、微信（是可以打开网页）

5. url地址

5.1 基本概念

简单来说就是网址。URL（全称是Uniform Resource Locator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。

5.2 URL格式

通信协议：

http/https

http://www.ujiuye.com/

https://www.baidu.com/

服务器名称：

经常用域名来代替。

端口号：

服务器是封闭的状态 。计算机是封闭的。服务器上的文件是如何让用户拿到的，就是服务器上开放了一个口子（端口号）

我们上网一定是访问的服务器，服务器上可以有很多种服务，而这每一个服务都是不同端口开启的。并且在同一个计算机上不能有相同的两个端口 。

安装qq、安装微信

范围：1-65535 尽量不要使用3000以下的端口。因为计算机 默认的一些软件或服务用的端口比较小。

http协议端口是80。

https协议端口是443。

路径：

文件在服务上的某个地址 。是以服务器的相对地址开始找 。

参数：

是前端传递数据给服务器非常重要的一个环节。

?key1=value1&key=value2... 查询字符串参数

锚点：

url地址最后面 加 #锚点 ，是在本页面用的。锚点是不会传递到服务器的。

6. 域名与ip的关系

北京市，朝阳区，xxxx街道，朝阳北路101号，朝阳大悦城xxx几层

IP：

区分服务器就是用IP。 x,x,x,x 0-255

域名：

来更好的表示服务器。好记。 baidu.com taobao.com

DNS服务器：

Domain Name System。远程的一台电脑，存放了IP与域名的指向关系 。

whois查询可以看域名的信息： https://whois.chinaz.com/

cmd快速查看域名和ip的指向： ping 域名 （查看此域名通不通）

二、互联网传输协议之HTTP

HTTP

什么是协议：协议（ Protocol）是指双方为了完成一个目标结果所必须遵守的规则和约定。

通俗的理解：双方采用约定好的格式来做某种事情，这种事先约定好的格式，就叫做协议。

1. 协议分类

1.1 现实中的协议

邮寄规则：寄件人信息、收件人信息

1.2 互联网中的传输协议

Http（HyperText Transfer Protocol）：超文本传输协议 （文本、图片、视频、音频、css、js....）。

2. 工作原理

2.1 交互模型（请求与响应）

交互模型（请求与响应）：HTTP 协议采用了 请求/响应 的交互模型。也就是说必须是客户端主动发起请求，再由服务器端处理请求，同时被动的把内容响应给客户端

2.2 http协议的组成

请求消息、响应消息、请求方法、状态码

目标：要学会用浏览器查看每一个组成部分即可。 network

http://www.ujiuye.com/zt/webqzgcs/

2.2.1 请求消息

描述：客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息，叫做 HTTP 请求消息（又叫做 HTTP 请求报文头。） 简单来说就是客户端告知服务器我要干什么。

组成：请求行、请求头部字段、请求体

请求消息格式

只有post方式的请求才有请求体

请求行格式

www.ujiuye.com/zt/webqzgcs/

2.2.2 响应消息

描述：响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。比如：海底捞服务员把后厨准备好的食材交付给用户

组成：状态行、响应头部、空行、响应体、

Date:响应时间

Content-Type：text/html 返回的数据类型描述 。服务器返回的是一个html类型格式数据（那么客户端应该把数据当作html标签来渲染）。

2.2.3 请求方法(方式)

用来表明要对服务器上的资源执行的某操作，以何种方式进行请求。

常见请求方法比如：get获取/post提交数据/delete删除/put更新的

2.2.4 状态码

用来标识响应的状态。服务器的结果要用状态码来进行描述。比如：404页面不存在。200成功

404 Not Found 未找到

200 OK 成功

三、Node创建服务器（了解）

原生的写法去创建服务器。

目的：总结上面讲的理论

实际做项目：用Express框架

创建服务器步骤

需求：请求服务器的某个地址，返回hello world

//1、使用原生node中的http模块。
const http = require('http') //是一个对象
// console.log( http ); 
//2. 使用http.createServer() 函数，创建一个服务器

let server = http.createServer() //返回服务器，但是它是封闭
// console.log( server,'服务器对象' );
//3. 开启端口
server.listen( 3000 ) //兼听一个3000端口
// console.log( server.listen );

//4. 服务端兼听客户端的请求事件  使用node运行的js文件，使用了console那么是在执行命令的控制台查询。
    //修改了代码必须重新node一下。
server.on('request',function(req,res){
                            //request: req 第1个参数是请求对象
                            //response: res  第2个参数是响应对象 
    //
    res.end( 'hello world' )//向客户端响应内容，注意：必须是个字符串或二进制流
    console.log('一个用户请求了我')
})

如何访问

http://localhost:3000/
http://127.0.0.1:3000
127.0.0.1  === localhost === 访问的是你本台电脑的服务器
http://你的ip地址:3000

代码演示1：

设置响应头信息。res.writeHead(200,{'Content-Type':"text/html;charset=utf8"})

//1、使用原生node中的http模块。
const http = require('http') //是一个对象
// console.log( http ); 
//2. 使用http.createServer() 函数，创建一个服务器

let server = http.createServer() //返回服务器，但是它是封闭
// console.log( server,'服务器对象' );
//3. 开启端口
server.listen( 3000 ) //兼听一个3000端口
// console.log( server.listen );

//4. 服务端兼听客户端的请求事件  使用node运行的js文件，使用了console那么是在执行命令的控制台查询。
    //修改了代码必须重新node一下。
server.on('request',function(req,res){
                            //request: req 第1个参数是请求对象
                            //response: res  第2个参数是响应对象 
    //告诉客户端我的内容你拿到以后应该如何处理 ：通过响应头
    res.writeHead( 200,{ 'Content-type':'text/html;charset=utf8' }) //需要传递一个状态码

    // res.end( '<h2>hello world</h2>' )//向客户端响应内容，注意：必须是个字符串或二进制流
    res.end( '<h2>hello world 我是中文</h2>' )//向客户端响应内容，注意：必须是个字符串或二进制流

}) 

listen EADDRINUSE: address already in use :::3000

代码演示2：

打印请求消息。method和url

const http = require('http') //是一个对象
let server = http.createServer() 
server.listen( 3000 ) 

const qs = require('querystring')

server.on('request',function(req,res){
   
    //请求的方式和请求的路径地址
    // console.log( req.method ,'请求的方式'); //只要通过浏览器地址栏发的请求都是GET
    // console.log( req.url,'请求的路径' );

    let urlStr = '/register?username=admin&password=123'
    let urls = urlStr.split( '?' )
    // console.log( urls[1] );
    console.log( qs.parse( urls[1] ) )
    res.end('ok123')

})

代码演示3：

根据不同路径地址返回不同消息。/login和/register

const http = require('http') //是一个对象
let server = http.createServer()
server.listen(3000)


server.on('request', function (req, res) {

    //req.url //  /login  /register
    //  /register?username=12
    // if (req.url == '/login') {
    //     res.end('login page')
    // } else if (req.url == '/register') {
    //     res.end('regsiter page')
    // }else{
    //     res.end('my is 404 page')
    // }


    if ( req.url.startsWith('/login') ) { // 判断以 /login 开头
        res.end('login page')
    } else if (req.url.startsWith('/register') ) { //判断以 /register开头
        res.end('regsiter page')
    }else{
        res.writeHead(404) //设置404 status
        res.end('my is 404 page')
    }
})

代码演示4：

根据不同路径地址返回对应html页面内容/login和/register

const http = require('http') //是一个对象
let server = http.createServer()
server.listen(3000)

//fs path
const path = require('path')
const fs = require('fs')

server.on('request', function (req, res) {

    if ( req.url.startsWith('/login') ) { // 判断以 /login 开头
        let filepath = path.join( __dirname,'views/login.html' )
        
        res.end(fs.readFileSync( filepath )) //读取内容并且返回给客户端
    } else if (req.url.startsWith('/register') ) { //判断以 /register开头
        let filepath = path.join( __dirname,'views/reg.html' )
        
        res.end(fs.readFileSync( filepath )) //读取内容并且返回给客户端
    }else{
        res.writeHead(404) //设置404 status
        res.end('my is 404 page')
    }
})