刚接触Web开发时的迷茫

我相信绝大多数程序员都是经过Hello World开启了我们的编程生涯，当年我看到这一句话在控制台显示时心里激动不已，仿佛个人代码带领我触及到了另外一个世界。

跟“新世界”打了声招呼后便快马加鞭地学习了顺序、分支、循环，看着控制台循环显示出我定义好的文字，我认为这个"世界"尽就我手中！

紧接着再学习了数组、方法、面向对象、集合、I/O、多线程、网络编程、数据库……我有点迷茫了，我不知道这些知识能干吗，因而照着网上作了几个XX管理系统。

正当我略有成就感时，别人的一句 “你这黑框框这么丑谁会用啊？” 把我全部自信都打没了。是啊，我本身作的这些小玩意连我本身都不会考虑使用，又哪能期望别人会用呢。

因而我开始思考如何才能作出你们愿意使用的程序，进而了解到原来编程还有众多方向：桌面端、移动端、游戏、Web等等等等，每个方向都值得咱们在其中深耕。由于当时我以为一个网站可以垂手可得地被全世界的人访问和使用，这太帅了，恰好我会的Java很是适合作Web开发，因此我瞄准了Web开发方向。

要学习Web必然绕不开网页三剑客：HTML、CSS、JavaScript，经过它们我终于摆脱了黑乎乎的控制台！然而喜悦是短暂的，学了许久“三剑客”的我作出来的网页很是丑陋，和其它网站如云泥之别。而且我作出来的网页就是一些元素组装在那，只是经过一些操做变换一些元素，没有任何实际的功能（好比购物、看影视、搜索等等）！

我陷入了无尽的迷茫中，感受我学了特别多的东西和知识，但彻底不知道如何运用这些作出一个产品，一个让你们有使用欲望、有实际功能的产品。脑壳里各个知识点犹如孤立的零件，这些零件没法组装成一个机器，毫无心义。

我小小的脑壳里充满了大大的疑惑：

Java中的各个项技术有啥用，和网页有啥关系？

说Java适合作Web开发怎么半途又让我去学“网页三剑客”？

那些有实际功能的网页是怎么作出来？

个人网页为啥只能在本地看到，怎样才能让全世界的人看到？

……

当时这么多的迷茫险些让我放弃编程，出现这种状况并不全是由于技术有必定的上手门槛，更可能是由于本身的学习方式有问题。我没有对将要学习的内容进行梳理和规划，而是一头扎进陌生领域的黑暗中，天然碰壁碰得头破血流。因此接下来在讲解具体代码前咱们须要对Web开发进行一个简单的俯瞰，这样咱们在学习技术的时候才能有的放矢、事半功倍。

世界是如何看到咱们的网页

互联网的诞生让各计算机之间产生了联系，尽管最开始只有发发邮件等简单的功能，但这也让咱们从孤岛走向了世界。那时咱们数据的表现形式也很是简单，文字、图片、视频各司其职，要想使用这些数据必须打开相应的软件才行，好比最经常使用的txt文本格式须要用记事本打开。随着时代的发展，人们开始不知足于如此单调的数据交互，超文本标记语言HTML应运而生。

为何叫“超文本”呢，由于HTML所展现的内容不仅是文字，它还能够展现连接、图片、视频、表格等多种数据：

<a href="xx.html"></a> 表示连接；
<img src="xx.jpg" alt=""> 表示图片；
<video src="xx.mp4"></video> 表示视频；
<table></table> 表示表格；

……
复制代码

上面一组组的尖括号就是HTML的标签，也能够叫元素。这些元素须要使用专门的软件才能正确渲染出对应的数据，不然和文本文字没有区别，这个渲染HTML的软件就是咱们常说的浏览器。

只要在浏览器中输入正确的路径便可将HTML渲染成网页，这个路径能够是本地文件路径，也能够是网址。输入本地路径是将本计算机的HTML文件直接打开而后渲染，输入网址则是从其余计算机上获取HTML内容而后进行渲染。这个给咱们发送HTML的机器咱们称为Web服务器。

如上图所示，从输入网址到渲染网页就两个流程：

1. 从浏览器到服务器，这个流程称之为请求（Request）;

2. 从服务器到浏览器，这个流程称之为响应（Response）;

虽然看上去很是简单，可这两个流程背后都包含了无数的细节。目前就有两个问题摆在咱们面前：

1. 一串网址而已，怎么就链接到了服务器？

2. 服务器经过什么手段将HTML传输给浏览器？

咱们就经过这两个问题做为切入点，来更加深刻地剖析整个流程。

请求

URL和HTTP

网址你们都见过，好比http://www.rudecrab.com。比起“网址”，这一串文字更精准的描述是URL（统一资源定位符）。为何这么叫呢，由于这一串文字在全世界范围内须要保证惟一，以起到一个定位资源的做用，这个资源能够是一个HTML页面，能够是一张图片，也能够是其余东西。URL保证惟一是Web世界的重要前提，就好像手机号、身份证同样，若是有重复的可能则整个世界就要乱套了。

