- ArthurSlog
- SLog-33
Year·1
Guangzhou·China
- Aug 9th 2018
用七八十年提交一份人生的答卷 這是一場開卷 沒有監考老師 有的 是在乎你的人 我想 答案並不是最重要的 重要的是一起答卷的這羣人 特別是真正在乎你的人 當答卷提交的那一刻 也許不再是忐忑不安 而是坦然以對 那些經歷的種種會一直溫暖着人心
開發環境MacOS(High Sierra 10.13.5)
需要的信息和信息源：
(必看，這個已經寫的夠明白的了)HTTP,超文本傳輸協議（HTTP）是用於傳輸諸如HTML的超媒體文檔的應用層協議。它被設計用於Web瀏覽器和Web服務器之間的通信，但它也可以用於其他目的。 HTTP遵循經典的客戶端-服務端模型，客戶端打開一個連接以發出請求，然後等待它收到服務器端響應。 HTTP是無狀態協議，意味着服務器不會在兩個請求之間保留任何數據（狀態）。雖然通常基於TCP / IP層，但可以在任何可靠的傳輸層上使用; 也就是說，一個不會靜默丟失消息的協議，如UDP。
引用 mozilla HTTP概述 上的說明:
概述：
“網絡服務器（Web server）”可以代指硬件或軟件，然而它們都是協同工作的。
在硬件部分，一個網絡服務器是一個用來存儲網站的組成文件（比如說 HTML 文檔，圖片，CSS 樣式表，和 JavaScript 文件）以及交付它們到終端用戶的設備的計算機。它跟互聯網連接並可以通過域名像 mozilla.org 來被訪問。
在軟件部分，一個網絡服務器包括幾個控制網絡用戶如何訪問託管文件的部分，至少是一個 HTTP 服務器 [HTTP server]。一個 HTTP 服務器是一個能理解URLs (網絡地址) 和 HTTP (你的瀏覽器查看網頁時所用的協議) 的軟件。
在最基礎的層次，每當一個瀏覽器需要一個網絡服務器上的託管文件時，瀏覽器會通過 HTTP 請求這個文件。當這個請求到達了正確的網絡服務器（硬件），這個 HTTP 服務器（軟件）返回所請求的文檔，同樣通過 HTTP。
Basic representation of a client/server connection through 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]）。
一個協議Protocol是一套爲了在兩臺計算機間交流而制定的規則。 HTTP 是一個文本化的 [textual]，無狀態的 [stateless] 協議。
文本化
所有的命令都是純文本的 [plain-text] 和人類可讀的 [human-readable]。
無狀態
無論是服務器還是客戶都不會記住之前的交流。舉個例子，僅依靠 HTTP，一個服務器不能記住你輸入的密碼或者你正處於業務中的哪一步。你需要一個應用服務器來進行這樣的工作。（我們會在日後的文章中涵蓋這類的技術。）
HTTP 爲客戶和服務器間的如何溝通提供清晰的規則。我們會在日後的一篇技術文章 中覆蓋 HTTP 本身。就目前而言，只需要知道這幾點：
只有用戶可以制定 HTTP 請求，然後只會送到服務器。服務器只可以回覆一個客戶的 HTTP 請求。
當通過 HTTP 請求一個文件時，客戶必須提供這個文件的URL。
網絡服務器必須應答每一個 HTTP 請求，至少也要回復一個錯誤信息。
在一個網絡服務器上，HTTP 服務器要爲處理和應答到來的請求負責任。
當收到一個請求時，一個 HTTP 服務器首先要檢查所請求的 URL 是否與一個存在的文件相匹配。
如果是，網絡服務器會傳送文件內容回到瀏覽器。如果不是，一個應用服務器會建立必要的文件。
如果兩種處理都不可能，網絡服務器會返回一個錯誤信息到瀏覽器，最常見的是 “404 未找到” ["404 Not Found"]。（這錯誤太常見以至於很多網頁設計者花費許多時間去設計 404 錯誤頁面。靜態內容和動態內容：
粗略地說，一個服務器可以提供靜態或者動態的內容。“靜態” 意味着 “保持原樣地提供”。靜態的網站是最容易建立的，所以我們建議你製作一個靜態的網站作爲你的第一個網站。
“動態” 意味着服務器會處理內容甚至實時地從一個數據庫中產生它。這個解決方案提供了更多的靈活性，但是技術堆棧變得更難去處理，讓建立網站更驚人地複雜。
以你正在閱讀的頁面爲例子。在正在託管它的網絡服務器裏，有一個應用服務器會從數據庫提取文章內容，安排它的佈局，把它放置在一些 HTML 模板中，然後爲你傳輸結果。在這裏，這個應用服務器叫做 Kuma 並且是由 Python （使用 Django 構架) 構建的。Mozilla 團隊爲了 MDN 的特殊要求開發 Kuma，但是這裏有很多相似的建立在很多其他技術之上的應用。
這裏有太多的應用服務器，所以提供一個具體的服務器是挺難的。有些應用服務器迎合具體的網站類別，像是博客，百科或者電子商店；其他的應用服務器，叫做 CMSs（內容管理系統 [content management systems]），則更加通用。如果你正在開發一個動態網站，花一些時間去選擇適合你需求的工具。除非你想要學習一些網絡服務器編程 [web server programming]（而這本身就是一個令人興奮的領域！），你不需要去創建你自己的應用服務器。這只是在重新創造輪子。開始編碼
- 修改 signup.html 頁面的代碼和 signup.js 的代碼，讓 html 文件裏的數據和 js 裏的代碼關聯起來，以便於我們在 js 文件裏去控制 html 文件裏的數據，並能把用戶在 html 頁面上輸入的數據，用 http 協議傳送給服務端
signup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./css/style.css">
<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>signup_ArthurSlog</title>
</head>
<body>
<div id="signup-container">
<div>This is signup's page by ArthurSlog</div>
<p>Singup</p>
<form action="http://127.0.0.1:3000/signup" method="GET">
<br>
<div>
Account: {{ account }}
<br>
<input type="text" name="name" placeholder="username">
</div>
<br>
<br>
<div>
Password: {{ password }}
<br>
<input type="text" name="password" placeholder="password">
</div>
<br>
<br>
<div>
Again Password: {{ repassword }}
<br>
<input type="text" name="repassword" placeholder="repassword">
</div>
<br>
<br>
<div>
First Name: {{ firstname }}
<br>
<input type="text" name="firstname" placeholder="firstname">
</div>
<br>
<br>
<div>
Last Name: {{ lastname }}
<br>
<input type="text" name="lastname" placeholder="lastname">
</div>
<br>
<br>
<div>
Birthday: {{ birthday }}
<br>
<input type="text" name="birthday" placeholder="2000/08/08">
</div>
<br>
<br>
<div>
<span>Sex: {{ currentSex }}</span>
<br>
<input type="radio" id="sex" value="male" v-model="currentSex">
<label for="sex">male</label>
<br>
<input type="radio" id="sex" value="female" v-model="currentSex">
<label for="sex">female</label>
</div>
<br>
<br>
<div>
<span>Age: {{ currentAge }}</span>
<br>
<select v-model="currentAge" id="age">
<option disabled value="">Select</option>
<option v-for="age in ages">{{ age }}</option>
</select>
</div>
<br>
<br>
<div>
Wechart: {{ wechart }}
<br>
<input type="text" name="wechart" placeholder="wechart's name">
</div>
<br>
<br>
<div>
QQ: {{ qq }}
<br>
<input type="text" name="qq" placeholder="12345678">
</div>
<br>
<br>
<div>
Email: {{ email }}
<br>
<input type="text" name="email" placeholder="[email protected]">
</div>
<br>
<br>
<div>
Contury: {{ contury }}
<br>
<input type="text" name="contury" placeholder="China">
</div>
<br>
<br>
<div>
Address: {{ address }}
<br>
<input type="text" name="address" placeholder="Guangzhou">
</div>
<br>
<br>
<div>
Phone: {{ phone }}
<br>
<input type="text" name="phone" placeholder="138********">
</div>
<br>
<br>
<div>
Websize: {{ websize }}
<br>
<input type="text" name="websize" placeholder="xxx.com">
</div>
<br>
<br>
<div>
Github: {{ github }}
<br>
<input type="text" name="github" placeholder="Github's URl">
</div>
<br>
<br>
<div>
Bio: {{ bio }}
<br>
<input type="text" name="bio" placeholder="This is the world~">
</div>
<br>
<br>
<input type="submit" value="完成註冊">
</form>
<a href="./index.html">Return index's page</a>
<br>
<br>
</div>
<script src="./js/signup.js"></script>
</body>
</html>- 於此同時，我們把 html 裏的數據與 js 關聯起來，以便後續在 js 裏處理這些數據，把數據傳給服務端
signup.js
var signup_container = new Vue({
el: '#signup-container',
data: {
account: '',
password: '',
repassword: '',
firstname: '',
lastname: '',
birthday: '',
sexs: ['male', 'female'],
currentSex: 'male',
ages: ['1', '2', '3', '4', '5', '6', '7', '8',
'9', '10', '11', '12', '13', '14', '15', '16', '17', '18'],
currentAge: '18',
wechart: '',
qq: '',
email: '',
contury: '',
address: '',
phone: '',
websize: '',
github: '',
bio: ''
}
})打開 signup.html 頁面，看一下頁面是否正常，下一節繼續
至此，我們完成了 signup.html 與 signup.js 之間的數據綁定。
歡迎關注我的微信公衆號 ArthurSlog