1. 程式人生 > >筆記:MDN的服務器端網站編程

筆記:MDN的服務器端網站編程

dem 概念 數據返回 圖表 個數 ide done tel pan

互聯網是如何工作的

互聯網(Internet)和網絡(web

互聯網是基礎設施,網絡是建立在這種基礎設施之上的服務。

網頁,網站,網絡服務器和搜索引擎的區別是什麽?

網頁(webpage)

一份能夠顯示在網絡瀏覽器(如Firefox,,Google Chrome,Microsoft Internet Explorer 或Edge,Apple的Safari)上的文檔。網頁也常被稱作"web pages"(網頁)或者就叫"pages"(頁面)。

網站(website)

一個由許多組合在一起,並常常以各種方式相互連接的網頁組成的集合。網站常被稱作"web site"(網站)或簡稱"site"(站點)。

網絡服務器(web server)

一個在互聯網上托管網站的計算機。

搜索引擎(search engine)

幫助你尋找其他網頁的網站,比如Google,Bing,或Yahoo。註:搜索引擎也是網站。

網頁和網站

提示: 瀏覽器也能顯示其他文檔,例如PDF文件或圖像,但網頁(webpage)這一概念專指HTML文檔。其他情況我們則只會使用文檔(document)這一概念。

網絡上所有可用的網頁都可以通過一個獨一無二的地址訪問到。

網站是共享唯一域名的相互鏈接的網頁的集合。給定網站的每個網頁都提供了明確的鏈接—一般都是可點擊文本的形式—允許用戶從一個網頁跳轉到另一個網頁。

當網站只包含一個網頁時,網站和網頁二者尤其容易弄混。這樣的網站有時稱之為單頁網站(single-page website)。

網絡服務器

一個網絡服務器是一臺托管一個或多個網站的計算機。 "托管"意思是所有的網頁和它們的支持文件在那臺計算機上都可用。

別把網站和網絡服務器弄混了。例如,當你聽到某人說:"我的網站沒有響應",這實際上指的是網絡服務器沒響應,並因此導致網站不可用。

搜索引擎

瀏覽器是一個接收並顯示網頁的軟件,搜索引擎則是一個幫助用戶從其他網站中尋找網頁的網站。不要把基礎設施(瀏覽器)和服務(搜索引擎)混淆。

什麽是網絡服務器?

概述

“網絡服務器(Web server)”可以代指硬件或軟件,然而它們都是協同工作的。

  1. 在硬件部分,一個網絡服務器是一個用來存儲網站的組成文件(比如說 HTML 文檔,圖片,CSS 樣式表,和 JavaScript 文件)以及交付它們到終端用戶的設備的計算機。它跟互聯網連接並可以通過域名像 mozilla.org 來被訪問。
  2. 在軟件部分,一個網絡服務器包括幾個控制網絡用戶如何訪問托管文件的部分,至少是一個 HTTP 服務器 [HTTP server]。一個 HTTP 服務器是一個能理解URLs (網絡地址) 和 HTTP (你的瀏覽器查看網頁時所用的協議) 的軟件。

在最基礎的層次,每當一個瀏覽器需要一個網絡服務器上的托管文件時,瀏覽器會通過 HTTP 請求這個文件。當這個請求到達了正確的網絡服務器(硬件),這個 HTTP 服務器(軟件)返回所請求的文檔,同樣通過 HTTP。

要發布一個網站,你需要一個靜態或動態的服務器。

靜態網絡服務器(static web server),或者堆棧,由一個計算機(硬件)和一個 HTTP 服務器(軟件)組成。我們稱它為 “靜態” 因為這個服務器把它的托管文件 “保持原樣” 地傳送到你的瀏覽器。

動態網絡服務器(dynamic web server) 由一個靜態的網絡服務器加上額外的軟件組成,最普遍的是一個應用服務器 [application server] 和一個數據庫 [database]。我們稱它為 “動態” 因為這個應用服務器會在通過 HTTP 服務器傳送托管文件到你的瀏覽器前,對這些托管文件進行更新。

舉個例子,要生成你在瀏覽器中看到的最終網頁,應用服務器或許會用一個數據庫中的內容填充一個 HTML 模板。網站像 MDN 或者維基百科 [Wikipedia] 有成千上萬的網頁,但是它們不是真正的 HTML 文檔,它們只是少數的 HTML 模板以及一個巨大的數據庫。這樣的設置讓它更快更簡單地維護以及交付內容。

托管文件

一個網絡服務器首先需要存儲這個網站的文件,也就是說所有的 HTML 文檔和它們的相關資源 [related assets],包括圖片,CSS 樣式表,JavaScript 文件,字形 [fonts] 以及影像。

嚴格來說,你可以在你自己的計算機上托管所有的這些文件,但是在一個專用的網絡服務器上存儲它們會方便得多,因為它

  • 會一直啟動和運行
  • 會一直與互聯網連接
  • 會一直擁有一樣的 IP 地址(不是所有的 ISPs 都會為家庭線提供一個固定的 IP 地址)
  • 由一個第三方提供者維護

一旦你設置好一個網絡托管解決方案,你只需要去上傳你的文件到你的網絡服務器。

通過HTTP交流

一個網絡服務器提供了 HTTP(超文本傳輸協議)支持。正如它的名字暗示,HTTP 明確提出了如何在兩臺計算機間傳輸超文本(比如說鏈接的網絡文檔 [linked web documents])。

在一個網絡服務器上,HTTP 服務器要為處理和應答到來的請求負責任。

  1. 當收到一個請求時,一個 HTTP 服務器首先要檢查所請求的 URL 是否與一個存在的文件相匹配。
  2. 如果是,網絡服務器會傳送文件內容回到瀏覽器。如果不是,一個應用服務器會建立必要的文件。
  3. 如果兩種處理都不可能,網絡服務器會返回一個錯誤信息到瀏覽器,最常見的是 “404 未找到” ["404 Not Found"]。(這錯誤太常見以至於很多網頁設計者花費多數時間去設計 404 錯誤頁面)

靜態和動態內容

粗略地說,一個服務器可以提供靜態或者動態的內容。“靜態” 意味著 “保持原樣地提供”。靜態的網站是最容易設立的,所以我們建議你制作一個靜態的網站作為你的第一個網站。

“動態” 意味著服務器會處理內容甚至實時地從一個數據庫中產生它。這個解決方案提供了更多的靈活性,但是技術堆棧變得更難去處理,讓建立網站更顯著地復雜。

這裏有太多的應用服務器,所以提供一個具體的服務器是挺難的。有些應用服務器迎合具體的網站類別,像是博客,百科或者電子商店;其他的應用服務器,叫做 CMSs(內容管理系統 [content management systems]),則更加通用。如果你正在開發一個動態網站,花一些時間去選擇適合你需求的工具。除非你想要學習一些網絡服務器編程 [web server programming](而這本身就是一個令人興奮的領域!),你不需要去創建你自己的應用服務器。這只是在重新創造輪子。

我需要什麽軟件來構建一個網站

需要文本編輯器(創建和編輯網頁)、網絡服務器(上傳文件到網絡)和瀏覽器(瀏覽頁面)。

當你的網站已經為公眾瀏覽做好準備,你會需要上傳你的網頁到你的網絡服務器。你可以從不同的供應者處購買服務器的空間。一旦你選擇好供應者,供應者會通過電子郵件給你發送 FTP(文件傳輸協議 [file transfer protocol])訪問信息。

服務器端網站編程

服務器端編程的第一步

服務器端介紹

大多數的大型網站采用服務器端編程來在需要的時候動態展示不同的信息,這些信息通常會從服務器上的數據庫中取出,然後發送給客戶端,並通過一些代碼(比如HTML和Javascript)展示在客戶端。

或許服務器端編程的最大益處在於它允許你對不同的用戶個體展示不同的網站信息。動態網站可以高亮基於用戶喜好和習慣的與用戶相關度更高的內容。服務器端編程可以通過存儲偏好設置和其他個人信息來讓網站更加簡潔——比如通過重復使用信用卡的詳細信息來簡化後續付款流程。

它甚至可以允許和用戶的線下互動,比如通過郵件或者其他渠道發送通知和更新信息。服務器端的所有的這些能力使得網站可以與用戶有更深的聯系。

網絡瀏覽器通過超文本傳輸協議 (HTTP)來和網絡服務器 進行通信。當你在網頁上點擊一個鏈接,或提交一個表單,再或進行一次搜索時,一個HTTP請求就從你的瀏覽器發送到了目標服務器。

網絡服務器等待客戶端的請求信息,在它們到達的時候處理它們,並且回復網絡瀏覽器一個HTTP回應信息。

靜態網站是指無論何時當一個特定資源被請求的時候都返回相同的被硬編碼的內容。靜態網站的基本架構如下圖:

動態網站是指,一些響應內容只有在被需要的時候才會生發的網站。在一個動態網站上,頁面通常是通過將數據庫的數據植入到HTML模板中的占位符中而產生的(這是一種比使用靜態網站有效得多的存儲大量內容的方式)。

支持一個動態網站的代碼中的大多數代碼直接在服務器上運行。編寫這些代碼就是所謂的“服務器端編程”(有些時候也稱“後端腳本編寫”)。

下面的圖表展示了一個動態網站的簡潔的架構。

動態網站對於靜態資源的請求的處理方式和靜態網站是一樣的(靜態資源是指那些不會改變的文件——最典型的就是:CSS,Javascript,圖片,預先生成的PDF文件等)。

對於動態資源的請求則會指向(2)服務器端代碼(在圖中顯示為Web Application(網絡應用))。在處理“動態請求”時,服務器會首先解釋請求,從數據庫中讀取被請求的信息,然後將這些被檢索的信息組合到HTML模板中(4),最後返回一個包含所生成的HTML頁面的回應(5,6)。

在瀏覽器端運行的代碼被稱為客戶端代碼,並且主要涉及所呈現的網頁的外觀和行為的改進。這就包括選擇和設計UI元素、布局、導航、表單驗證等。相反的,服務器端網站編程主要涉及,對於相應的請求,選擇所要返回給瀏覽器的內容。服務器端代碼解決這樣一些問題,比如驗證提交的數據和請求、使用數據庫來存儲和檢索信息及發送給用戶正如他們所請求的的正確內容。

開發者們通常會使用web框架來編寫他們的代碼。web框架是一個各種函數、對象、規則和其他代碼結構的集合體,被設計用來解決一些普遍問題,從而加速開發,並且簡化在一個特定領域中面臨的不同類型的任務。同樣的,當客戶端和服務器端代碼使用框架時,它們的領域是不同的,因此框架也會不同。客戶端web框架簡化布局和演示任務,然而服務器端web框架提供大量的普通網絡服務功能,不然的話你可能需要自己來實現這些功能(比如支持會話、支持用戶和身份驗證、簡單的數據訪問、模板庫等)。

註意事項:客戶端框架通常被用來幫助加速客戶端代碼的開發,但是你也可以選擇手寫所有的代碼;事實上,如果你只需要一個小型的、簡單的網站UI,手寫自己的代碼可能更快並且更高效。相反的,你應該從來沒有考慮過不使用框架而直接編寫web應用程序的服務器端組件。

你可以在服務器端做什麽?信息的高效存儲和傳輸、定制用戶體驗、控制對內容的訪問、存儲會話和狀態信息、通知和通訊、數據分析。

Client-Server overview

HTTP請求包含定義了請求行為的方法,比如:

  • GET:獲取一份特定資源(比如一個包含了一個產品或者一系列產品相關信息的HTML文檔)。你可以通過點擊一個鏈接或者在網站進行一次搜索(比如搜索引擎的首頁)做出一次簡單的GET請求。
  • POST:創建一份新的資源(比如給wiki增加一片新的文章、給數據庫增加一個新的節點)。當你提交一個表單,並且希望表單所包含的信息存儲到服務器的時候,你就生成了一次HTTP POST請求。

當你有少量頁面時,向每個用戶發送相同的內容時,靜態網站是最佳選擇, 然而隨著頁面數量的增加,它們的維護成本也會很高。靜態站點的服務器只需要處理 GET 請求,因為服務器不存儲任何可修改的數據。它也不會根據HTTP的請求數據(例如 URL 參數或 cookie)更改響應。

動態請求:Web 瀏覽器收到返回的 HTML 後才發送單獨的請求以獲取其引用的任何其他 CSS 或 JavaScript 文件(這時就和靜態網站的工作方式一樣了)。

Web 應用程序(Web Application)的工作是接收 HTTP 請求並返回 HTTP 響應。雖然與數據庫交互以獲取或更新信息是非常常見的功能,但是代碼也可能同時做其他事情,甚至不與數據庫交互。

服務器端網站代碼並非只能在響應中返回 HTML 代碼片段/文件。它可以動態地創建和返回其他類型的文件(text,PDF,CSV 等)甚至是數據(JSON,XML等)。

將數據返回到 Web 瀏覽器以便它可以動態更新自己的內容(AJAX)的想法實現已經有相當長的一段時間了。最近,“單頁面應用程序”已經變得流行起來,整個網站用一個 HTML 文件編寫,在需要時動態更新。使用這種風格的應用程序創建的網站將大量的計算成本從服務器推向網絡瀏覽器,並可能導致網站表現出更像本地應用程序(高度響應等)。

服務器端web框架

Server-side web frameworks (a.k.a. "web application frameworks"(web應用框架)) are software frameworks that make it easier to write, maintain and scale web applications. They provide tools and libraries that simplify common web development tasks, including routing URLs to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting output (e.g. HTML, JSON, XML), and improving security against web attacks.

Express (Node.js/JavaScript) is a fast, unopinionated, flexible and minimalist web framework for Node.js (node is a browserless environment for running JavaScript). It provides a robust set of features for web and mobile applications.

網站安全性

站點安全就是為保護站點不受未授權的訪問、使用、修改和破壞而采取的行為或實踐。

You should understand that a web application cannot trust any data from the web browser! All user data should be sanitized before it is displayed, or used in SQL queries or file system calls.

Express 網頁框架 [Express Web Framework (Node.js/JavaScript)]

筆記:MDN的服務器端網站編程