URL分为两个部分组成，协议和内容。要知道浏览器并不仅有渲染网页这一个功能，不一样的协议则表明不一样的功能，浏览器根据协议来进行相应的操做！

HTTP协议全称为超文本传输协议（HyperText Transfer Protocol），浏览器和Web服务器之间按照该协议标准创建链接，从而传输数据。除了HTTP协议外还有许多协议，好比File协议则是用来打开本地文件，当你用浏览器打开本地网页时就能够看到文件路径前加上了file://；FTP协议是用来上传/下载文件，等等。

协议用来肯定功能，内容则是用来定位具体资源！www.rudecrab.com相信你们都很熟悉，这就是咱们常说的域名，它用来定位到具体的服务器。具体怎么定位，就是咱们接下来要讲解的DNS技术了。

IP和DNS

服务器就是一台链接到互联网的计算机，在网络中全部的设备都会被分配一个地址用来做标识，这个地址就是IP地址。有了IP地址咱们就能够肯定通信的发送方和接收方，两个设备间才能够互相通信。

网络通信全靠IP地址来进行定位，可这给咱们带来了使用难度，浏览网页还要记得那么多数字这太麻烦了，因此就诞生了域名技术。咱们直接输入域名就能够浏览网页，只不过在发送真正的HTTP请求前咱们还须要将域名解析成IP地址，这个解析工做就是由域名系统DNS（Domain Name System）来完成的。

若把IP地址比做一个电话号码，那么域名就是联系人备注，而DNS就是一个通信录！ 当咱们输入域名后，浏览器会向DNS服务器发送域名解析请求，DNS服务器中解析完毕以后则会将域名对应的Web服务器IP返回给浏览器。浏览器知道了IP后，才会发送真正的HTTP请求。这全部的工做浏览器在背后都帮咱们作好了：

有人可能会问，那DNS服务器不也要靠IP来定位吗，浏览器又是怎么知道DNS服务器的IP呢？这是由于咱们操做系统的网络配置中已经记录好DNS服务器的IP地址了，能够直接经过IP地址向DNS服务器发送请求。不一样的操做系统查询本机的DNS地址方式不一样，有兴趣的能够自行去查看了解。

还有人可能会问，为啥要多一道域名解析的工序呢，弃用IP直接用域名来做网络地址标识很差吗。这是由于IP地址的长度是固定的，而域名长度不是固定的，使用IP地址只须要处理4个字节的数据，而使用域名则可能须要处理几十上百个字节的数据，为了效率考虑就采用IP来进行网络寻址定位了。

响应

如今咱们已经知道了当咱们输入URL后浏览器是怎么链接到Web服务器，接下来咱们就要搞懂服务器是怎样将HTML返回给浏览器！

软件和端口

服务器只是一台计算机一台硬件，收到网络请求后最终仍是要由操做系统和程序软件去处理。硬件和操做系统太过底层，因此咱们所说的处理网络请求通常都是讲的软件程序层面。这种提供了各类服务的程序，咱们称为应用服务器。

这里要额外注意一点，咱们常说的服务器、应用服务器、Web服务器每每都是一个概念，既能够指代硬件也能够指代软件。不少时候咱们并不须要区分软硬件的语义，就好像咱们常说的“我在用手机浏览网页”，此时手机的语义是硬件仍是浏览器软件并不重要。咱们根据上下文语境天然而然能提取出名词的含义，因此不须要纠结字眼，在须要区分语义的地方我会进行描述的。

应用服务器有不少种，除了Web服务器外还有FTP服务器、邮件服务器、数据库服务器，等等。一台计算机上能够安装多个服务器软件来同时提供服务，若是没有安装软件天然就没有对应的功能。IP地址是定位到硬件，那么当服务器收到请求的时候是如何判断要提供哪一个服务呢？这时候就要用到端口（Port）。

ip地址就像是一个银行，端口就像是银行内的窗口，不一样的窗口提供不一样的服务。端口号的范围从0到65535，每一个服务软件都有本身的端口，好比Web服务器默认的端口为80，FTP服务器默认的端口为21。当咱们输入URL发起HTTP请求时，若是咱们Web服务器的端口没有修改，默认端口80是能够省略输入的，若是咱们端口修改了则须要指定端口才能成功发起请求：www.rudecrab.com:8080。

静态网页和动态网页

如今咱们知道了HTTP请求是交由Web服务器程序来处理，这个处理逻辑就是交由咱们的代码来实现了！你们所说的Java适合作Web开发，就是指使用Java开发服务器程序！能够用来开发服务器程序的还有许多语言，好比PHP、Python、Go，等等，这些均可以统称为后端语言。这个后端就是指服务器、服务端；前端天然就是指浏览器、客户端，JavaScript就是前端语言。Web开发继续细分方向也就是：前端开发和后端开发。

Web服务器最基本的功能就是解析HTTP请求将HTML返回给前端，服务器上通常会存放多个文件，服务器要根据请求返回正确的文件。

