**WebAPP軟件技術棧隨筆** 記錄學習的點滴心得、踩過的坑、趟過的雷。 [TOC] ## 0. Web應用（Web2.0） ### 0.1 B/S架構 Web應用是一種B/S架構（Browser/Server）的軟件系統，以用戶與系統交互為主，注重業務處理建立的工作平臺。 Web2.0時代的動態網站注重的是用戶與網站的交互。因為以數據庫技術為基礎，用戶訪問網站是通過讀取數據庫來動態生成網頁方式，可以大大減少網站維護的工作量。網站上存在的主要是一些框架基礎，網頁的內容大都存儲在數據庫中，頁面要根據用戶的要求和選擇，動態地改變和響應。可實現網站內容的在線更新和管理，還可結合一些應用系統達到特定的交互和管理功能。 - **客戶端** 1. Browser。IE（Windows標配）、Chrome、Safari（iOS標配）、Mozilla/Firefox（Linux標配） 2. HTML。HyperText Mark-up Language，超文本標記語言。 3. CSS。Cascading Style Sheets，層疊/級聯樣式表。 4. 客戶端腳本編程語言。JavaScript、VBScript、Applet等。 - **服務器端** 1. Web服務器。Apache、Nginx、TomCat、IIS等 2. 服務器端腳本編程語言。PHP、JSP、ASP等。 3. 數據庫管理系統。MySQL、Oracle、SQL Server、MangoDB等 ### 0.2 程序開發語言 大多數網站開發使用的都是腳本語言，涉及2大類編程語言： - **編寫客戶端界面的語言**：HTML、CSS、JavaScript等。 - **編寫服務器端業務流程的語言**：PHP（Zend）、Python、Ruby、ASP（Microsoft）、Perl、Shel、JSP（Sun）等 **腳本語言**：又稱為動態語言，是使用一種特定的描述性語言、依據一定格式編寫的可執行文件。腳本是一種純文本（如ASCII碼）保存的程序，只在被調用時進行解釋或編譯。腳本在執行時，是由系統的腳本解釋器，將腳本中的文字命令一條一條翻譯成機器可識別的指令，并按腳本中的順序執行。 腳本語言的主要特性如下： - 語法和結果通常比較簡單 - 學習和使用通常比較簡單 - 通常以容易修改程序的“解釋”作為運行方式，不需要“編譯”。 - 系統上有相應的語言解釋程序就可以做到跨平臺。 - 程序的開發產能優于運行效能。 ### 0.3 Web開發標準 Web標準是由萬維網聯盟W3C（World Wide Web Consortium, http://www.w3.org ）創建于1994年，研究Web規范和指導方針，對Web進行標準化，創建并維護WWW標準。 大約有500名會員加入了W3C，它的主任Tim Berners-Lee 在1989年發明了Web。W3C推行的主要規范有`HTML`、`CSS`、`XML`、`XHTML`和`DOM`等由**瀏覽器進行解析的Web開發語言**。 W3C還與其他標準化組織協同工作，如IETF（Internet Engineering Task Force, Internet工程工作小組），WAP（無線應用協議），Unicode Consortium（Unicode聯盟）。 多年來，W3C把那些沒有被部分會員公司（如Netscape和Microsoft）嚴格執行的規范定義為“推薦”。自1998年開始，“Web標準組織”（www.Webstandards.org ）將W3C的“推薦”重新定義為“Web標準”，這是一種商業手法，目的是讓制造商重視并重新定位規范，在新的瀏覽器和網絡設備中完全支持那些規范。 符合Web標準的網站對于用戶和搜索引擎更加友好。Google、百度、Bing等專業搜索引擎都有自己的搜索規則和判斷網頁等級的技術（網頁蜘蛛/爬蟲程序）。 網站的優化方向就是：符合標準，符合蜘蛛爬行的標準；符合網站訪問者瀏覽的方便及易用性。 ### 0.4 網絡協議 > **HTTP（HyperText Transfer Protocol，超文本傳輸協議）** HTTP是互聯網上應用最為廣泛的一種網絡協議，所有的WWW文件都必須遵守這個協議/標準。我們今天普遍使用的版本：HTTP1.1，是W3C和IETF合作的結果，在他們發布的RFC2616中進行了定義。 HTTP是Browser或其他程序與WebServer之間的應用層通信協議。 在Internet上，HTTP通信通常發生在TCP/IP連接之上（是一個可靠的傳輸），默認端口是TCP 80，但也可指定其他端口。是一個客戶端請求（request）和服務器端響應（response）的標準。選擇TCP協議而不使用UDP協議，原因在于打開一個網頁需要傳送很多數據，TCP協議可以進行傳輸控制，按順序組織數據和進行錯誤糾正。 **HTTP的信息交互過程** 一般來說HTTP協議的交互過程分為4步： - 客戶端（Web瀏覽器、網絡爬蟲或其他工具）發起一個到服務器上指定端口（默認為80）的HTTP請求，再建立一個到服務器該端口的TCP連接。 - 客戶端發出請求信息。 - 服務器端監聽端口，接收請求，返回響應信息。 - 客戶端接收響應信息，工具（Web瀏覽器、網絡爬蟲等）解析響應信息。客戶端斷開與服務器的連接。 在上述過程中某一步出現錯誤，產生的錯誤信息將返回客戶端，由客戶端解析/顯示。對于網站用戶來說，上述過程都是由HTTP自己完成，用戶只要點擊鼠標，等待信息顯示就可以了。 **HTTP中的URL** URL（Uniform Resource Locator），統一資源定位符。 URL的格式為：` HTTP://<IP地址>/[端口號]/[路徑][?<查詢信息>]` 示例解析： `http://www.brophp.com/book/index.html` * `http://`：代表超文本傳輸協議，通知brophp.com服務器顯示Web頁。通常不用輸入。 * `www`：代表一個Web（萬維網）服務器。 * `brophp.com/`：裝有網頁的服務器的域名或站點服務器的名稱（網站根目錄）。 * `book/`：服務器上的子目錄（根目錄下的子目錄）。 * `index.html`：book/目錄下的一個HTML文件，也就是網頁。 * 如果端口是默認的80可以不寫，如果為非80端口就必須寫明。 **HTTP的消息頭** HTTP規范1.0和1.1（RFC 2616）定義了HTTP消息的格式。HTTP報文由從客戶端到服務器的請求（request）消息和從服務器到客戶端的響應（response）消息構成。每個消息都由3部分組成：`狀態行`、`消息頭`、`消息體`。 * HTTP請求消息 HTTP請求消息：從客戶端向服務器請求時發送給服務器的消息，服務器根據該request做出相應的處理。每個HTTP請求消息都分為HTTP消息頭和HTTP消息體2部分。 ~~~html GET / HTTP/1.1 Host: ipms.com Connection: keep-alive Cache-Control: max-age=0 Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 Accept-Encoding: gzip, deflate Accept-Language: zh-CN,zh;q=0.9,en;q=0.8 Cookie: PHPSESSID=tqd5lbc4qspd8i0laooa0sj7g0; thinkphp_show_page_trace=0|0 ~~~ 解析： 第一行：請求行，必須。三個字段，`方法`、`URL`、`HTTP版本`，每個字段間以空格分隔。`方法`的內容有GET、POST、HEAD。HTTP請求的消息絕大多數用GET方法，是瀏覽器用來請求對象的方法，所請求的對象就在`URL`字段中標識。`HTTP版本`：“ HTTP/1.1”，瀏覽器實現的是HTTP1.1版本。 其他行都稱為頭部行。 Host：存放請求對象的主機。 Connection：發出請求的瀏覽器要使用持久連接，服務器發出響應后要保持連接。如果為“close”就為非持久連接，服務器發出響應后要關閉連接。 User-Agent：產生當前請求的瀏覽器類型。服務器可根據不同類型發送同一個對象的不同版本。 Accept-Language：所請求對象的語言版本。若服務器沒有這個語言版本，發送默認版本。 * HTTP響應消息 ~~~html HTTP/1.1 200 OK Date: Wed, 23 May 2018 06:26:52 GMT Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2h PHP/5.6.26 X-Powered-By: PHP/5.6.26 Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=utf-8 ~~~ 解析： 第一行：狀態行，必須。三個字段，`協議版本`、`狀態碼`、`狀態短語`，每個字段間以空格分隔。 其他行都稱為頭部行。 HTTP響應消息中常見狀態消息（[https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status)） | 狀態碼 | 狀態短語 | 解釋 | | --- | --- | --- | | 200 | OK | 請求成功。| | 301 | Moved Permanently | 被請求的資源已永久移動到新位置，并且將來任何對此資源的引用都應該使用本響應返回的若干個 URI 之一。 | | 304 | Not Modified | 網頁的內容（自上次訪問以來或者根據請求的條件）并沒有改變。304 響應禁止包含消息體，因此始終以消息頭后的第一個空行結尾。 | | 400 | Bad Request | 當前請求無法被服務器理解。 | | 404 | Not Found | 請求失敗，請求所希望得到的資源未被在服務器上發現。404這個狀態碼被廣泛應用于當服務器不想揭示到底為何請求被拒絕或者沒有其他適合的響應可用的情況下。| | 500 | Internal Server Error | 服務器內部錯誤，服務器遇到了不知道如何處理的情況。 | | 502 | Bad Gateway | 服務器作為網關需要得到一個處理這個請求的響應，但是得到一個錯誤的響應。 | | 505 | HTTP Version Not Supported | 服務器不支持請求中所使用的HTTP協議版本。 | Date：服務器把請求的對象從其文件系統中取出，插入響應消息中發送出去的時間。不是對象本身創建或最后修改的時間。 Server：服務器的信息。與請求消息中的User-agent作用類似。 Content-Type：指出消息體中的對象的類型。是HTML文本。 ## 1. 開發環境 - **WAMP** - Windows - Apache - MySQL - PHP ## 2. 生產環境 - **LAMP** - Linux - Apache - MySQL - PHP ## 3. IDE/編輯器 - Note++ (Windows) - Ecllipse(Linux,Windows,Android??) - Xcode(iOS??) ## 4. 文檔寫作語言 - Markdown (后綴為“.md”文件) ## 5. 開發框架 - ThinkPHP 5.x - Spring Boot(JAVA Android??) * Bootstrap * React.js * Vue.js * Node.js * Angular.js ---