Web 開發(fā)技術(shù)一直在不斷發(fā)展，各種新的技術(shù)層出不窮。但是技術(shù)發(fā)展的本質(zhì)是不變的，就是為了不斷提高生產(chǎn)效率、創(chuàng)造更好的產(chǎn)品和服務(wù)和解決更多更難的問題。

一、靜態(tài)頁面時代

靜態(tài)頁面時代

• 缺點
  • 只能顯示靜態(tài)內(nèi)容

二、動態(tài)頁面

前后端不分

1.CGI 時代

CGI Web

• CGI ( Common Gateway Interface ):
  • 一種重要的互聯(lián)網(wǎng)技術(shù)，可以讓一個客戶端，從網(wǎng)頁瀏覽器向執(zhí)行在網(wǎng)絡(luò)服務(wù)器上的程序請求數(shù)據(jù)。CGI描述了服務(wù)器和請求處理程序之間傳輸數(shù)據(jù)的 一種標準 。( 摘自 維基百科-通用網(wǎng)關(guān)接口)
  • 可以用任何腳本語言或者是完全獨立編程語言實現(xiàn)，Perl 使用的最廣泛
• 缺點
  • 伸縮性差，每個請求分配一個新的進程
  • 不安全，直接訪問文件系統(tǒng)或者環(huán)境變量

2.Servlet , JSP , ASP , PHP 等技術(shù)出現(xiàn)

JSP Web

• 缺點
  • 可維護性不好，UI 和業(yè)務(wù)邏輯高耦合
  • 前后端開發(fā)強關(guān)聯(lián)，不利于提高開發(fā)效率

后端 MVC

后端 MVC Web

MVC 軟件架構(gòu)

• MVC

  • MVC模式（Model–view–controller）是軟件工程中的一種軟件架構(gòu)模式，把軟件系統(tǒng)分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。( 摘自 維基百科-MVC )
    • 模型（Model） 用于封裝與應(yīng)用程序的業(yè)務(wù)邏輯相關(guān)的數(shù)據(jù)以及對數(shù)據(jù)的處理方法?！?Model ”有對數(shù)據(jù)直接訪問的權(quán)力，“Model”不依賴“View”和“Controller”，Model 不關(guān)心它會被如何顯示或是如何被操作。但是 Model 中數(shù)據(jù)的變化一般會通過一種刷新機制被公布。為了實現(xiàn)這種機制，那些用于監(jiān)視此 Model 的 View 必須事先在此 Model 上注冊，從而，View 可以了解在數(shù)據(jù) Model 上發(fā)生的改變。
    • 視圖（View） 能夠?qū)崿F(xiàn)數(shù)據(jù)有目的的顯示。在 View 中一般沒有程序上的邏輯。為了實現(xiàn) View 上的刷新功能，View 需要訪問它監(jiān)視的數(shù)據(jù)模型（Model），因此應(yīng)該事先在被它監(jiān)視的數(shù)據(jù)那里注冊。
    • 控制器（Controller） 起到不同層面間的組織作用，用于控制應(yīng)用程序的流程。它處理事件并作出響應(yīng)?！笆录卑ㄓ脩舻男袨楹蛿?shù)據(jù) Model 上的改變。

• 缺點

  • 業(yè)務(wù)邏輯并沒有完全嚴格區(qū)分，JSP 中存在業(yè)務(wù)代碼
  • 前端開發(fā)者需要了解后端語言

前后端分離

1. Ajax

Ajax Web

2. JSON

Ajax JSON Web

3. 前端 MVC

Ajax JSON MVC Web

• 前后端分離的缺點
  • 不利于 SEO
  • 性能差，js 渲染頁面時間長

4. Node.js

Nodejs Server Web

• 前端 UI layer 處理瀏覽器層的展現(xiàn)邏輯。通過 CSS 渲染樣式，通過 JavaScript 添加交互功能，HTML 的生成也可以放在這層，具體看應(yīng)用場景。
• Nodejs UI layer 處理路由、模板、數(shù)據(jù)獲取、cookie 等。通過路由，前端終于可以自主把控 URL。

三、相關(guān)技術(shù)知識點

基礎(chǔ)知識

• HTML
• CSS
• JavaScript
• http 協(xié)議
• Linux 服務(wù)器常用命令
• JSON

前端

• CSS 框架
  • Bootstrap
• 前端 MVC 框架
  • Vue
  • React
  • AngularJS
• Nodejs

后端 ( 以 Java 為主)

• Web 服務(wù)器
  • Apache HTTP
  • Nginx
• Web 應(yīng)用服務(wù)器
  • Tomcat
  • Weblogic
  • WebSphere
• Servlet/JSP
• 后端 MVC
  • SSH
  • SSM
  • SpringMVC
  • SpringBoot
  • SpringCloud
• 數(shù)據(jù)庫
  • MySQL
  • Oracle

參考鏈接:

1. Web開發(fā)的發(fā)展史
2. Web開發(fā)技術(shù)的演變
3. Web開發(fā)技術(shù)的演變

梳理技術(shù)的演進過程，是為了更全面的了解技術(shù)，和對自己知識體系的查漏補缺。該文會不定期更新，同時歡迎大家一起討論。