0. 前言
人可一日無飯, 不可一日無網.
網際網路發展至今天, 基於網路的應用數不勝數... 衣食住行都可以通過網際網路來實現. WEB開發指的就是開發這些基於網際網路的系統. 任何一個行業都會源源不斷的有新人進入. 特別是網際網路行業. WEB開發算是一個技術工種, 對於新人來說, 各種名詞, 思想, 框架會把人折磨的死去活來. 本系列文章旨在用最通俗的語言幫助新入行的同學從最0開始, 學會J2EE下的WEB開發. 為了讓新同學能夠用最快的時間學會WEB開發. 文章中只會提及必要的概念. 下面, 開始你的學習之旅吧~~
1. WEB基本概念
很早之前, 你用一些軟體的時候需要下載並安裝後才能使用, 如QQ, 迅雷等等. 有一天你換了一臺電腦, 發現電腦上沒有軟體, 你不得不再次下載安裝. 突然有一天你的作業系統很不幸掛了, 下載.....安裝....., 漫長的等待. 後來你發現電腦上有個叫瀏覽器的東東, 開啟它輸入網址就可以訪問一個網站, 作業系統都有預設的瀏覽器, 所以你只需要記住網址, 在任一一個電腦上都可以訪問網站了, 比以前方便多了. 在後來, 越來越多的系統都是基於瀏覽器開發的. 於是軟體衍生出兩種模式: 安裝在客戶端和通過瀏覽器訪問.
1.1 C/S&B/S
我們把需要下載安裝在客戶端的軟體叫做C/S架構(Client/Server), 即客戶端/伺服器, 使用瀏覽器就可以訪問的軟體叫B/S(Browser/Server), 即瀏覽器/伺服器. B/S架構的優勢很明顯:
- 電腦上只需要有瀏覽器即可訪問軟體(作業系統預設都有瀏覽器), 不需要下載安裝.
- 軟體開發時不需要區分客戶端作業系統, C/S軟體需要區分windows, linux, mac..
- 系統升級時不需要在客戶端更新後安裝, 只需要在伺服器升級即可
B/S架構的在開發時間和維護成本上有著很明顯的優勢, 但人無完人, 缺點同樣很明顯: 如果沒有網路或網速極慢時B/S就無用武之地了. 由於B/S較C/S的優勢較多並且網路環境也越來越好, 因此越來越多的系統都採用B/S結構. 我們說開發一個B/S結構的系統就叫做WEB開發. 學習WEB開發前一定要明白他的原理.
當我們使用一個B/S軟體時, 首先開啟瀏覽器, 輸入網址. 幾秒鐘之後一個漂亮的頁面就出現在我們的瀏覽器中了. 在這過程中發生了什麼呢? 簡單說就是瀏覽器根據網址找到伺服器, 伺服器把你想要的返回給瀏覽器. 但實際上比這個複雜的多.
先來介紹幾個常用的概念:
1.2 IP
現實生活中的每個建築物都有自己的地址, 比如XX市XX路XX號, 通過地址就可以找到這個建築. 在網路中的每臺電腦也都有一個類似的地址, 通過該地址就能在網路中找到這臺電腦, 這個地址叫做IP地址. IP格式: 112.34.56.33, 任何一臺電腦連線網路後都有IP, 這個IP只有在區域網中才能被識別. 公司內部可以通過IP連線到你的電腦, 但是在美國就無法連線到了. 如果想在任何一個地方都可以通過IP連線你的電腦需要設定獨立IP(需要額外的費用). 區域網IP相當於辦公室的工位號, 只有公司內部才識別. 購物時只填寫工位號快遞是找不到你的, 你需要花錢為你的工位購買一個全球識別的地址(獨立IP).
1.3 伺服器
一臺放B/S程式的電腦, 如果你的伺服器想被所有人訪問, 需要設定獨立IP.
1.4 域名
我們需要通過IP訪問伺服器, 但IP是一堆沒有規律的數字, 不便於記憶. 於是有人想到了使用有含義的英文單詞或字母對應伺服器的IP, 你只需要記住英文即可訪問相應的伺服器. 相當於給伺服器起個一個英文名字. 這個名字就叫做域名. 當你用瀏覽器訪問伺服器的時候就可以忘記IP, 只需要記住域名就可以了. 比如a.com就是一個域名
1.5 DNS
你給自己的伺服器設定了IP並起了一個好聽的域名. 但是其他人並不知道域名對應的是哪個IP, 這時就需要有一個地方專門配置域名和IP的對應關係. 當在瀏覽器中輸入域名後, 會從這個地方找到域名對應的IP, 通過IP訪問伺服器. 這個配置域名和IP對應關係的地方就叫做DNS(Domain Name System): 域名系統.
1.6 埠
通過域名或者IP可以找到對應的伺服器, 但如果一個伺服器上有好多B/S程式, 那這些程式怎麼才能知道這次訪問是由誰處理呢. 就像你去銀行辦理業務, 銀行有好多視窗可以辦理, 但是你進去之後站在大廳肯定沒有人給你辦理, 你需要走到某個視窗才可以. 伺服器上也是這樣的, 每個B/S程式都在某個視窗等待著, 你需要訪問伺服器的某個視窗才能有對應的程式處理. 每個視窗都有編號, 我們成這個視窗編號叫做埠. 只有通過域名和埠一起才能訪問到伺服器上應用程式. 格式為: "域名:埠", 例: a.com:8080代表訪域名對應IP的伺服器的8080埠, 如果8080埠有程式, 則會處理你的這次訪問.
1.7 網址
當你訪問某電商網站的時候, 先進入主頁, 點選分類進入分類列表頁面, 點選某個商品進入商品明細頁面. 其中主頁, 分類, 明細頁面都是伺服器上的程式返回給你的, 那麼伺服器怎麼知道你想訪問哪個頁面呢. 這個時候就需要你在訪問伺服器時明確告知伺服器你想要哪個頁面. 你需要在域名的後面新增你想訪問的頁面名稱. 例如伺服器規定index代表主頁, category代表分類, goods代表商品明細, 當你想訪問伺服器的分類頁面時就需要使用域名:埠/category來訪問, 通過域名能夠找到對應的伺服器, 通過埠找到對應處理的程式, 程式通過category就能知道你想要訪問分類頁並將分類頁面返回給你, a.com:8080/category就叫做網址, 也叫做URL.
1.8 HTTP協議
當你去參加了一個國際會議, 來自全世界的人共同討論一件事情, 每個國家的代表都用自己的語言討論, 會場一定會亂套, 這時候就需要有一個統一的協議來規範參會的人員. 比如: 參加會議必須遵循這個協議說英文, 英文有自己的單詞和語法, 大家都用英文交流就可以互相理解了. 在瀏覽器訪問伺服器的時候也必須遵循一個協議, 這個協議叫做HTTP(HyperText Transfer Protocol): 超文字傳輸協議. 上面講到的網址規則就是HTTP協議的一部分, 在a.com:8080/category前面加上http://即可, http://a.com:8080/category就是一個HTTP協議的網址了, 伺服器端也會按照HTTP協議接收並返回給你想要的結果. HTTP協議中80埠預設不顯示, 即http://a.com/category代表訪問伺服器的80埠.
1.9 Request&Response
理解了上面幾個概念, 我們來看一下當你在瀏覽器中訪問一個域名的時候究竟發生了什麼:
其中, 你訪問伺服器的過程就做請求(Request), 伺服器給你返回結果的過程叫做響應(Response). 整個互動過程如下:
- 瀏覽器中輸入網址: a.com:8080/category, 點選訪問按鈕
- 瀏覽器會通過DNS解析域名a.com對應的IP, 通過IP連線對應的伺服器
- 根據訪問中的8080埠找到在埠監聽的程式A進行處理
- 程式根據/category找到對應的處理程式, 處理完成後返回給瀏覽器
- 瀏覽器根據伺服器返回的結果將返回內容進行展示
- 本次請求完成
1.10 異常返回
上面介紹的是正常情況, 如果網路或者伺服器出現問題時返回的並不是你想要的結果, 看下面的例子:
你給你女朋友所在公司總機打電話, 撥通電話號碼並且還需要輸入分機號才行. 正常的情況下你就可以和女朋友通話了, 那如果你輸錯電話號碼了呢(有可能打進別的公司了, 也有可能是空號), 或者你輸錯分機號了, 又或者是你女朋友剛接到一半有事結束通話了. 這些情況都不是你想要的的, 屬於異常情況, 對於一個請求來說, 也是會有各種異常情況的.
女朋友所在公司總機相當於伺服器, 總機號碼相當於域名, 運營商根據號碼找到對應電話的過程相當於域名解析. 總機和分機號相當於網址. 電話號碼規則(總機分機規則)相當與HTTP協議. , 撥出電話的過程相當於一次請求, 公司總機收到你打入的電話相當於伺服器接收到了你的請求, 分機收到你打了電話相當於對應的程式正在處理你的請求. 女朋友接了你的電話相當於給你的響應.
下面我們分析一下幾種可能出現的異常情況:
- 總機號碼是空號: 運營商會提示你空號, 相當於你輸錯域名, 該域名在DNS中沒有對應的IP, 瀏覽器會提示你無法訪問.
- 總機號碼錯誤: 有可能電話掛到別的公司了, 相當於你輸錯域名, 但域名在DNS有對應的IP, 瀏覽器會訪問該IP所在伺服器. 於是你就進入到錯誤的網站中了
- 分機號碼錯誤: 公司總計會提示你找的人不存在, 相當於你訪問了伺服器中沒有的程式, 伺服器會返回一個狀態碼為404的錯誤. 提示你訪問的程式不存在.
- 電話剛接通就結束通話: 你的女朋友接通了電話並且你們吵架了, 於是她結束通話了電話. 相當於伺服器的程式處理你的請求時出現錯誤, 伺服器會返回一個狀態碼為500的錯誤, 提示是伺服器內部錯誤.
- 你的電話線被拔出: 相當於客戶端沒有網路, 瀏覽器會提示無網路
- 總機電話線被拔出: 你的電話號碼是正確的, 相當於DNS能夠正確解析你的網址並訪問伺服器, 但伺服器的程式沒有啟動因此無法處理你的程式, 瀏覽器在連線一段時間後發現一直沒有響應報出連線超時.
2. 響應資料
正常訪問伺服器時, 伺服器端程式處理完成後會給瀏覽器一個響應, 瀏覽器將響應的內容顯示給使用者. 那麼, 伺服器程式會返回什麼內容呢, 瀏覽器又是怎麼展示的呢?
2.1 HTML
可以開發B/S程式的語言很多, 各種瀏覽器也層出不窮, 勢必要有一個統一的標準來規範各種B/S程式開發語言和瀏覽器, 使得伺服器端返回的內容都是一致的, 各種瀏覽器都按照這種標準去解析. 這種統一的標準也是一種語言, 叫做HTML(Hyper Text Mark-up Language): 超文字標記語言. 伺服器返回至瀏覽器的內容就是HTML, 瀏覽器對HTML進行解析展示給使用者.
經常訪問網頁時你會發現, 當你在電商網站查詢訂單或購物車時展現形式為資料列表. 檢視商品時展示圖片和文字, 註冊時展現輸入框和按鈕. 這些不同形式的展示內容都是伺服器返回的, 換句話說展示的內容都是HTML, 瀏覽器根據HTML進行相應的展示:
HTML中定義了許多元件, 瀏覽器解析到相應標籤時會按約定的格式進行展示, 例如: HTML中定義了<table>, 瀏覽器就會把裡面的內容按照表格的形式進行展示, 無論多麼複雜的網頁, 都是由這些基本的HTML元件組合而成的, 簡單介紹幾個元件:
| 標籤 | 說明 | 備註 |
|---|---|---|
<table></table> |
表格 | 瀏覽器會將裡面的內容解析成表格進行展示. |
<a></a> |
超連結 | 瀏覽器會解析成連結, 點選時跳轉至對應網址. |
<img /> |
圖片 | 瀏覽器會將內容顯示為圖片. |
<input /> |
輸入框 | 瀏覽器會顯示輸入框, 使用者可以在食客中輸入內容. |
HTML在程式語言裡相對較簡單, 沒有過多的邏輯性, 去菜鳥教程中把每個元件練習一遍就可以.
2.2 CSS
當你學會HTML後你就會發現, HTML只定義了元件的展示形式, 在瀏覽器中展示時並不那麼的美麗大方, 而我們訪問的網頁都是很漂亮的, 這時我們需要一個裝修隊來幫我們把HTML處理的漂亮一些, 他就是CSS(Cascading Style Sheets): 層疊樣式表
CSS裡面可以定義HTML每個元件的大小, 顏色, 位置, 邊框, 背景, 內外間距等等, 你所看到的各種漂亮網頁都是通過CSS來美化的, 下面以一個連結為例, 看一下預設的連結樣式和經過CSS美化過的差別
<style>
a {
background-color: #0088cc; /* 背景顏色 */
color: #fff; /* 文字顏色 */
padding: 10px 20px; /* 文字內邊距 */
text-decoration: none; /* 下劃線樣式: 無 */
font-family: "microsoft yahei"; /* 字型:微軟雅黑 */
}
</style>
複製程式碼左側為經過CSS美化的樣式, 右側為連結的預設樣式. 誰更好看呢? 一個漂亮的網頁需要視覺設計師, 前端工程師共同合作才能完成, 作為WEB開發人員的你只需要對CSS簡單瞭解即可.
2.3 Javascript
很多網頁中都有一些很炫酷的特效, 比如在電商的商品頁面, 點選加入購物車按鈕物品會飛入購物車中.
我們分析一下如何實現的, HTML定義了網頁中的各種元素, 包括加入購物車按鈕, CSS為按鈕設定了樣式. 似乎都無法做出飛入效果. 是時候請他出場了, 他就是Javascript(簡稱JS): 一個和Java毫無關係的指令碼語言. 你可以理解為他是在瀏覽器中執行的指令碼. Javascript能夠做很多事:
- 監聽HTML節點的各種事件, 比如: 某個按鈕被點選, 滑鼠移入到某個圖片上, 瀏覽器視窗大小發生變化等等
- 對HTML節點進行增加,刪除操作, 比如: 刪除一個按鈕, 新增一張圖片, 改變按鈕中的文字等等
- 給HTML節點新增樣式, 比如: 給某個按鈕新增一個背景色, 隱藏或顯示某個按鈕等等
- 使用動畫效果改變HTML的位置, 大小等. 現在CSS3中可以不依賴於Javascript就可以實現動畫.
按照下面的思路就可以實現上述的飛入效果:
- 監聽加入購物車按鈕的點選事件
- 在購物車按鈕附近增加一個縮小的物品圖片
- 通過動畫將圖片位置從加入購物車按鈕附近挪入右側購物車
- 隱藏圖片
早期, Javascript是WEB開發人員必備的技能之一, 但隨著前後端分離開發模式的推廣, 作為WEB開發人員更多的關注後臺的業務實現及介面的定義, 後續文章中會對前後端分離模式進行介紹. 敬請關注.
2.4 總結
如果要在網頁中實現良好的互動體驗, HTML, CSS, Javascript缺一不可.
HTML相當於定義了一輛汽車的各個零部件, CSS控制每個零部件的形狀及位置, Javascript負責處理汽車的整個執行情況. 比如HTML定了汽車有6個輪胎, CSS設定汽車的顏色為綠色, Javascript監聽當踩油門時控制發動機. 如果沒有CSS, 所有汽車都將一模一樣, 沒有Javascript, 這輛汽車將只能看不能被駕駛. 但如果沒有HTML, 整個汽車都將不存在.
3. 結語
本篇文章是系列教程的開篇, 介紹了WEB開發中的一些基本原理及概念, 僅僅是引導新同學入門, 後續文章會逐步的講解, 讓新同學能夠在最快的時間學會基於SSM框架的WEB開發. 有興趣的同學可以關注.
WEB開發不僅需要掌握多種技術, 還需要了解各種業務場景的處理辦法. 這對新同學來說是一個挑戰, 希望各位新同學能夠堅持學習, 遇到問題可以留言.