直接输入域名rudecrab.com，后面不带目录或文件时，通常会默认返回根目录下的index.html。

收到请求数据为输入，返回响应数据为输出，因此只要有I/O（输入输出）的编程语言均可以完成此逻辑。咱们当然能够经过语言的原生API来实现Web服务器，不过从零构建起来太过繁琐，业界已经有许多成熟的服务器程序供咱们直接使用，如：Tomcat、Apache、Nginx，等等。咱们只需安装这些程序，就能够处理HTTP请求并返回文件了！

这里就能够解答最开始的疑问：如何让世界看到咱们的网页？首先要购买一台服务器，这个服务器不是说他邮寄一台主机给你，而是服务器厂商将设备链接到网络上，供你控制使用。而后咱们在服务器上安装Web服务器程序，再将咱们编写好的HTML文件上传到服务器上，别人就能够经过IP访问咱们的网页了！若是想要让别人经过域名访问，那咱们就还得购买一个域名，域名厂商都会提供DNS服务，咱们只需将域名和服务器IP映射好便可。

既然有现成的Web服务器供咱们安装使用，那咱们学习的后端语言又有何用武之地呢？其实那些Web服务器只是帮咱们作好了基础服务，具体的业务逻辑仍是须要咱们编写！每个系统都有各自的业务特色，好比当用户输入帐号密码传递到服务器，不一样的系统都会作不一样的业务处理；再好比咱们每一个系统都有不一样的数据，这个数据存在数据库中也须要咱们的服务器程序处理！

而且有不少网站，同一个URL，不一样的用户看到的内容是不同的，并且内容也会更新，这个内容动态变化的逻辑也是须要咱们编写代码来控制！这种网页内容会根据不一样的状况动态变换的网页叫作动态网页，反之，那些内容不会动态变换的网页就叫作静态网页。我刚开始听到动态网页这个词时，我还觉得只要网页上有个动图就是动态网页呢，你们不要走进这个误区，像动图、元素动画这些只是“动态效果”，和咱们所说的动态网页没有关系。

静态网页，就是咱们以前图示的那样，将写好的HTML文件上传到服务器，服务器收到请求后直接将文件返回给客户端。除非咱们修改了或从新上传了这个HTML文件，不然这个文件内容就一直不会变。

动态网页，是服务端收到请求后执行代码逻辑，动态生产一个HTML文件而后返回给客户端。

服务端渲染和客户端渲染

以前我们说过Web开发细分为两个方向：前端开发和后端开发。那些漂亮的HTML页面和绚丽的交互效果就是前端负责的，具体的业务逻辑处理就是交由后端。有人可能会问，动态页面是在服务端经过后端代码生成的，没看到前端开发的影子呀？

其实，最开始并无特意将先后端开发任务给分离开来，同一个开发人员除了编写业务逻辑外也要编写页面效果。随着业务要求和页面要求都愈来愈高，多种任务基于一身实在分身乏术，因此慢慢演变成页面效果交由前端开发人员编写，后端人员只需经过代码在HTML里填充内容就行了！这种先后端的拆分只是开发任务的拆分，最终的HTML页面仍是在后端生成并返回的，也就是说一台Web服务器要执行业务代码也要生成页面，这对于服务器来讲压力太大了，而且业务逻辑和HTML页面终究是混合在一块的，不方便管理和维护。为了解决这个问题，动态生成HTML页面的任务开始从服务器端剥离，变成客户端渲染，即如今流行的先后端分离开发模式！

服务端渲染是指服务端生成完整的HTML页面而后返回给客户端，客户端只须要解析HTML便可。

客户端渲染是指服务器只返回包含了一些简单元素的静态的HTML页面，由客户端经过JavaScript来填充内容。

先后端分离模式下，前端开发人员只需关注交互效果，后端开发人员只需关注业务逻辑，开发效率很是高。我们在学习的时候也得确认好本身的方向，前端和后端都有很是庞大的体系须要咱们去钻研，固然，能力够了的状况下能够二者兼顾，即全栈开发！

不管选择哪个方向都不能一叶障目，做为后端开发人员也要了解一些前端的知识，若是对前端一窍不通那你都没法理解交互逻辑、数据扭转，又谈何业务逻辑的编写呢，这也是咱们学习Java的过程当中要去学习前端的缘由。

小结

通过一番梳理后我相信我们对Web已有了一个大概脉络，方便我们在学习的时候明确本身的学习方向。固然，这只是作了一个简单的梳理，有许多细节没有讲到，好比TCP/IP协议、HTTP报文、CDN，等等。不过刚开始只需理解一个大概轮廓便可，否则容易陷入细节的风暴中绕不出来了！

后面我会陆续补充更多的细节，从单机应用演进到分布式微服务架构，由浅入深我们慢慢来！

博客、Github、微信公众号请认准：RudeCrab，欢迎关注！若是对你有帮助能够收藏、点赞、star、在看、分享~~ 你的支持，就是我写文的最大动力

微信上转载请联系公众号开启白名单，其余地方转载请标明原地址、原做者！