客户端与服务器
上网的目的
刷微博、浏览新闻、在线听音乐、在线看电影…
上网的本质目的:通过互联网的形式来获取和消费资源
服务器
上网过程中,负责存放和对外提供资源的电脑,叫做服务器。
客户端
上网过程中,负责获取和消费资源的电脑,叫做客户端。
URL地址
URL地址的概念
URL(全称是UniformResourceLocator)中文叫统一资源定位符,用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。
常见的URL举例:
http://www.baidu.com
http://www.taobao.com
URL地址的组成部分
URL地址一般由三部组成:
- 客户端与服务器之间的通信协议
- 存有该资源的服务器名称
- 资源在服务器上具体的存放位置
https://blog.csdn.net/qq_43434300/article/details/108519041
通信协议:https
服务器名称:blog.csdn.net
资源在服务器上具体存放的位置:qq_43434300/article/details/108519041
客户端与服务器通信
图解通信过程
客户端
- 打开浏览器
- 输入要访问的网站地址
- 回车,向服务器发起资源请求
服务器端
- 服务器接收到客户端发来的资源请求
- 服务器在内部处理这次请求,找到相关的资源
- 服务器把找到的资源,响应(发送)给客户端
注意
- 客户端与服务器之间的通信过程,分为“请求 – 处理 – 响应”三个步骤。
- 网页中的每一个资源,都是通过“请求 – 处理 – 响应”的方式从服务器获取回来的。
开发者工具分析
- 打开 Chrome 浏览器
- Ctrl+Shift+I 打开 Chrome 的开发者工具
- 切换到 Network 面板
- 选中 Doc 页签
- 刷新页面,分析客户端与服务器的通信过程
服务器提供的资源
网页中常见的资源
- 文字内容
- Image 图片
- Audio音频
- Video视频
- 网页中的数据
- …
数据也是资源
网页中的数据,也是服务器对外提供的一种资源。例如股票数据、各行业排行榜等
数据是网页的灵魂
- HTML是网页的骨架
- CSS是网页的颜值
- Javascript是网页的行为
- 数据,则是网页的灵魂
骨架、颜值、行为皆为数据服务数据,在网页中无处不在
如何请求数据
数据,也是服务器对外提供的一种资源。只要是资源,必然要通过 请求 – 处理 – 响应 的方式进行获取。
如果要在网页中请求服务器上的数据资源,则需要用到 XMLHttpRequest 对象。
XMLHttpRequest(简称 xhr)是浏览器提供的 js 成员,通过它,可以请求服务器上的数据资源。
最简单的用法 var xhrObj = new XMLHttpRequest()
资源的请求方式
客户端请求服务器时,请求的方式有很多种,最常见的两种请求方式分别为 get 和 post 请求。
-
get 请求通常用于获取服务端资源(向服务器要资源)
例如:根据 URL 地址,从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等
-
post 请求通常用于向服务器提交数据(往服务器发送资源)
例如:登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作
初识 Node.js
前端回顾
已经掌握的技术
HTML、CSS、JavaScript
浏览器中的JavaScript组成
JavaScript在浏览器中被执行
不同的浏览器使用不同的JavaScript解析引擎:
- Chrome 浏览器 => V8
- Firefox 浏览器 => OdinMonkey (奥丁猴)
- Safri 浏览器 => JSCore
- IE 浏览器 => Chakra (查克拉)
- etc…
其中,Chrome 浏览器的 V8 解析引擎性能最好!
JavaScript操作DOM和BOM
每个浏览器都内置了 DOM 、BOM 这样的 API函数,因此,浏览器中的 JavaScript 才可以调用它们。
JavaScript运行环境
运行环境是指代码正常运行所需的必要环境 。
总结:
- V8 引擎负责解析和执行 JavaScript 代码。
- 内置 API 是由 运行环境 提供的特殊接口,只能在所属的运行环境中被调用 。
JavaScript能否做后端开发
通常做后端开发的语言使用的有Java、Python、PHP、C#等
而JavaScript已经完全可以实现后端开发的需求,其条件是JavaScript的运行环境从浏览器引擎更改为Node.js环境即可实现。
Node.js简介
Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.
Node.js是 一个基于 Chrome V8 引擎的 JavaScript 运行环境 。
Node.js的官网地址: https://nodejs.org/zh-cn/
Node.js中的JS 运行环境
注意:
- 浏览器 是 JavaScript 的 前端运行环境 。
- Node.js 是 JavaScript 的 后端运行环境 。
- Node.js 中 无法调用 DOM 和 BOM 等浏览器内置 API 。
Node.js的功能
Node.js作为一个 JavaScript 的运行环境,仅仅提供了基础的功能和 API 。然而,基于 Node.js 提供的这些基础能,很多强大的工具和框架如雨后春笋,层出不穷,所以学会了 Node.js ,可以让前端程序员胜任更多的工作和岗位:
- 基于 Express 框架( http://www.expressjs.com.cn/ cn/),可以快速构建 Web 应用
- 基于 Electron 框架( https://electronjs.org/ org/),可以构建跨平台的桌面应用
- 基于 restify 框架( http://restify.com/ com/),可以快速构建 API 接口项目
- 读写和操作数据库、创建实用的命令行工具辅助前端开发、 etc…
总之:Node.js 是大前端时代的“尚方宝剑”,有了 Node.js 这个超级 buff 的加持,前端程序员的行业竞争力会越来越强!
Node.js的组成
浏览器中的JavaScript:
JavaScript基础语法+浏览器内置API(DOM+BOM)+第三方库(jQuery、art-template等)
Node.js:
JavaScript基础语法+Node.js内置API模块(fs、path、http+第三方API模块 express、mysql等)
Node.js环境的安装
安装包可以从Node.js 的官网首页直接下载,进入到 Node.js 的官网首页( https://nodejs.org/en/en/),点击绿色的按钮,下载所需的版本后,双击直接安装即可。
LTS版本和Current版本
- LTS为长期稳定版,对于追求稳定性的企业级项目来说,推荐安装LTS版本的 Node.js 。
- Current为新特性尝鲜版,对热衷于尝试新特性 的用户来说,推荐安装Current版本的 Node.js。但是,Current版本中可能存在隐藏的 Bug 或安全性漏洞,因此不推荐在企业级项目中使用Current版本的Node.js
查看Node.js版本
打开终端,在终端输入命令node -v后,按下回车键,即可查看已安装的 Node.js 的版本号。
什么是终端
终端(英文:Terminal)是专门为开发人员设计的用于实现人机交互 的一种方式。
作为一名合格的程序员,我们有必要识记一些常用的终端命令,来辅助我们更好的操作与使用计算机。
Node.js中执行JS代码
- 打开终端
- 输入“node 要执行的 js 文件的路径”
终端中的快捷键
在Windows的powershell或cmd终端中,我们可以通过如下快捷键,来提高终端的操作效率:
- 使用↑键,可以快速定位到上一次执行的命令
- 使用tab键,能够快速补全路径
- 使用esc键,能够快速清空当前已输入的命令
- 输入cls命令,可以清空终端
fs文件系统模块
fs模块介绍
fs模块是Node.js官方提供的用来操作文件的模块。它提供了一系列的方法和属性,用来满足用户对文件的操作需求。
fs模块的使用
-
使用fs模块来操作文件,先导入fs
const fs=require('fs');
-
读取指定文件中的内容
fs.readFile(path,[options],callback)
参数解读:
参数1:必选参数,字符串,表示文件的路径。
参数2:可选参数,表示以什么编码格式来读取文件。
参数3:必选参数,文件读取完成后,通过回调函数拿到读取的结果。
-
向指定的文件中入内容
fs.writeFile(file,data,[options],callback)
参数解读:
参数 1 必选 参数,需要指定一个 文件路径的字符串 ,表示文件的存放路径。
参数 2 必选 参数,表示要写入的内容。
参数 3 :可选参数,表示以什么格式写入文件内容,默认值是 utf8 。
参数 4 必选 参数,文件写入完成后的回调函数。
路径动态拼接的问题
在使用fs模块操作文件时,如果提供的操作路径是以./或…/开头的相对路径时,很容易出现路径动态拼接错误的问题。
原因:代码在运行的时候,会以执行node命令时所处的目录 ,动态拼接出被操作文件的完整路径。
解决方案:
- 在使用fs模块操作文件时, 直接提供完整的路径,不要提供./或…/开头的相对路径,从而防止路径动态拼接的问题。
- 使用__dirname和相对路径进行拼接使用,__dirname属性表示当前文件所处的目录
path路径模块
path模块介绍
path模块是Node.js官方提供的、用来处理路径的模块。它提供了一系列的方法和属性,用来满足用户对路径的处理。
path模块的使用
-
使用path模块来处理路径,先导入path
const path=require('path')
-
路径拼接
使用path.join () 方法,可以把多个路径片段拼接为完整的路径字符串。
path.join([...paths])
参数解读:
- …paths < string> 路径片段的序列
- 返回值 : < string>
注意:
今后凡是涉及到路径拼接的操作,都要使用 path.join() 方法进行处理 。不要直接使用+进行字符串的拼接。 -
获取路径中的文件名
使用path.basename () 方法,可以获取路径中的最后一部分,经常通过这个方法获取路径中的文件名。
path.basename(path,[ext])
参数解读:
- path< string> 必选参数,表示一个路径的字符
- ext< string> 可选参数,表示文件扩展名
- 返回:< string> 表示路径中的最后一部分
-
获取路径中的文件扩展名
使用path.extname () 方法,可以获取路径中的扩展名部分。
path.extname(path)m
参数解读:
- path < string> 必选参数,表示一个路径的字符串
- 返回:< string> 返回得到的扩展名字符串
http模块
http模块介绍
在网络节点中,负责消费资源的电脑,叫做客户端;负责对外提供网络资源 的电脑,叫做服务器。
http模块是Node.js官方提供的、用来创建web服务器的模块。通过http模块提供的 http.createServer () 方法,就能方便的把一台普通的电脑,变成一台 Web 服务器,从而对外提供 Web 资源服务。
http模块的作用
服务器和普通电脑的区别在于,服务器上安装了web服务器软件,例如IIS、Apache等。通过安装这些服务器软件,就能把一台普通的电脑变成一台web服务器。
在Node.js中,我们不需要使用IIS、Apache等这些第三方web服务器软件。因为我们可以基于Node.js提供的http模块,通过几行简单的代码,就能轻松的手写一个服务器软件,从而对外提供web服务。
服务器相关的概念
IP地址
IP地址就是互联网上每台计算机的唯一地址 ,因此IP地址具有唯一性。如果把“个人电脑”比作“一台电话”,那么“IP地址”就相当于“电话号码”,只有在知道对方IP 地址的前提下,才能与对应的电脑之间进行数据通信。
IP地址的格式:通常用“点分十进制”表示成a.b.c.d)的形式,其中a,b,c,d都是0~255之间的十进制整数。例如:用点分十进表示的 IP 地址(192.168.1.1)
注意:
- 互联网中每台 Web 服务器,都有自己的 IP 地址 ,例如:大家可以在 Windows 的终端中运行 ping www.baidu.com 命令,即可查看到百度服务器的 IP 地址。
- 在开发期间,自己的电脑既是一台服务器,也是一个客户端,为了方便测试,可以在自己的浏览器中输入 127.0.0.1 这个IP 地址,就能把自己的电脑当做一台服务器进行访问了。
域名和域名服务器
- 尽管IP地址能够唯一地标记网络上的计算机,但 IP地址是一长串数字,不直观,而且不便于记忆,于是人们又发明了另一套字符型的地址方案,即所谓的域名( Domain Name)地址
- IP地址和域名是一一对应的关系,这份对应关系存放在一种叫做域名服务器(DNS Domain name server)的电脑中。使用者只需通过好记的域名访问对应的服务器即可,对应的转换工作由域名服务器实现。因此,域名服务器就是提供IP地址和域名之间的转换服务的服务器。
注意:
- 单纯使用 IP 地址,互联网中的电脑也能够正常工作。但是有了域名的加持,能让互联网的世界变得更加方便。
- 在开发测试期间,127.0.0.1对应的域名是localhost,它们都代表我们自己的这台电脑,在使用效果上没有任何区别。
端口号
计算机中的端口号,就好像是现实生活中的门牌号一样。通过门牌号,外卖小哥可以在整栋大楼众多的房间中,准确把外卖送到你的手中。
同样的道理,在一台电脑中,可以运行成百上千个web 服务。每个 web 服务都对应一个唯一的端口号。客户端发送过来的网络请求,通过端口号,可以被准确地交给对应的web服务进行处理。
注意:
- 每个端口号不能同时被多个 web 服务占用。
- 在实际应用中,URL中的80端口可以被省略。
创建web服务器
-
导入 http 模块
如果需要在自己的电脑上创建一个web服务器,从而对外提供 web 服务,则需要导入 http 模块
const http=require("http")
-
创建 web 服务器实例
调用http.createServer方法,即可快速创建一个 web 服务器实例:
const server=http.createServer()
-
为服务器实例绑定 request 事件, 监听客户端的请求
为服务器实例绑定request 事件,即可监听客户端 发送过来的网络请求:
server.on('request',(req,res)=>{ console.log('my server') })
-
启动服务器
调用服务器实例的.listen() 方法,即可启动当前的 web 服务器实例:
server.listen(80,()=>{ console.log('server run at http://127.0.0.1') })
req请求对象
只要服务器接收到了客户端的请求,就会调用通过server.on () 为服务器绑定的 request 事件处理函数 。
如果想在事件处理函数中,访问与客户端相关的数据或属性
- req.url:客户端请求的url地址
- req.method:客户端的method请求类型
res响应对象
在服务器的request事件处理函数中,如果想访问与服务器相关的数据或属性
- res.end()方法:向客户端发送指定的内容,并结束这次请求的处理过程
解决中文乱码问题
当调用res.end()方法,向客户端发送中文内容的时候,会出现乱码问题,此时,需要手动设置内容的编码格式
setHeader等设置必须写在end响应发送之前设置好
res.setHeader(‘Content-Type’,‘text/html; charset=utf-8’)