剛接觸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、在看、分享~~ 你的支持，就是我寫文的最大動力

微信上轉載請聯繫公衆號開啓白名單，其餘地方轉載請標明原地址、原做者！