-
ArthurSlog
-
SLog-33
-
Year·1
-
Guangzhou·China
-
Aug 9th 2018
用七八十年提交一份人生的答卷 这是一场开卷 没有监考老师 有的 是在乎你的人 我想 答案并不是最重要的 重要的是一起答卷的这群人 特别是真正在乎你的人 当答卷提交的那一刻 也许不再是忐忑不安 而是坦然以对 那些经历的种种会一直温暖着人心
-
(必看，这个已经写的够明白的了)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="12345678@qq.com">
</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 之间的数据绑定。